 This is a really dumb slide. I have it here for me to set the context. We're building forms. This is a contact form. This is the contact form that the web form ships with. It's copied from the contact form core. It's a contact form that everyone's familiar with. It just has four fields name, email, subject, and message and the second part of the web form module is to collect the data from this form as a submission and this is what a submission looks like in Jubilee. We have the data in your system and then you can send it through email and there's some history of the web form module for Jubilee that I'm just going to quickly go through. I worked on an early adoption of Jubilee from Memorial Sloan Kettering Cancer Center. They started on an alpha release of Jubilee and they launched on a beta, but the web form module was not ported to Jubilee in 2015 and we did an MVP solution which we called the AMO form. I will show that to you, but it was just a way to get forms built as quickly and simply as possible so we could launch the site. And Sloan Kettering is still using that module, but they're in the process of migrating over to the web form module. And in 2016, it's actually like I think Christmas day, I contributed the AMO form module back to the Drupal community. That was when I created the project and worked all through 2016 towards the end. There's an issue that was created of, let's change the AMO form module's name because no one knows what this means. And it went in a lot of different directions. Someone suggested super form or something else. And finally someone said, well just call it web form and I was hesitant, but then the thread went on and quick search got involved and we basically moved the AMO form code base into the web form module right at the beginning of 2017. And the two most immediate differences I'll talk about is the AMO form module is very developer specific. That was how I saw it. They're centric to helping developers and the web form module is more for developers and site builders and you'll start to see that we'll move on. So I want to just give a quick overview. What is a AMO form? Well a AMO form for me was just taking a format, this is getting technical, but a form API render array and serializing into AMO. So this is how Drupal describes forms. This is a render array just written out in the AMO. It just describes there's a name field, the text field, email, it's an email field. And everyone's pretty familiar with this. And this was what AMO form was. You would go and edit this using using a code mirror editor. You'd go and edit this AMO and you'd have a form. And to me what a web form is is just a UI on top of that API. It's just a way to give someone a visual of GUI to move around these fields and also to access a lot more information because sometimes it's hard to know all the properties available and form API. And I want to just give a quick demo of what the general workflow of the new web form module is doing. So I'm going to go to the contact form and show it to you. I want to make sure everyone can see this. So here's a basic contact form. And for this demo, I really like doing something really simple and say let's add a company field. So I'm going to click on text field. I'm going to add company. And something I'm going to emphasize as I go through the presentation, there's a lot of settings. You don't have to do, it ships with reasonable default. So all I did was title the field. I'm not going to change any of these. I am going to expand all as I scroll just to show you. You can change any aspect of an element. I'm going to hit save and add the element. I'm going to go view it. And I deliberately made a mistake here because I put the company field. But it really should say your company should be at the top, right under your name. It should be required. And I want to show you, yes, you can do this in the UI. You can drag it up. You can hit required, hit save, go hit edit. That's a couple of steps. So I'm going to talk about four or five steps. Or you can still get to the source mode of the YAML, which is this. And sorry to bend down, but you got to look at it. Bring it up. And you start to see the power behind being able to edit the source code behind the form. And now you can get the ability to cut and paste. And I hit save. And now I'm going to jump over to the test tab and you can see I've made the change. Scroll down. And what the test tab does is it auto populates the form with reasonable defaults that you have access to. There's a YAML configuration file that you can control what email address is or you're being used as your test data. If you have custom elements that need very specific test data, you can populate that. I'm going to hit send. And now the second part. We've done the form building aspect. This is the results. People are very familiar with this in Drupal 7. Some changes that have happened is I've merged the submissions and tables. So you get one table that you can actually customize the columns and select which columns you want visible on this view. We've also integrated flagging and storing. So you can add notes or you can flag a submission over here. And then this is the moment where I'm going to jump into a submission and probably not come back to this because I think it's pretty sensible to people. You look at your data. There's a table view. Something that we're seeing here is these are very small forms. Web forms and YAML forms can handle hundreds of elements. You can have a form with 100 fields on it and it can handle it. And that's kind of why this table view is here because if you have that size form, you're going to need a quick way to scroll through the data. There's also a plain text tab to just be able to kind of get a sense of what the data will look like if you're sending it through a plain text email or SMS. And there's, by the way, we're getting into developer features. There's a data tab to show you the raw data that's stored in the database. It just helps people make sense of what's going on, including that there's a UUID. There's a secure token. The language is being, you know, tracked and the remote email address. And then there's some other features where you can go in and resend the email notifications. You can delete it. I'm going to get to this a little later, but I'll just show you. There's some logging specific to submissions. This helps with very complex applications to know exactly what's going on as your data is moving around. When you get to more complex applications, I found this as a business requirement that I needed to know what was going on to each submission. I'm going to jump back to the presentation. And now we're going to back up and go into like what's new, what's missing. This is completely rewritten code base. It's object oriented. It's duplicated. It's written as an object oriented code base. Everything is broken down into services with dependencies, injections, and interfaces with a lot of plugins tied to that. And you've seen the editing in the source feature. It's really one of the unique features to this module and to the form builder space in general that you're able to go in and update a form with 100 fields on it. There are 70 plus web form elements available, and I'll demo those in a little while. There are hundreds of custom settings. I am not holding back on any setting. My concept is expose every setting that you possibly imagine, make it work in default, and Drupal's flexible enough if you have users that you don't want to show all those settings so you can write a formal to hook and start hiding them using pound access. There's also support for composites and multi values. Composites are basically like a field collection. If you're doing an address field you want three or four elements mixed together to create that address field. And multiple value support to help support things like multiple addresses or multiple URLs or multiple links. Similar to what Dries brought up in the presentation, it's really important that things work out of the box. So I'm including examples and templates. Examples just show you like kitchen sink of everything working, and templates are starting points. They're just like here's how you might want to do a donation form. And then there's customizable results which I did demo and there's a lot more documentation. You're going to see that as we move on. What's missing is kind of what people are working on. Views integration is happening. Someone's working on a web form views module that had an alpha release yesterday. It worked really well. The person who's maintaining is doing a great job and you should download that module, give him feedback. He's very responsive. Rules integration. I think this is... I've done some assessment of other modules. This is hurting a lot of modules in the community because rules allows incredible flexibility. There's certain points where modules can't implement certain types of conditional logic and rules can step in and make it possible for a site builder. Drag and drop WYSIWYG UI. It's just like people... There's a form builder module that hasn't been ported to Drupal A. The UI right now is more of a... We're working on the quick... Outside-in initiative to make it a little easier, but that's definitely... Sorry about that. And then conditionals was kind of redone to match up with cores, state's API to leverage how core is doing conditional logic, but there's a limitation there where it's all front-end client-side JavaScript with no back-end server-side validation and cross-page conditionals are missing. These are things that can be added in, but I wanted to start aligning more with core instead of doing stuff completely custom. Statistics and charts for me is completely out of the core web form module space. I think that should be handled in a separate contrib module. And there's third parties that just do it a lot better. So to do pie charts, personally, I would go in the Google docs direction of pushing your web form data into Google and having them handle it. They start to hint toward third-party integrations where the web form... It's a new copay, so people are just starting to port things over, so we need submodules to do... There is modules to do like MailChimp integration, but we actually see things like Salesforce integration. Payment, I think, is a big deal for small sites. If you're not doing a large commerce site, to have a simple way to collect an event registration payment is a very useful feature. And then D6 and D7 migration, there are dedicated modules that people are spinning up to do that. And I think a few people have had successful migrations, but there's not like a canonical, this is the migration module, and this is what I recommend using, but I think people... And then it really leads to more people involved, more contributors to back up to say the migration is going to happen with more people getting involved with it. So this is a quick list of cool stuff, because I can't get to all this. I just wanted to run through some of the new features that I am very proud of that people helped contribute, especially the... Like you can do anonymous drafts now, and with that we did automatic purging of drafts, so you don't have your database fill up with hundreds of drafts, but allow someone who's anonymous to come to your site and save it and just drop the session variable and then come back and start working on the form. With anonymous drafts, you can have those convert to authenticated drafts when someone logs in. It's very similar to how you go to a site with that as a shopping cart, and they say log in, and you log in, and the shopping cart follows through with you. It's really cool for very large application processes where at some point you want to just recommend someone to log in. Select boxes, radios, the options are now reusable. There's a dedicated API to get your Likert options, your states, your countries, and the module ships with examples of all those, but you can set up your own options. Built-in is you can do custom JavaScript and style sheet injection directly into your form. It just makes it a little more flexible, because I've ran into with forms, you need little nuances changed, so you need to adjust the margin of something. Even this addresses some conditional logic, where there's no way that states API or any API can handle certain conditional logic, and you can inject that JavaScript into your form. Also included is opening and closing of forms based on schedule dates. It's really helpful for event registration and application processes. Form and element access controls are just built in, so you have full ability to control who can access what forms, what elements, submissions, based on roles and user accounts. Sending email to assigned roles, it's just very useful for an application process. You can say I want to send emails to all reviewers. And then scheduling emails is just a really cool feature that I will get to a little more towards the end. Logging and submissions I showed you, third-party setting integration, and something I personally like, which is a silly, cool feature, is dismissible in-line messages, and you'll start to see that as I start demoing it. It's just a UX experience as you move through the module. So, who built the module? I think it's really important to thank QuickSets and the maintainers of Webform 7.x. QuickSets has been doing it since 2006. I still reflect back on his code, and I am amazed at some of the things he did with that module and how robust it is and some of just all the work that went into it. And it's important, I think, to emphasize, it still lives on. Drupal 7 support is moving into backdrop CMS, and Webforms is supported in backdrop. So, if you are on a 7 site, you might look at that option. And these numbers are just stunning. A half a million sites are using the Webform module, and 3.6 million downloads is astounding for a form builder in the stats. And to get into why I did it, I wanted to contribute something. I have this thing. I'm an obsessive person. I like to focus on one project. This is how my mind works. I enjoy working on long-term projects. I've worked on the Suncatering site for 15 years. It's just how my mind works. I like that focus and moving things forward. And I really felt Drupal 8 needs a form builder solution. I also felt that open source needs a form builder solution in the sense of how Drupal is so open and it's free. Here's a solution. You can do whatever you want with it. And in the open source form building community, there's not those very powerful, completely free open form building solutions out there. As I'm moving on, I'll say I'm going to get to WordPress and show some demos, not demos, but just talk about it. But to really talk about why you should use this module, because it's kind of the open source side of it. It's open source. It allows your website to collect data. That's my recommendation. That's what I come down to. And there's a use case here that is really applicable to this Drupal 7 version. It's where you build a form, copy a template. You publish this form. It's a page under block. You collect your submissions. You send confirmation notifications. You review the results online. You download them. And I boil it down to these three points, which is build, collect, and download. That's what the web form module is for. And what I did notice when I started researching the web form module for Drupal 7 and looking at the Drupal community, I saw this other use case, which I'm calling Distribute, where people are collecting this data, but more and more it's like the headless concept is sometimes this data just doesn't need to go into Drupal. Where you get the data in, you need to route it to your CRM. And to focus on this notion that you're distributing the data. To be honest, sending an email is distributing the data. I personally, most of the web forms I do in Drupal 7, I was turning off the saving of results and just sending emails. So what are the alternatives? I think with Drupal in any project, you should look at the alternatives and understand what's going on in them. And every product here is amazing in its own right and worth looking at. I use Google Forms every day. I think job forms is incredible, robust. And then the open-source space, WordPress has some amazing form building solutions. Ninja Forms is an amazing UX experience. They're kind of setting the baseline for what you could do in user experience on how you're managing your forms. And Form.io presented last year, their very robust solution. And they have, they're at DrupalCon, so their presentation is still available. And I do want to emphasize, in Core, there is a contact form module. You must enable it and look at it and see if it addresses your requirements. If it does, use it. If it doesn't, then look at the web form module and, you know, and maybe leverage that. Because Core is shipping with a solution to building forms. And it's going to keep growing. I'm addressing a much more specific use case and more robust use case. And there is a comparison that I can show you where we're starting to break down what one module is for and what are the features. And yeah, where do you get started with this? So I want to emphasize the web form module is a complete solution for building forms. It's something I'm striving for. You turn it on and you have an experience that works. You're like, boom, this addresses this, my requirements for this project. And then you can consider what specific, like, you can go out and get add-ons and features. But I'm not trying to hold back on any concept in the module. And it does start off with downloading the module, enabling it is broken up into some sub-modules. There's a Core module and the UI is a dedicated module. The examples is a dedicated module. And there's a lot of dependencies on external libraries which I'll get to and you have, it's strongly recommended that you install them. And then, yes, you can go out and get add-on functionality, which is basically contrib modules to do stuff like MailChimp integration, web form views. And there's also a lot of help available. There's documentation. I'm starting to work on a cookbook, which I'll show you in a second. I'm doing a lot of screencast because I think it makes a big difference. It makes people feel a lot more comfortable when they're learning some new system. And Drupal Answers has a good flow of questions and people are responding to them. And I'm very active in the issue queue. So you can definitely post your bugs and issues there. And the demo I want to just quickly show with this is just walking through, you know, I have the, I did, it's all installed, but you get this in line. This is a dismissible message. It helps get you started off where it shows you where the sub modules are. And for me, I have them all enabled. And there's also a link over to the add-ons where I am trying to keep a list of all the available modules that you might want to install with a web form module. And some of them are web form specific. Some are not. I like the client-side validation module. It's an amazing module, improving the UX of all forms across Drupal. And what I like about it is you turn it on, it works. It just does what it says it does. To back up, I'm also, I want to emphasize the third party libraries because this is one of the steps that people need to understand. I have a lot of requirements here. They are all optional now. You can turn off any of these libraries. There's an admin setting and if you actually uncheck a library, it will go out and take it out of your, it will not install it, it will not be part of it. But a lot of these libraries help with the user experience and add really nice nuance features to the web form module. And to get them installed, there's Drush commands available. You basically need to run, you know, like Drush libraries installed. There's also abilities to generate make files and composer files. I do not recommend manually going out and getting 12 libraries and having, you know, dragging, dropping them into your directory. And now with documentation, I kind of wanted to show you some of the video. I'm not going to show videos, I'm going to show you that when you install the module, these dismissible messages are meant to help you out. But once you close them, they go away. And there's, this video is basically the presentation we're doing now. But as you navigate through, I'm trying to set up a screencast to help you understand what templates are. And I'll gradually be reworking them as the module progresses. On Drupal.org, there's documentation. Some of the documentation in the module is repeated on Drupal.org. It just helps get people more familiar. For me, the two things I kind of want to show, and I'm actually going to skip, I'm just going to show you the cookbook because I think it also starts to get to show you my favorite recipe. How to programmatically alter destination email address. So why I love this recipe is there's some point where you can't write this conditional logic into the UI. This conditional logic someone is contributing back is basically taking the user submitted the current language of their, what language they speak, and routing the email address to a language-specific email address. It's a really simple example. It makes a lot of sense. And what's really cool about it is it shows you the full power of Drupal 8 in the sense of extending the email handler and the writing a few lines of code. And they've got this example if you bring it into your own, like you write your own MyCustomHandler, you can do any type of custom logic. You could even do custom formatting with your emails. It just shows you the flexibility that I'm after with the APIs. Moving on. So now we're getting to the meat of what can you do with the module? Well, it allows you to build any type of form. I'm really trying to do a no whole bar. You can build any form you could possibly imagine or have a requirement to build. And the way you get to that point is you have to learn from the examples templates and even the tests help out because every feature has a dedicated test. So if you're getting into some hard level APIs, it's worth looking at some of the tests. And the examples that I'm going to walk you through, you got to look at the elements in the composites. MulticolumnBlayouts are really an important thing to get familiar with. MultistepFormWizard, conditional logic. And I'm even introducing a concept of demo applications, which is basically getting, like, a set of forms working together to build a complex application process. So it's like an example, but it's a rich example, where it's more than just one form. And I'll show that to you and I think it'll make perfect sense. And I think the reusable templates help for a lot of organizations where site builders are coming in and you have people building the same form over and over again to have a template that they can copy can really help. So this is, I'm good on time and this is the longest demo we're going to have because there's a lot of examples. I'm in the templates section. I'm going to jump back over. So to start off, I definitely have a kitchen sink here. So this is actually automatically generated off of every element that's available. It shows you every element. I'm even including some of the enhancements in this example just to show you that. And you can start scrolling through and seeing what your capabilities are. You're starting to see basic elements. There is support for all multiple value elements. So you can add multiple text fields including HTML5. You get into variations of email. I actually have a common delimited email field because I needed that for the web form API. And now you're starting to get into some JavaScript elements where there's a rating element included, a signature element. I really like this. This is just a telephone field enhanced to support international phone numbers. What I feel from a user experience is it tells your users you get that they're international and it actually does amazing validation on these numbers. And then I'm kind of covering some other just elements that people are starting to use more and more toggle elements. And then with file uploads I did break them down and you have a global file upload element that you can use but you can do media type specific file uploads. It's specific for mobile because when you use these and you set a video media type, when someone's on a mobile device it opens up the video recorder. So for certain use cases it made perfect sense to have that feature. And what's great about Drupal is this isn't a lot of code to do all these elements because I have a base element that I'm just extending to support media types. And then we're getting into, this is actually included in CORE. jQuery UI has a buttons element and every single option element I'm trying to support other values so you can go in and add others and I even added these cute kittens which I'm going to, I did it not knowing if people are going to use it but I also was to challenge the API to start adding some metadata to select menus which I'm going to show right at the end of this and then every element, every form element in CORE I'm trying to expose. That's definitely one of my goals and then so you got all the data elements and then we get down to entity references and you can actually expose your entity references and track them and now Ted Bowman helped me work on this really cool feature so we have quick edit working and we have outside in working I'm not demoing an experimental module in a presentation so what would happen right now if I had outside in module which is experimental enabled this would be in a sidebar but this just gives you quick way to manage your elements on the front end sometimes it's nice just to be able to change the label I'm using it it's really helpful for the demo because the Q-Kitten so one of the reasons I'm showing it is what I really am happy about this element is what it is is it's a select menu so that image the Q-Kitten it's just a select menu that's enhanced with some JavaScript but in the API I'm able to add cement like basic I'm adding a source image to it and I also also was able to get IMCE to integrate and this is going to open a new tab it usually opens a dialogue so you can embed images and what I want to emphasize is this column opens up is this huge possibility where you can start doing quizzes and scoring because you can add metadata to your options and I haven't started building out these elements but it opens up these possibilities of building much richer applications moving on to composites composites are just like an address field a bunch of elements brought together right now it's all programmatic you have to it's very easy to write your own composites but I haven't built a UI for it it's actually a lot of I think it's more work right now than I have time for but you just start to get the patterns where you can do multiple addresses very useful for event registry I'm doing user profiles and I've experimented with some credit card fields and there is full Likert support so there's all the Likert options that you could you could imagine I even did some geolocation so this is picking up this is useful so you can actually hide this and have forms track where they're being submitted from I'm using geolocation what else yeah and then you can see there's an advanced telephone number what I want to demo here is just to show you the UI because it's very flexible so you can set default values sometimes I still use YAML because sometimes it's just easier than building out a whole UI for this and most people aren't going to do default values but you're able to control each element hide and show these composite elements so it gives you a lot you do even have some flexibility in here to even tweak how the state and provinces are working now this will speed up because these are smaller demos where I just set up examples of conditional logic so people need to understand how it's working they can go in and click on these elements and see how they're set up to do these different behaviors and these are very helpful sometimes if we run into bugs we can look at the examples and kind of duplicate them input mass another similar very simple is input mass support and I just wanted to show all the possible input mass that you could use now we're getting some interesting layouts up and there's two examples of layouts this is what's included in core so this is just how status messages are available and you can you can set whether they're dismissible to bring up you can say how that's stored so it could be for the entire site it could be for the user permanently it could be in their local session it could you have full control over how that's dismissing and then you can even this is by the way this is just what core does you can actually wrap elements and error messages if you need to I did add support for multi-column options and checkboxes and once again we're back into core here this is just core format guys supports adjusting where the title is displayed and you actually as a themeer can have control over that I did add tooltip support but once again this is core's jQuery UI tooltip module with three lines of code and you can go customize it and tables are even supported if you need really complex forms this is a custom table built that you're I'm embedding elements into and I did add support for multi-column layout using flexbox which is a completely supported technology so this is CSS3 IE9 which is now irrelevant is the only one that doesn't this doesn't work with it's completely responsive so as you resize it'll collapse which nice is its CSS is not a lot of code going on here so you can actually go in and customize it you could even probably override and put in your own grid framework if you needed to and finally I think everyone is very needs their wizards and this is an example of a wizard and you can go through and just look at and see how it's set up I did add some custom behaviors so when I back up you're going to start seeing some behavior that's saying you're about to lose your data and this is a setting this is not on by default you have to check it off moving on to templates templates are just these forms these elements being brought together in some sense to give you an example of just what you could do so there's an example of a donation template it's not working fully the payment system is not working there's a job application template and it's important to say the way the templates work is let's say I did the job application I hit select this is a copy so there's no reference to the original template so your users can go off and do whatever they want to this form now and what I also want to point out is I need help with the templates we can actually keep altering them and improving them and adding more logic or text or addressing different use cases is perfectly fine it won't affect people with existing installs finally with the demos this is the last little piece to it there's two demos I'm only I only have one enabled I did a demo of an application evaluation system and as I walk through with your search see there's a very simple application so much is filling in some information the demo installs and actually add some results what you're going to see is I click through and there's two forms to this demo there's an application and an evaluation and finally in the configuration there's a block that lays this application evaluation at the bottom of each application and allows you to build a system where you can put comments in and save it and you can have someone do reviews of different submissions and they can navigate through and I actually have submission limits turned on where they can only do one evaluation for submission it opens up a whole review process and this is just the beginning of what I'm seeing is the possibilities and moving on so I think you're starting to see what can you build with the module well you can it allows you to build applications and this is the list of what I've kind of come up with and some of these that I've started working on where you can do college application that to me is like the biggest challenge I want to see a you know 20 form college application being built in the web form out there and get it working I think job applications employee values and people are familiar with that event registration systems that's the other demo where you can set up events and have web forms attached to them and track that and you can you know other registrations I online donations I've seen a lot of for one office especially if you're integrating with the third party I use it for appointments because I do a lot of medical stuff and you can even have user profiles going like the example with user profiles if you have a massive user profile you don't want to put it into Drupal you want to feed it into a CRM you could use the web form module to do that and some people are starting to write handlers to take that very complex profile and still create a Drupal user account with a few few of the elements and you know I'm going to get more to that as I move on so to set up these demos it really comes out and how you publish these forms and web forms can be just fully integrated into your site there's a web form node module so you can actually take your so web forms are now completely they're reusable there you create your web form over here and then you can embed it throughout your site so the web form node module makes it easy for you to have your contact form and then embed it in different areas of your site and I'll sort it to you in a second and then you also can just do the traditional blocks and to backtrack one second what's good about the web form node module it's using a field there's a web form field and I have seen people starting to use it with paragraphs so you can actually just embed web forms anywhere that you have fields entities that take fields and I think by having that option and the block option what you can do is you can embed a web form and you can there's a web form block you can start use that for things like panels and get your web forms embedded in panels on your site and finally there is an API to really easily embed a web form it is literally pound type because web form web form ID and you enter it and you could add some default data and settings and in any render array that you're building you can add a form to your site so it kind of opens up anytime you need to get a form somewhere you can do it with the web form node module I'm going to show you do contact you do get these settings you can set open and close you can you can push some default submission there is full token integration so you get some interesting nuances like if you really want to get complex you can start altering the behavior of this form you can set up a field for the custom confirmation message or an event you can kind of pass the event date through to the web form that's attached this is going to keep evolving I'm hoping you know to make it as robust as possible but you can also schedule each form but for now I'm just going to hit save we're going to see the form and what this does is it enables a test and results set and quick edit is still working here but most of the time you're going to just want to test your form and I'm going to do a test submission because it also is going to just introduce you to a really important concept so I've done one submission on this node I'm only going to see one submission but I want to emphasize that I did a submission before at the other contact form and what this starts to show you is each node tracking its own submissions it's I call the source entity so I've created the dedicated this dedicated instance where this is collecting data for just this node works really well with event registrations because you could have an event registration form and have multiple events throughout your site and use the same registration form over and over again and we'll track that and to further emphasize that I'm going to do a block and what's cool about this is we're going to do the same block of this is contact I'm going to change anything and yes you can pass to full settings I'm going to bend it in the site and I'm going to start navigating some nodes and you can see it over here a little different node so up to four submissions I'm going to jump up to the main form and you're going to see sorry I actually just want to throw out I mean I jumped to there is a tracking of all results coming in so this page shows you every single submission coming through when I only want to show you the contact form because it's going to show you the four different submissions and what kind of just happened when I placed that block that contact block on site it became a feedback block because it's actually tracking where people are submitting the contact form from so it opens up this whole other possibility where you're tracking the feedback on the site you can give us feedback it's almost like a mini comment system is being created I don't recommend using web form for comments but once you start understanding this feature it kind of unlocks a whole bunch of an array of possibilities that you could do with it so moving on like it gets to now okay we're getting to like what can you do with these submissions the data that's coming through well the web form modifies an API to download and or handle submission confirmations and notifications to any system so to demo that well for demo so we're all familiar with the email the sending of emails it's called a a web form handler and this is just an extensible plugin that you can handle your submissions and you can route them to any system and the specific one that's come up is remote posting this data to other systems specifically I think CRMs is the big one where you might want to take a little piece of this form submission and push it into your CRM or push the whole thing and still the traditional method which I think is really important use cases being able to download all your submissions as a CSV just own YAML and more because that's also a plugin there's an exporter plugin so you can do whatever you really want with it I'm going to show it to you and so we're on the results tab I'm going to jump up to show you the handler first before we look at the results so we're still on the contact form this is I have a confirmation notification I'm just going to show you the form it's pretty easy to use but it does include every possible setting you would need for email so it's bcccc you can set up there even is the more complex stuff of reply to return path this is starting by the way to hint at some of the conditional logic that's supported by emails because by being able to send emails at different states it opens up some interesting possibilities where if someone saves a draft you might want an HR person to know that they saved the draft or if someone logs in and converts or it just it opens one of the use cases was for the update process in the application evaluation system they get the submission in and they want to they mark it as needs review and that's an update and then they have a conditional logic to say well it needs review send an email to all reviewers to get the review process done so this is just an easy way to kind of route decide when the email should be sent and there is a debug handler that'll show you when emails are being sent and track it what I want to demo is the remote post handler I'm going to use my broken CRM link here because I think that's a good starting point and this does support posting to different URLs for insert, update, and delete you can control the submission data by default I'm only sending the submission data and not the metadata it felt like a more sensible default basically what they submitted and you can add custom data now what this starts to hint at is you can add API keys to this request I also want to emphasize this is a plugin that can be extended so if you have OAuth authentication so I'm hoping someone will write an OAuth remote post plugin and get some sort of generic integration working moving on I hit test and this is going to be broken but what I like about did not turn on the debug it's broken and that's why by the way I recommend anyone writing handlers to include debug options because what it does is if you do it right you have to debug things and see what's going on and the post failed but it's telling us exactly what happened shows you the data which I think is cool to see how simple the data is going in and out a little technical note I'm not using the tree property on forms it's very flat you have to enter a unique key for every single element it's a pain in the neck when you're building forms but when you start doing API integration you know exactly what the names of your elements are and it's just showing you the data and how it's broken moving on to the more traditional aspect of it is if we go to the results Sam download is basically what people are familiar with I do not have full Excel support working because I have an ambitious hope that I will get all related like real Excel support where all the relationships will be included in your spreadsheet you have multiple sheets so it'll break it'll really include all the data that you're collecting but for now there's this HTML table support which you can check off and it will open in Excel and if I uncheck this little option you'll see it'll open this table in Excel and show you all the data that's coming in and you have control over how the columns are set up what values the formatting of each value so moving on so this is starting to hit the remote post starts in you can front end any back end this is something I've been pushing for you can actually have a web form never hit Drupal this is a kind of a new concept but it's like use Drupal to build a form but if you if you have a form that needs to collect a million submissions don't have Drupal bootstrapping and loading so you can actually go in and change the action property of a form and route this data to a totally different server now you do have to set the server to do some validation but it opens up a whole other possibly where Drupal is you're just building a form you can have it go to a very powerful no JS back end and it's this just starts to lead into like what can you customize with the web form module well I want to emphasize it ships with reasonable fault something I'm almost passionate about like things should work and not you don't have to hate fussing with things I hate fussing with my laptop I want to just work and then if I need to fix something or tweak something it's easy to do and so every single message is customizable every single setting is customizable I'm going to show you some stuff and like someone put an issue in my queue and I'm going to even bring it up because go to the form and edit it it does start to get a little overwhelming so there's two features here where you can expand all in collapsible details and actually remembers the state of these detail elements I'm going to expand all and talk and walk through some of these but you start to see you can disable you can't disable results once it's been saved but you can disable results for new forms you set up custom URLs paths you get into the opening closing every message is customizable and there is a default global message that you can customize for all your forms and it will propagate through for like every setting supports that feature when you get to something like a submit button or anything that could have attributes you have full control over what's going on which includes the label CSS classes CSS styles and even injecting custom properties into the into each element what the benefit here is you could do some interesting stuff with like tagging adding data attributes if you're starting to do heavy analytics it opens up that possibility and then you have I'm trying to do every behavior that I could possibly think of I like the auto focus if you have a form that someone's submitting millions of times focusing them on the first element with the form loads saves them a click and you can do pre-populating and then I'm doing some nuances with back button just preventing duplicate submissions it's just a JavaScript so if someone can't click submit twice you're seeing this pattern this pattern this is actually a dedicated element that just lets you set attributes on any element that you can imagine so every time you see a button you're going to see this option and we have the full support for vision progress bar preview when turn on someone just filed a ticket because I missed something where you can't when you do a preview it says the button says preview and the title says preview and they're asking what can't you customize that and I think the answer is yes you should be able to say well review your application instead of preview or whatever you might want and change it to so that's going to be a setting that'll be added in and you do have control of the preview message drafts this is that feature with the anonymous and authenticated drafts and it does this is so I've exposed this in line message to everyone to build their forms I use this stuff actively in my API and within the web form model this is just an in line message with conditional logic wrapped around it to kind of recommend turn on automatic drafts the automatic purging moving on submission behaviors you know confidential submissions the converting anonymous submissions to authenticated that's a setting you have to turn on it's hard to make those decisions and it's important to say the web form model is in beta so some of these can change if we really feel that that should be a default I didn't do it because people are familiar in Drupal 7 you're not doing that so I didn't want to surprise people submission limits they're full support for submission limits there are going to be some more improvements because there is total submission limits user submission limits and entity specific submission limits so if you have a web form node you could say I only want 10 submissions to go you can't control it per node but I would like to get that working at some point confirmations whatever you want with confirmation I could include every option I could possibly dream of down to inline messages and redirects you can set up ownership to these forms even though they're config entities it makes a big difference because then you can have someone own the form and set up access controls and this is actually the remote post not the remote post but this idea that you could decouple the form completely because you could set post to a custom server and set it to a Node.js server and the data will be posted someone actually use this the get method to take a web form and make it they had a very complex exposed view filter where they had hundreds of like dozens of options and they needed a block that just called out two or three so they built a web form that just submits to the view and so I actually did a screencast on it because it's a really cool implementation and just showed a very simple way to organize your forms how am I on time I'm going to keep going so how do you extend the module I'm not going to get into code but I think a what's what is really important to say okay so web forms are config entities they are exportable it's important to know that when you're building a site if you're doing bulk config imports and exports you're going to have to work on there's recommendations on how to handle config that you don't want overwritten during an import process submissions are content entities they're completely content entities I mean they're automatically exposed to views and what the the web form views module is just exposing the data that's a little the data's cost is stored in a custom table is exposing that to views but it also opens up rules will start working with submissions once that's that's happening and the stuff you're seeing with elements handlers and experts they're all plugins they're all extendable they're well documented and you can do that's what I feel like most developers can be working on and everything that's you see coming out of this module is running through the theme system there's you can almost you can alter almost everything between pre-process functions and form alters you can probably tweak anything you want with a form and I I want to emphasize I almost I had slides to show tasks but there are a lot of tasks if you're a developer and you turn on that test module you're going to see 120 forms that isolate each individual nuance feature and shows how it works and for me it helps debug things really quickly with someone follows an issue I can just go look at a working example of something broke something and figure out what's going on so what's next I've brought up use integration or rules integration they're really really important things conditionals I strongly believe that server side validation is going to be really important I wonder whether it should be in core as well like the state's API needs to be rethought a little bit so that core supports it because it's kind of an issue when anyone's using state's API they're not getting a server side validation cross page conditional logic that's going to have to go into the module so that when you're on one page and someone submits a value you get to the next page you might want to hide or require certain fields I think someone's put a module together to do that templates I just feel templates help grow the community help people out when they're getting started so I feel like that's going to be an endless task third party integration is really going to it's a key to the Drupal ecosystem when you do these modules is the more people can contribute these integrations the more people get involved more flexible I mean I think Google Sheets personally I love Google Sheets and I need an integration I haven't gotten around to even researching it with the user experience in UX there's definitely a lot of cool stuff and I'm now following along with outside and that's hands down my decision especially because I work with Ted on doing some the system trade is now working in the web for module if you turn it on it works the user experience is really clean and I think core is going to have really nice user experience improvements that the web for module just start leveraging over and over again and finally this is big this is my big challenge for myself and I've been working all year to get some level of field API integration there's a ticket on Drupal.org and it's hard to the web for module has its own separate way to store data because it's storing lots of data the technical it's storing an entity attribute value table it's a very flat simple table so it allows it to hold a lot of data but sometimes you want to get data into your entities in your fields and there's got to be some I'm hoping there's some bridge some way where you submit a form and some of the data will go into an entity you will create an entity it might update a user account and I've done little nuanced features to get how to put things in line where field API integration can happen but this is an incredible amount of work I didn't even think I'd get close to being able to say I could do it so it really started to come to like how can we help the web for module succeed well it's open source it's free we need to help it grow people need to start contributing it comes back to the slide I mean every every presentation is going to have this slide because this is how Drupal work people have to contribute to the community to make it happen sorry I lost track of something because I added some slides recently it's I'm going to argue that people should sponsor a feature and I'm going to start talking about it in a second it's just a concept but it comes down to like how can an individual maintain an important Drupal project which is free I think this is important that I feel in the contrib space people have to take some ownership of certain modules and push them forward and say I own this I'm going to do it because it it helps push people forward someone needs to have that literally needs to get behind it and push it forward and becomes a huge amount of work and it's overwhelmed a lot of people I think it overwhelmed the people in the Drupal 7 web form space because it was like an impossible task and I'm kind of coming up with this concept that we need to figure out how to support modules and this is I dabbled with well you could have a donation form I got rid of that I'm not asking for donations I'm asking for people to work with me to build this module and do it in a very transparent way publicly I walk through these steps because it's like publicly on Drupal.org if someone has a feature and you need something let's do it on Drupal.org write the issue describe the problem define the solution I highlighted these two things because these are the two challenges here estimate the amount of work because the Drupal community is petrified of doing this publicly in the Drupal issue queue because we're still in the it's ready when it's ready or you just like you don't want to commit to anything but I think it's hurting people because they don't know what's really going on I mean people file issues and I would like to be able to say this is an incredible amount of work I would like to put story points at 100 for field API so they get it instead of when they start commenting oh when are you going to have this ready but once we start getting an estimate to the amount of work you can work with people in the community I'm looking for people to work with me to get an agreement together just and the agreement is incredibly simple I've done it I'm going to show you who I did it with agreement to work for hire with an open source clause attached to it it's not going to be that hard to figure this out and once we get this agreement done we just build the feature we share the feature with the community and then we maintain it like part of what I'm looking for is maintaining these features I have no problem with it build it maintain it and then repeat this process I think this is important the Drupal community needs to figure out how to support the contrib space support modules and I work with Kensha estate and these are the four tickets they sponsored and the process was these four tickets were my project proposal period we sat down on Drupal.org wrote these tickets out documented them and one funny thing about for me what I personally love about this potential in this process is you could work with me we could write the ticket and we could not do the project and I won't be upset at all because we did work that's public reusable other people might come in and use it and personally I hate those RFPs that I spend you know five hours writing that go into the garbage because we couldn't agree on you know of redoing the work and so they sponsored these features and these are huge features I mean the scheduled email handler is an amazingly cool feature because it opens up two possibilities you can remind people of a draft you can remind people you can have reminders sent out before an event ran out of my water so moving on I help you with the web format well I can help you training support contribute sponsor features really what I'm talking about I am open to doing any jupylaid project and you can kind of catch me jrockwoods.com jupy.org jrockwoods Ralph my dog says thanks and there is a box tomorrow thank you so there's eight minutes left I feel fortunate that it's before lunch so questions are welcome there is a mic I'm going to let people whoever goes to the mic I'm going to do it if I people yeah so they're recorded I think that's very important all right so I have two questions first of all do you ever sleep and second of all what is the migration path for content out of four forms and data coming from D7 into D8 I work from interesting sleeping patterns I don't I mean by the way I put a lot of energy this and like I had devout of my wife I'm coming home and changing things like I'm going to it's not slowing down but figuring out the right patterns and balance but I really for this conference I've tried my best to get as much done as possible and I'm trying I'm really trying to be 100% in and not hold anything back but I'm reaching that point where it's not possible to be honest so with and with the migration path someone's going to have to write a migration path like a deep like a traditional Drupal migration path I think that's one approach for me I'm not I mean the other one that might need to happen is someone writes a csv import and export so you could get your data out of seven and import that way because also with forms I did a micro I did a custom migration on web forms to YAML forms I need to emphasize this is a render array so if you have a form that's not even in web forms and you need to migrate it into web forms you can actually serialize that render array into YAML and you've got a form and it works like it works out of the box like the wiring so I think there's a lot of possibilities I feel like there's a lot of projects out there that someone's going to do the migration it's inevitable one problem is there's a lot of new features so that's going to there's not too much missing which is a good thing to say so I hope that answers it hi first it's very impressive you know the web form model it's amazing I have a feature request I can probably post it it's including a hierarchical silhouette of one of your fields a what hierarchical silhouette like I use like like a country cities that kind of oh wait wait like one of the fields yes hierarchical silhouette sorry about my accent the second question I have is about submissions like a workflow process for submissions so that's something we need a lot like after a user submits the form it has to go through a moderation process yeah so we need to implement that somehow so I don't know if you have plans for workflow integration well it's important like I don't want to totally conflict with the web form model is a form builder and then like Core's got its own workflow initiative and there might in certain use cases you should leverage that workflow initiative completely especially I mean I don't see ever getting revision tracking into the web form model it's just like overkill that but to address it like the um Kenjo estate they're definitely doing that um there's a conditional handler like I'll just show it to you the quickest demo is why I have these templates by the way is I can say feedback select I've just copied the feedback template which is just showing you example and then if I go in here and I hit notification this is driving like basically routing emails to a specific email address and what someone what they're doing in this application process is they've set up a workflow field in the web form module that has access controls on it so the person submitting the form never sees the field but the administrator who comes in and starts to review process starts tweaking that field and changing the value and starts routing emails to different users and they get to evaluate different fields so this user comes in who's a reviewer they get a field that says do you like this person they review the person so you are able to build some custom workflows to it and I also wanted to throw out there that's kind of why there's other integrations are possible because sometimes you just put it in your CRM I mean I just got to be honest like some data should just go into a fully robust system with tracking Hi I I wonder if you could talk a little bit more about customizing the thank you pages based on what's in the form results well okay you're getting into some juicy ones this full token support so that's really helpful in many many ways because you can pass tokens so you could have custom fields on your form you can pass the data through everything is supporting tokens I mean just to kind of address the question so we're just showing it is well let's look at it by the way this page will keep getting improved but that's why there's this collapse at the top because it's the only way I can get to things one of the challenges is saying I'm going to include every setting so yeah you have the full HTML you can inject yeah you can inject tokens into here and it's a dedicated template the confirmation page so you can override that and get into any type of value you want in there it's like it's called web form dash confirmation okay thank you no problem hi for post submission processing like sending the form data on to a CRM like Salesforce is there a way to map each field to a field name that the the place you're sending it is expecting yes but it's not built in it's um there's a mapping element so I'm doing a lot of API so so what you just saw with that confirmation that email where I was showing how you're doing the routing there's a dedicated mapping element I haven't there's you'd have to implement the custom mapping yourself you'd have to write a plugin that implements this mapping element and the truth is the mapping element there's if you get into the test and start navigating around and looking for mapping there's actually experimental mapping elements do field API integration so it's the idea that you're looking at the form and you can see all the elements and then it maps to whatever entity and you want to route to but the prob the challenge is writing the logic and it's also making sure it works like getting the date to go in the right field and make sure it doesn't break things so thank you hi this looks absolutely amazing I am super impressed my question is what post submission is there the ability to either after you've gone off and hit your external CRM or whatever or taking the results the submission and doing some sort of calculation and then storing whatever is returned back on the submission there's a ticket for that and I haven't totally wrapped my head around it I mean that's why the logging's there to kind of do some tracking the challenge is how do you store that I haven't really figured out wrap my head around how you store that data where you're storing that data securely storing it's going to happen at some point because I see that requirement coming in I mean I also saw in some other form build today at this concept that you would do your remote post and the remote post would return the confirmation page like literally give you the HTML markup for the confirmation page and I I thought that was a great solution the technical work around for this is to use a session so you extend the handler and then you just take whatever results come in and you write it into a session variable and then when you get to the confirmation page you're showing that data thanks for all your hard work really and I think if you look at your module it's just it shows so much thoughtfulness and care and I think someday it'd be great to hear from you about the tenets of good module development because I think it's instructor for the rest of us out here who build modules you know on just sort of things to think about when you're approaching building a module so that would be really great to hear from you on another question on the part where you can stick a form on there and it it automatically sort of gets an an entity reference source entity when I came over it's it's not an entity reference right so it's a little tough to get to the entity data via views and I know that's is that the views the web form views modules issue or it's a web form views module issue the it's also important for technically like I'm following all these patterns in course the exact pattern of the source entity is almost direct from comments because it's it's very tricky one of the challenges is this source entity could be anything it's very hard to do a very direct entity right it could be any entity on your site so it's very hard to kind of track all you can do is track the any type in any ID bring them together and create a value the web form views modules should be able to address it I have a feeling they'll look at the they'll look at the comment module and figure out how they're addressing it in common the comment system okay thank you hello Jacob so this is more a testimonial than a question we've I actually highly recommend this web form our company's been using it for a little over three months now we just sent like around 30,000 users overnight and everything's been working well so thank you so much thank you and it's we have like the CRM base so we're not storing the data in Drupal and it's working perfectly yeah I'll echo what a few other people have said is just I'm gonna have to go sit in a dark room for about an hour to be able to digest everything you went over in this it's stunning I mean simply stunning what beyond the web form what I'm gonna take away from this was what you talked about with the issue queue and with was it Kenesaw State where you did your RFP by putting I'm not sure how to broadcast that to the community as a whole but that seems like a really powerful thought that would benefit the community in a huge way if you were able to I mean now putting more stuff on you but to share that and abroad because that's that is a really powerful and different idea than I've seen come around Drupal before so I'm not I am not a great blog poster writer and I'm not gonna go evangelize it what I'm I think people are seeing a pattern in the module where I'm just doing things I'm just gonna try it and my one of my missions here is there's a few people who companies that remain unnamed that I need to corner and just get them to do it because the key concept is we just gotta do it people have to change their methodology when they plan a project to be like X amount of dollars we're gonna contribute to the community in this fashion I mean there is map was one of those approaches I I think the problem was it didn't roll it didn't keep going it didn't figure out a sustainable system and I'm hoping this can I mean I'm banking on it and also one personal note was back the fact that Drupal has backwards compatibility makes it significantly more worth my while to make this effort because I know this could have five years longevity and five years from now I'm not gonna be expected to put a year into rewriting a whole code base thanks I should know this room that needs to set up that's all more Q and A in the hallway all right thank you yeah it's no problem I'm here for questions there's not we're having problems with scalability Yeah