 Well, welcome everybody to Webform 4.0, Surveys in Drupal Improved. This session is going to be all about the Webform module, which I think probably most of you guys are already familiar with. It's sort of one of the oldest, longest-running Drupal modules in existence that continues to kind of upgrade and be relevant in each new version of Drupal. And the new version, Webform 4, is an iteration on the current version of Webform that I think will provide a whole bunch of new functionality and APIs that everybody will find useful and powerful. A little bit about myself. My name is Nate Haug. I'm QuickSketch on Drupal.org and on Twitter. And I work for the company Lollabot, doing development and consulting for them. And recently, I also started a company based around the Webform module called Webform.com. And it's basically a hosted service. So if you like the Webform module and you have non-Drupal sites that you would like to use Webform on, you can use the Webform.com service to empower your site with all of the functionality Webform as a service. And it makes it so that you can export it and then move it to a Drupal site at a later point in time. So you can export not only your data, but actually all of the code that powers Webform.com into your own Drupal sites. And I think that if you really want to have a nice demo of Webform 4.0, you can just go and try it out there because we're kind of running the cutting-edge version of just about everything that I'm going to be showing you guys today on that website. So Webform 4, or Webform just in general, is generally widely considered to be like the de facto standard in making surveys in Drupal. We're on the cusp of a 4.0 version. It's usable right now, where I made a Drupalcon honorary release just yesterday that is the beta 1 release. The final version of Webform 4 will probably be released before the end of the year, targeting for November. A big thing about Webform that separates it from something like Field Module is that it's really intended for your end users to be utilizing and creating forms. So like your editorial team, the same people that are creating articles and blog posts, if they also need to be empowered to build surveys, then Webform is an excellent choice for that task. And because it's designed for end users, it's much more direct and less complicated than Field Module. Field Module, when you're constructing all of your content types and fields, you're really designing your database schema. Webform, on the other hand, dumbs it down a whole lot, where it's more about creating a form than it is about creating a database schema. And there are some downsides to that, but also some upsides that Webform allows you to have hundreds or thousands or even hundreds of thousands of forms on a single site. You can have as many Webforms as you want, as opposed to content types, where after you create like 20 or 30 of them, it starts getting to have a performance drag on your site. And sort of as an implication of that, because Webform is not based on fields or entities, that also means that generally whenever you encounter a module that provides like a date field or a time field or something like that, that it won't work right out of the box with Webform. So Webform usually there's a companion module that's like the webform underscore whatever module, like postal code for example, like there's usually Webform equivalent for pretty much any field out there. But if you have one module for fields, you'll probably need to have another one for Webform, because they're basically separate systems. And the difference between Webform and fields is that fields generally, when your editors are creating content, they're creating content by like a few people are creating content that is made to be digested by a large number of people. And Webform is sort of the other way around, where you've got a huge number of end users who are on the front end of your site, maybe even anonymous users. And those are the users that are actually going to be filling out the form. And when they fill out the form, they're going to be sending these over to the editorial team or the administrative team. And the administrative team is really going to be the people that are looking at all of those submissions. So end users are filling out the form hundreds or thousands of times. And it's only being reviewed by like a smaller subset. So it's like the reverse basically of what you normally think of for fields. Which of course fields can be used in this way too. And Webform can be used in the opposite way also. But generally this is the way that these things are meant to be used. Fields are generally for admins filling out forms. Webforms are for end users filling out forms. There's an exception to this editorial team looking at submissions only. And that's a user who creates submissions. They always or can have the ability to edit their own submissions after they've filled it out. So if you've got some kind of system where you want a user to be able to come back and edit their previous submissions or view them, they have the ability to do that. But generally end users don't see the submissions of other end users. They're kind of isolated from each other. So the Webform interface generally is really pretty simple. When you enable the Webform module, you'll get a new Webform content type. That when you create a new Webform node, Webforms are nodes, all of the Webform pieces of content will end up with two extra tabs on them. One for Webform and then one for results. And when you look into the Webform tab, you'll get a series of sub tabs here. The main one is the Form Components page, where you'll actually be listing out all of the individual components that are in a particular form. And Webform 3, actually some later versions of Webform 3 add this functionality, but I'll reiterate it here because it's in all versions of Webform 4 also. When you add those new components, we've got a couple of new HTML5 friendly components now. So right out of the box, you don't need to install any other modules that have Webform be HTML5 compatible. We've got support for all kinds of HTML5 things. So normally, like if you have a normal text field, you get a normal keyboard. I guess Dries mentioned this in the keynote this morning too. But if you have an email field, then you get a different keyboard that just matches the type of data that's going to be input. So a plain text field, you get like a normal text keyboard. And when you have an email field, you get like this keyboard whenever you're on a mobile device. It also provides some nice in-line validation. So if you type in an email, your browser generally will validate that email directly for you. In addition to like an email field, we also have an HTML5 number field, which again gives you a special keyboard for individual number components. So back on the components page, and now we're moving through these tabs basically one at a time. If we go from the form components where you're generally going to be adding and modifying your forms, take a look at the conditionals tab. And this is a brand new feature in Webform 4 that I think a ton of people are really going to love. And that's conditional support, like really advanced conditional support, multiple conditions affecting multiple fields. And it works on single page forms. So you can say like if a department is something and we're going to actually do this in the hands-on demo, if a department is something, then hide or show a field set or a field on the same page. Or if you have a multiple page form, then you can hide the field on the next form or you could skip the entire page. Webform 3 had some conditional support, but it was severely limited. You could only do one action ever, and it would only work across multiple pages. In Webform 4, we now have same page support and multiple options. It's a lot better, and the interfaces is really great. And we'll go through that when we do the hands-on. So keeping moving through the tabs, the most common thing people do with Webforms is when a user fills out the form, usually the administrator wants to get an email. So Webform is a really good replacement for contact module. If you want to have a much more elaborate contact form that just has one or two more fields, or if you want to have multiple contact forms for different things, like a job application form versus the normal contact form, then you can set up a Webform for each of those and have them behave differently. So when you set up an individual email in Webform, you get to choose whether or not you want to email that to a specific hard-coded email address, or you can send it to the value of a component. So this is useful, and we'll do this during the hands-on, like if you want to send one email to the administrator of the website. But then you had the user type in their email address when they started filling out the form. It's really common that you want to send a receipt back to the user saying, you know, thank you for filling out the form. We received your submission. Here's a copy of it. And do that sort of thing. So you can make it so that you can send an email to any value of another component on the Webform. So we have two types of components that you can send email to, like the email component, if you want to send the user a receipt. Or if you have a select list, this is new functionality in Webform 4. Also, if you have a select list now, you used to have to do this really weird thing where you would have to use a key, the email address, you would have to use as the key and then the value of the select list you would have to use as the label, which is a really terrible thing on a lot of levels. Now, in Webform 4, when you select a radio buttons or a select list as the destination for an email, it does this nice thing where it automatically gives you a whole bunch of fields that match the options in the select list. And you can choose, like, when this option is selected, send emails to these people. And you can comma separate them so you can send, like, if the user selects some particular category, send it to multiple email addresses at the same time. Also new, if you were to scroll down further when configuring an email address, and we're going to go through this at the end, we also now have finally, finally real Drupal 7 style tokens. So all of the normal token ability you now have in Webform, Webform uses it for everything, and it provides some of its own tokens to make it so that you can pull out the submitted values that the user filled out in the form and include that in, like, the email templates, the confirmation messages, the redirect URLs, anywhere where there's any text field and Drupal default values, you can populate those values with tokens now, which is much more powerful than the old Webform 3 style tokens. So the form settings page, not a whole lot has changed on this page from Webform 3. You still have all of the mishmash settings that you could possibly want to customize the functionality of your form. We still have the ability to do things like save as draft or save it automatically in between pages, options for limiting access control, limiting the number of submissions per hour or the number of submissions per user. We did add the ability to limit the total number of submissions also, which we didn't have previously, so more limiting options than there were in the past. And a neat thing that was added just very recently is we finally added real built-in support for progress bars. So if you have a multiple page form that has, like, say, four or five pages, you usually want to indicate to the user how far along in the process of filling out a form they are. And there's now just simply an option here for enabling a progress bar and a couple of options to customize how that progress bar actually appears. So by default, if you turn it on and you've got a couple of page breaks, then it will end up looking something like this, where this is an example with four pages, and you can decide whether or not you want the confirmation page to be included in that progress bar or not. So it makes it so that when you get to the last page, you know, the last item in the progress bar is then highlighted. If you were doing, like, a confirmation message, there's just a message rather than the confirmation page. You'd want to turn that off. So there'd only be three steps in here because the fourth step would just be a message saying thanks for filling out the form in another place on the site. So that's it for the main Webform tabs, not a whole lot changing in there. The Webform results tab is very similar. Not a whole lot has changed here either. The submissions listing, currently we're working towards replacing all of the listings in all of Webform with views. So Webform 4 depends on views and C-tools now, and we have full view support in Webform 4, which is really great. We can access all of the data, and we can access all of the submissions directly in views now. We're just not using it built in with the module yet, like out of the box. But we're planning on converting all of the listings in all of Drupal to use views pretty much everywhere. So every view you have in all of Webform, you'll be able to override and change. Like, I know a lot of people don't care about, like, the IP address or the username when it comes to looking at submissions. So you'd be able to customize that and drop those out of these listings. You can do that today. It's just not built out of the box yet. The Analysis tab got an overhaul recently where the Analysis tab used to show you all of the information about all of the components all at the same time. But after thinking about it, we found that the Analysis tab really shouldn't be giving you analysis by default on things like text fields and text areas and email addresses, just because there isn't a whole lot of useful statistics that you can pull out of like an email address. Like, whether or not the user filled it out is about the length of the string. Like, that's about all that you can do as far as analysis goes. You can still enable that functionality, but by default, we now only generate analysis on the select lists and grid components because those are ones that, you know, there's a finite number of choices and so you can generate some useful numbers on, like, you want to see, like, how many people selected a particular choice. So, with this redesign, we segmented out the useful data, like the analytic data from the peripheral data. Like, we used to combine it all together like if you had select or other module enabled. You can make it so that a user can select, like, a finite number of choices and then select the last one, which is the other checkbox. And then they would type in something that was other than the options that were given. And previously, we just jammed all that data together, which made it really hard to actually provide some, like, useful data on it. But now we separate that information out, the primary analytics and basically all the peripheral data. And it makes it so that we can now finally chart this information. So there's two modules, actually, that came out just really recently, terribly named, Webform Chart and Webform Charts. So one's plural, one's singular. I'm sorry, I hate it when that happens. But they both do a really excellent job of charting data in Webform due to this new ability. So this is when you enable Webform Charts module, the exact same page, the analytics page, now includes charts on every single one of those analytics. So you can take that same data and then chart it out, and then you have a really nice visualization of all of the results that are on those pages. Another cool thing about these charts that we're going to do on the hands-on is that you can use them by tokens, which means that you can use these charts in other places. Like anywhere you have access to tokens, you can then pull out charts and basically make reports, if you will, anywhere you want, as long as you can access that node through a token. Like you have a node reference field, point to a Webform, pull out some charts out of it. It's pretty cool. The table page generally just lists everything, all of your submissions that you've gotten all at once. Not much has changed here either. This is basically the just show me everything page. Again, likely to be replaced with views, but not quite there yet. We've also got some subtler changes here on the download page. The download page is where you can take all of the information, all of the submissions that you've received, and then export them down to Excel or a CSV or a TSV, so that you can process them in your favorite spreadsheet application. But now we've got a real nice change that the Excel files that you download, previously we were totally cheating. I don't think most people noticed, but when you downloaded an Excel file previously, it really wasn't an Excel file. It was a tab-separated value file that just had the extension changed from TSV to XLS, and then Excel would open it and pretend it was an Excel file, which was a glorious hack and worked for a lot of years, but it added some weird, funny problems with UTF-8 encoding. It would be strange from time to time. You would lose new lines or it would break the importer depending on which version of Excel you used. All kinds of weird problems, time zone problems. And now we ship out of the box with a built-in native Excel exporter. So now when you download an Excel file, it's a real XLS-X file, which means all of those problems all go away, which is a huge boon. So, oh, yeah. And we also have some other new abilities. So this is when you do the export. It now uses batch API, so it doesn't matter how small or big your Excel file is. It now can do hundreds of thousands of rows. And so this is an export that used batch API and then export to Excel. And not a lot of people know this, but Webform also has plug-able exporters. So you can turn on different exporters too. And what this is demonstrating is there's a module called Webform Google Exporter that allows you to set up an API key with Google Drive. And then you can export, does the same thing, uses batch API, generates an Excel file, but then it sends it over to Google Drive. And so here this is using OAuth, choosing which account to sign in with. And then now it's on Google Docs, which is pretty cool. So no need to download the file and then upload it again. If you prefer to use Google Docs or have a company that uses Google Docs all the time, you can just export directly now right from Webform, right into Google Docs, which is really cool. And again, a benefit of using that Excel native exporter because Google reads in those XLSX files and then, yeah, you've got a perfect import every time. It's great. So some other new features. We have mentioned this built-in views integration for both submissions and data now. So you can make a listing of pretty much of anything you possibly could want. We now have a built-in Drush exporter. So if you guys any Drush fans in the room, there's now a new Drush command, Drush WFX for Webform Export, and it has all of the options that you can get from the normal exporting page, and it also uses batch API so you can export anything you want to with Drush. I'm not really sure what the use case is for this, but it keeps coming up that people want to do some weird thing where they want to generate an Excel file, like on a nightly basis, and then email it to somebody, and now that's possible because you can just simply set up a cron job or something like that on your server. Run Drush Webform Export and then mail the result, and you can get those nightly updates of Excel files for whatever purpose. I imagine it's for some kind of continuous integration thing or something like that. Now totally possible. Improved conditional email sending options, that's the thing I mentioned earlier, where now when you use the select list, you have much better options for choosing where those emails go to. Tidier integration with Form Builder Module. So Form Builder Module is not required, but it can really make a huge difference to your end users. Webform and Form Builder work really well together. Form Builder basically is a drag-and-drop interface for constructing your forms that can really speed up the process of creating a form, and we're going to do that in the demo too. We enabled cookie-only tracking, finally. There's a common complaint with Webform 3 that if you restricted users to, say, only fill out one submission ever, if you had two people that would use the same computer, like logged in, logged out, or a bunch of people behind a firewall or a router, they would all be considered the same person, basically. And now you can disable that IP checking and use a more lenient cookie-based checking so that you don't end up with users not being able to fill out the form. In addition to HTML5 elements, we've added HTML5 placeholders, so the placeholder text that will fill in a particular field until a user clicks in it. And we added customizable CSS classes, so just like views and panels, how you can specify individual classes that you want for all of your fields. There's now built-in UI options for that. And we also did a job real recently. We stopped using any designers that are in the room that might appreciate this or front-end devs. We stopped using IDs everywhere that was possible and switched them all to using classes. So now, if you've got the same web form on the page for more than one time for some reason, you don't end up with all of the IDs changing on you and all of your CSS breaking. So just it's the small things. All right, so now I'm going to go through a couple of web form tricks, basically. There are some fun things you can do with web form that not everybody is aware of. So I always like going through these tricks. So web forms are nodes. That's an ingrained part of how web form works. But because they're nodes, that means you can do all of these other things that you can do with nodes. You can use node clone module. You can use node export module. You can use scheduler. You can use any access control module, like OG or taxonomy access or whatever. And all of those things work great with web forms. So if you enable the node clone module and node export module, then you get these tabs on your pages on all of your web form nodes that you can say clone, and you can immediately take a web form and then make a copy of it. Or if you have the node export module turned on, then you get this export tab and you can get a JSON representation of a web form. If you want to build a web form on a development or local host, export it into JSON, just copy and paste that into your live server, then you can do that and you can do all of those things. Basically. If you haven't used this module before, I highly suggest you use it. Even if you don't use form builder, form builder depends on it, but there's a great module called options element. And options element simply gets rid of this terrible pattern that we have in Drupal of giving users a big text area and telling them to type something pipe value, like key pipe value. You can also use it to type into a text field that ultimately will turn into a list of select options. And so with options element, it takes those same fields, web form just will swap it out and use options element instead, which gives you this much nicer interface of hiding the keys entirely. It'll automatically create keys for you that are just integers. And if you want to, the user can still click on like this customize keys option right down below and enter in manual keys for that, but for the most part, your users shouldn't ever really need to worry about keys. And so this hides that option from them basically. Another fun thing you can do, this is with the token support in web form, I realize this is probably, oh you guys can probably see that, just fine. So you can use tokens to populate the default values of any field. And it's really common that you'll want to populate some information about the page that the user is currently using, like if you make web form, some particular web form into a block, web form has the option to turn any form into a block and then you can place it anywhere on the site that you want. It's common that people use this for like a feedback form that lives permanently in the sidebar or in a modal or something like that. And then when the user fills out the form, you usually want to know what page they were on when they filled out the submission form, especially if it's like feedback on this particular page. So you can do something like you can make a hidden field on the page and then populate it with a token like current page URL absolute. That will give you the full URL of the page that the user is currently on when they're filling out the form. So it populates a hidden field and then when they submit the form you'll have that information when it comes into your inbox. So you can see exactly if they say the alignment is often your headline or the image is smashed into the sidebar, if it's a layout problem what page it was that they're talking about. So this is what that looks like. So even if it's a hidden field the user will never be able to see it. They won't know that they're submitting this value but then when you get that email or email or look at the submission and the results page it will populate that hidden field. Also with tokens it's really common that people want to pre-populate fields not with stuff that is known like pre-populate it with something from the URL. Let's say you have a particular node or let's say on DrupalCon's website the session submissions or evaluations. You might want to have a link to a survey that says evaluate the session but you want to pre-populate a field whether it's a hidden field or a select list with the session that the user is evaluating. You can do that by generating a specific link that just has a query string at the end of it and then link to a particular web form and then populate again the default value of some field with the query string. So this is using the special token current page query foo for example and then in the browser you make a link to whatever the web form is question mark foo equals whatever value you want to be and then it'll pre-populate that field whether it's a hidden field or a text field or a select list it doesn't matter what. So basically web form has a built-in ability to pre-populate any field from the URL. And lastly if sending HTML or pretty emails is important to you web form now supports both my mail and HTML mail both excellent projects that enable you to send full HTML rich text emails to your users and web form has built-in integration with both of them so it makes it so that if you want to send an HTML email to a user you can actually include all of the exact same CSS that you see like when you're viewing a submission you can send all of that CSS and mark up to a user's inbox and have a really nicely formatted submission that's delivered via email. You can also turn on this option to include all files as attachments so whenever if you have a file field in your web form to do things like upload an image or PDF or a resume or something like that when the user attaches that file to their submission and it send you can send that attachment or send that file as an attachment in the email. Okay, so I'm going to do a little bit of a hands-on demo here of some of the new things that we can do. So this is the first email that I've got our first web form that I've got and I'm just going to do some oh, you guys can't see anything yet. One second. There we go. Okay. So in this simple example I've just got a contact form. This is by far like the most common use case for web form where you just want to have a form that has a few fields here for subject your name, email and then a file I guess if you want to send some information. And so to walk through the interface here's the main components page and you might want to do something like add in a new thing for like who, which group or person you want to contact so maybe have a thing for department and this is going to be a select list or radio buttons and then here's this list of options here that if I didn't have the options element module enabled I'd get something much more like this where you would just have to enter in like general support and sales or something like that but if you have options element turned on then you could do the same thing only and you could do it in sort of a much friendlier manner and then select which default value you want to have so that's generally the process of adding component and then you can see here that I've now got radio button options here for which department to send to so now if I were to take the same the same form so I've already got a couple of emails set up here I've got one that is set up a hard coded email to just fill out to like .localhost and then I also have an email here to send a receipt back to the user who filled out the form so in this case it's saying the email to address is going to be the value of a component which is your email value and then you can customize everything about that email you can give it a custom subject so you can say thank you for contacting us you can choose like from the from address the from name and then you can customize the template for each individual email that you configure so in this case this is pretty much the default template but if you're sending this back to the user who filled out the form you probably want to do something more like say you know thanks for contacting us you know we've got your message and then say like you know here's a copy for your records or something like that so and then using tokens that's supported in webform you can add any token you want in here so here's a copy for your records and then that will list out a copy of the entire submission basically and if you want to you can use there's a token for basically every individual field and value so if you want to pull out individual values and you know thank you for contacting the blank department you know blank will be back in touch with you soon you can do all of those things by pulling out the individual field's values so and if you wanted to do set up that department one so this is getting a little bit elaborate because it's pretty unusual you would have three emails on something but for this department field you can see here that we're still selecting it based on a component so based on the value of the department field that is submitted we will send a user or send an email to a particular user and this is where you fill out individual things like you would say Joe at example.com if it's general or support is just support at example.com and sales is set at example.com for example and if you wanted to you could also say mat at example.com so you can comma separate them and then send as many emails as you want based on the option that was selected so now when this thing fills out you'll get three emails well somebody will get three emails so if I want to say you know interest in your project I'm just pre-populated with my user name and that's because that's the way that the form is set up so there's a token here to say populate with the user's current name it doesn't have to be that way and then based on which one of these departments that I have it's going to email a different thing since those are all example.com emails I'm not actually sure what's going to happen here because I'm not sure that the internet will actually like me sending emails like that so anyway here's the form and now in my email over here so I send a couple emails to local host so I should now get so here we go so here are the two emails so this is the one that was the first one that is the email that used the subject that the user filled out and sent it to the administrator and then this is the one that since I was both the sender and the receiver this is the receipt email that came back to me that said you know thanks for contacting us so it's got a different subject and it's got a different template and different things that are all coming in so you can set up as many different emails as you want set them up with different subjects set them up with different bodies do whatever so with the same example I also want to go over some of the new abilities that we can do with like the new analytics that we have so right now when we look at the web form and we look at the results so all of those missions that come through you can get all of them both an email and it records all of them but then we can also look at the analysis of all of these values that got filled out so this currently only has I've only had filled out this form once that has this department field filled out but if I were to go and turn on the web form charts module which the web form charts module is just you know Drupal.org slash project slash web form charts and this module works with a couple of different well the charts module I should say works with a couple of different options you can use Google charts if you want or you can use high charts module or high charts library either one will work the Google charts solution is really great because it doesn't require any additional downloads or libraries or anything it'll just pull Google charts right out of the internet basically and start using it but if you are in a situation where you don't have then you might want to use like high charts because you can use a local copy of it so I've got high charts going on right now on this individual local host and when I go back to that page where I look at my web form results now I've got charts here for each one of those analysis things going on and it's also nice like this is one of those not so useful charts where I've got like a text field so this is how many people left the field blank and how many people filled it out if you want to you can add or remove as many of the fields as you want so you can get analysis on more of the fields if there are fields that you want additional information on or if you want less information on and in addition for each one of these we can go into these chart options here and if I had a slightly larger screen these would be side by side but in this case you can choose like which chart you want change the chart type right there and then if you want to do things like change the individual colors on things you can do that really easily just by selecting the thing right here and it will update it if you were using Google charts it wouldn't quite do it on the fly a little bit more limited on the API side but with high charts like as you modify the things it immediately updates the chart and then it will remember that chart configuration and then everywhere you use this chart either as a token or looking at the results it will save all of those settings so you can have pie charts or graph charts or whatever kind of chart you want oh yeah so a nice thing about doing charts like this is really now if you combine webform with charts you basically have a really advanced pull solution so you can stop using pull basically for whatever reason and replace them if you so choose it requires a little bit more setup but let's say I'm going to make an advanced pull here and so on the normal node page you just scroll it into the bottom and then actually start working on things so I'm going to have like question one and say that this is a select options and then have three choices probably make that required and then have a second question so normally with pull module right you only get one question so if you had some situation where you had multiple questions this would be a good option and then again make it required okay so now we've got form that has two questions now select one select another and then I'm just populating it with some data and then when I go and look at the webform results on this analysis page you immediately get the charts that are for each one of those things apparently I selected the same thing twice or something that wasn't very exciting but anyway so we've got charts for each one of those things and just like before like we can customize these charts to make them whatever style or whatever we want and then save the configuration of that chart so now we've got two charts right there and then what we can do is we can go to the configuration page for this overall form so we've got this confirmation message which if you leave blank it just says you know thanks for contacting us but if we wanted to we could populate this using the token browser so if you enable the token module then you get this browser and under the nodes section there's a section in here for webform charts now so you can enter in a token here for webform charts unfortunately you have to populate the key manually so this is based on the key from the component that we set up so make a message of some kind and then have tokens for each one of those individual charts for example let me make sure I got that right okay looks okay so now when we go back here and we fill out these individual choices when we submit these things and then hit submit we get this nice thing you know thanks for voting here are the current results and then basically you get the results of the poll and then you get your inline on the confirmation page so pretty neat option as an alternative to polls definitely much more sophisticated you still get all of the recording of things but much more flexible in its configuration and how you treat it so that's all I've got for this set of examples but now I'm going to move on to a second one so this second example that I've set up is all about multiple pages and conditional options so some of the new things that we can do in web form 4 so right now the way this form is set up is it's a form that has a bunch of components that are all individually listed out here and it's got 3 pages so right now if I were to fill out this form I have some conditional options set up here so on the first page I have this question for course bringing and then it's got a set of different options here so whether or not it's main course appetizers, dessert or whatever and then if that option is selected then I'm going to show another field sort of that matches that individual thing and if you were to add another thing you can see here like the interface here for selecting these things is actually I think really pretty nice where when you select an individual thing it gives you relevant conditionals so like for dates for example you can say like before after something so if user enters a date before some date or after some date then you can show fields or if it's a select list it'll show you the select lists or if it's just a text field then it'll give you a text field for matching the individual thing so getting this back to where we started here so right now we've got a single page or a multiple page form and when you fill it out sure you know barbecue on September 30th and then you know you're going to say I'm going to bring the main course and I'm going to bring some appetizers and this is also got select or other module turned on so if you were to select oh never mind it doesn't forget I said that alright so because I've select main course and appetizers then I've get these options here where the main course options are shown and then the appetizers option is shown and actually here's where I was thinking about that where I don't know if your main course I don't know you're going to bring bacon as the main course and then appetizers sure and so what that has done basically well if I were to go back here and say oh actually you know I'm not bringing appetizers I'm going to bring dessert and then go on to the next page what will happen is the appetizers field will disappear the dessert field is there instead so that's the conditional logic actually in action here if you were to do something like this field isn't actually required if you were to say I'm not bringing anything then that entire page webform is smart enough to just skip the entire page it will check all of the individual fields and if there are no fields left that match any conditions then it will skip the page entirely which is pretty smart and then if you hit previous page it's also smart enough to know that there's still nothing there so it will skip back over the page when it goes backwards so let's say I'm going to bring you know it still remembers this thing and then you know send some comments and then send it in there so this is the new functionality though is that you could do this sort of thing in webform 3 but it was a lot more complicated to set up because the conditionals were a hassle but now in webform 4 you can just delete this page break in between if you wanted to I'll just delete both of them so this is all like a single page form now and now with a single page form you can see here that it's just name and then the date and then the course bringing and then comments but when you check these individual things you get that field showing or hiding on the same page and you can be pretty sophisticated about it like this appetizer's field is required if it's shown but if it's not shown like if you uncheck that and then submit the form anyway it doesn't hassle you the fact that that hidden required field wasn't filled out so it's smart enough to only require field if it's actually used which is pretty cool let's see and then I got one last example here so all of those other examples those are all mostly webform out of the box with webform charts and select or other if you want to really ease the burden on your form builders if you're going to be building a site that has a whole bunch of forms you might consider turning on the form builder module so the form builder module is a separate project and what the form builder module does well it replaces this page this interface so instead of having this components page like this where you've got to sort of go through and do all of these individual pages all at all at one at a time if you turn on the form builder module and the form builder webform UI module that comes with it then that page then becomes something entirely different so this is the same page on the webform tab only now it's given the form builder interface as the same functionality as webform only now when you want to do things like add a select field or a text list you can just drag it in change the list of options so again this is options element and as you're changing these things you can do things like set the size to something smaller prefix suffix I mean this doesn't make any sense make it required and you can see that like as I'm doing this it's Ajax updating it at the same time and then you can bulk edit the entire form all at once and then when you're done go down here and save and then you've sort of bulk modified the form all at once using form builder so form builder really great great project it's really easy to set up in because 777 includes jQuery UI built into core so it uses jQuery UI to basically add all of that drag and drop functionality without adding any external libraries or anything so I think as far as this hands-on stuff goes that's pretty much it for that I think we're ready to move on to questions is there a moderator with a microphone in the room by chance no okay in that case you're just going to have to shout the question really loud and then I'll repeat it for everybody else so okay yeah okay so the question was is the data that is saved is it still split into web form data and web form submissions there's still the same two database tables that there were before where the web form submissions like a list of submissions is stored in one table and then all of the data for all of the web forms all combined is all in another table so it's a really simple database schema but the views integration whenever you make a listing of web form submissions in order to pull out the data you have to add a relationship to pull out the individual fields basically and the relationship enables you to do things like filters and sorts and things like that so basically it does a join on the data table for every sort or filter that you need so if you have three sorts or three filters then it joins the table three times so it makes it that you have all the same capabilities as you would normally use but a really simplified data structure for better or worse like it scales better but at the same time it's not quite as robust when it comes to displaying the results yeah over here so what about Drupal 8 which is a great question so we have a plan for porting web form to Drupal 8 there's a team of people that are interested in porting it right now to new contributors that I'm not actually familiar with but I've already granted them a maintainership of the project so they're starting to port it right now and I also know that Chris Vanderwater Eclipse GC has also expressed some interest in maintaining it so I think that yeah Drupal 8 will definitely have a future but I'm not really sure like you know with Drupal 8 still being heavily developed right now whether it's kind of a long way out yet from a port was that a question no you just yeah we make any improvements about creating and modifying web forms programmatically do you have any specific examples of what was difficult in web form 3 yeah so is it possible to individually like unit test the submissions programmatically creating a web form I wouldn't say that it's actually changed hardly at all from web form 3 but I don't think that it's particularly difficult to actually test it's just that you really have to think about web forms from a content perspective which I know is kind of difficult because it feels like site building but web forms model of web forms basically being nodes means that you can treat them like nodes even when it comes to creating them and updating them that all that you really need to do is build out a stub node object and then call node save on it and that will create the associated web form or if you want to update a web form load the node out of the database and then the node object node arrow web form contains the entire web form configuration all of the conditionals even the chart configuration and then you can modify any of those settings and then call node save and then you've updated the form actually testing those in like simple tests or something like that the form includes actually its own testing suite which I'm not sure if you've looked at before but it does exactly that where it tests by creating forms via a large array basically calling node save on it and then it uses a web test of course because I really yeah there's no unit testability because there's so much stuff that is all basically it's creating a front end form and there's not really in Drupal at least any separation between the form and like there isn't a way to test a form automatically really yeah so is there any documentation on the actual structure of the web form key you know I don't think there specifically is documentation on how it is but it's very consistent even between web form 3 and web form 4 it's almost identical the easiest way to go about it is to use develop module and just click the develop tab on a web form node and just look at the structure that way yeah maybe something that's more built out would be good but it's really yeah just enable develop I'm not sure that I've got it on here I don't even have develop module available I wish I could just show you but it's really easy to inspect but yeah there's no hard documentation but we could because I mean it's very consistent structure and we don't change it for because if you did change it you'd be breaking the API so it's very consistent though yes well let's support multilingual okay so multilingual stuff with webform is historically very challenging actually there's a module called webform localization which is the best stab at it thus far webform attempts to make it possible or at least it tries to translate any translation systems about all of the possible things that could possibly be configured like you want to translate the label of a field and the description of a field and the placeholder of a field but you don't necessarily want to translate like whether or not it's required that wouldn't make any sense so webform already exposes that information about what stuff is translatable and what stuff isn't but there isn't actually any UI around translating it so it sort of outsources that like most modules do unfortunately to another module to actually deal with the translation I would imagine Drupal 8 this is a little bit premature because porting hasn't actually begun yet but I imagine in Drupal 8 what would be a natural fit for webform is that we would actually move webforms most likely to configuration so we would use YAML files to represent the configuration of an individual webform and just bind a webform to a node so it would still kind of act the same but in the process instead of generating like something that is part of the node as content you would actually be generating configuration and the reason why we would want to do that is because of the configuration translation ability like if you went to Gabor's session earlier today which was amazing we would have a webform on individual settings pages in theory as long as webforms were configuration that would automatically become available if that feature happens in Drupal 8 and webforms are used as configuration then both of those things combined would just kind of automatically give you that which would be great any other, yeah okay so the question was is it possible to combine webforms with other forms and make them sort of all combined all together I wouldn't say that it's very easy at all actually I think the only way you can probably manage that well a couple of different ways you can make a custom webform component for like registration so webform has the ability to have pluggable fields just like field module does and you can make a field that specifically was like for user registration so that's one way to tackle it but probably the easiest way to tackle it is just to cheat and take the user registration form and just kind of like take a webform and form alter in the user registration stuff and then add an extra submit handler on the webform so webform is very hackable in terms of form altering so you can set up the entire webform and then alter it to make it do whatever you want including combining registration at the same time so that I would tackle it in that situation any others what was that sorry I really can't hear you uh huh yeah okay gotcha so I mentioned using webforms as blocks can you use Ajax to submit the form when it's used as a block is that the whole thing no at least there isn't a way to do it built out of the box I think that there are some modules like Ajax Submit module and there might be like a webform Ajax module that might add that functionality but thus far we don't have any Ajax ability built into webform it could be a nice feature regardless of whether it's in a block I would think that if we added Ajax functionality we would add it pretty much everywhere I've seen it done before but I haven't actually implemented that myself so I know that there's add-on modules and ways to do it but off the top of my head I can't add to that unfortunately any others okay I think I got that there was a question about um oh boy using a view in a webform to like populate a select list to make a node reference for example okay gotcha yeah that's a feature that I really wish did exist so webform allows you to um let's not do it with this one allows you to use pre-populated select lists in a lot of cases so on the select list for example there's an option down here for like pre-populated select lists here so you can do things like days of the week and it will automatically populate the days of the week into the select list and it has like countries of the world and United States basically and in theory you can put anything you want in a pre-populated select list including views so you can make like a node reference thing by by creating a view and then using it as a pre-built select list and then you would effectively have a node reference field basically um but out of the box webform doesn't provide an option for reusing views as as pre-built select lists though there is a contrib module that adds on that functionality although the name is not available at the moment I do think that that functionality should be built into webform core though so given an opportunity I think that there's a patch in the queue that is being worked on but if that opportunity were to be finished I would be more than happy to incorporate that into the project so that way we would have some semblance of like the ability to do node references or any pre-populated list based off of a view so again it would be available but planned and right here what was that? okay gotcha okay so calculations let's say like if you were using a spreadsheet that you know it had field A, field B and you had to add them or do something with them what I would suggest you do is views it takes some serious views foo but you can totally do that with views where you can use one view that just like pulls out all of the webform submitted data and then you can add an attachment to the bottom of it and turn on aggregation which allows you to do SQL counts and sums and things like that and then you can take the data from your view and then in the attachment do the aggregates so you can count or sum or average or do anything you want all through views and because webform now exposes all of its data to views you can now use views aggregate functions to calculate all that information in a view so yeah totally works it's really neat actually and then you can take the charts module that I showed you also has full views integration so then you can take all of that chart information and you can do like submissions per day or whatever you want you can chart all of that stuff so I think we're all out of time so thank you guys so much for coming and have a good DrupalCon