 So hello and welcome to this presentation on building web forms, building forms in Drupal using a web form. Now I was caught up on Tuesday afternoon to present this presentation because somebody has pulled out. So I'm trying to condense an hour long presentation, which I've done before, into half an hour. So I do hope I do my best. But if there are any questions at the end, just come and find me. I will be around. So let's get started. So just a bit about myself. My name is Ivan, I've been a professional Drupal developer for about 15 years. And I actually looked at my Drupal.org profile, which has been a member now for 17 years and five months, which is absolutely crazy. So the agenda for this session, and we're not going to have that much slides because this is pretty much just a live demo. So there are a few slides just for now. So the agenda will be, I will give you a quick introduction into web form, where we'll create a form, we'll look at how to attach fields to it, how to add conditional logic, how to add a confirmation step, view submissions, and then finally how to embed the form into pages. So if you have used any type of form builder, I want to try and cover every aspect of just using a general form builder, which is creating it, managing fields, adding in conditional logic, adding steps, I probably should have even put how to add in pages as well, because every form needs a bunch of pages. So with that, let's just jump right in. So for people who don't know, web form is a module for Drupal.org, for your Drupal site, and you can access it by going to Drupal.org slash project slash web form. And it is one of the few modules in my opinion, that is an actual product. And what I mean by that is you install it and you get something out of the box. A lot of the modules now in Drupal are kind of frameworks or libraries where you install it, but then you need to build stuff on top of it, or you need to implement views, for example, which is great. But if you're new to Drupal and you just want to build a form, well, you can now just use this. And I've heard some great stories on people using web form to build all sorts of powerful form systems. So as I mentioned, if you want to check out the page, the project page is very detailed as you can see. And to install it, I'm not going to install it because I've already installed it on my local site. You just scroll all the way down to the bottom, grab the composer command, there's a big project page as you can see, scroll all the way down to the bottom and of course grab the latest composer command and install that. Another word of advice is you want to have the token module installed, but if you have a decent sized Drupal site, you should have the token module already installed. So here is my vanilla Drupal site and all I'm going to do now is just go ahead and install it. So if I search for web form, you will see a lot of modules. You can see that a lot of functionality has been separated out into separate modules. So you don't have to install everything. Now I do recommend that you just stick to web form and if we scroll down web form UI, because a web form UI just gives you a UI and interface to manage it. But as you can see, there are a lot of sub modules that give you extra functionality. And then you can have a play with the actual web form demo modules, which give you out of the box functionality, which you can then go ahead and play whichever way you want. And then if we scroll further down, you have a few deprecated modules. Once you've installed everything, you go ahead and click on install. Give it a few seconds and it will go ahead and install. Now the UI for web form can be pretty full on, especially if this is the first time you are using web form. But to access all of this, all you need to do is go to structure, scroll down and you should see web forms. And if you click on here, you will see, let me just close that, you will see a default form down on the bottom. You can you can delete it and do whatever you want with it. It's just it's as simple as clicking down here and clicking on delete. But if we scroll up, you will see a bunch of options up the top here. So under submissions, you see the actual you can you can access all of your submission data. So anyone who has filled out a form, their information will go here and we'll cover this later on. But for now, just understand that's where you can get it. Then options. This is this is actually a great feature of web form. It actually ships with a bunch of standard options such as days, months, time zones, industry, phone type. And this actually makes it easy to reuse select options or checkbox options. So if you do have a use case where you have 20 odd forms with the standard set of lists or options, you can create your own options list. And then you can make that change once and have a canonical list. And then it will automatically be changed across all your forms. Then under configuration, we have the configuration for all of web form. I'm not going to go through every single page because as you can see, there is a lot and this is just the first page. If we scroll back up, we have elements, submissions, handlers, variants, export libraries and so on. Okay, there is a lot there. Under advanced, this is where you are sorry under add-ons. This is where you can see all of the available add-ons. And if I expand all of this, you will see that there are a lot of other third party contributed modules. And if you keep scrolling down, there is a lot here. Some of them are slight, you know, not well maintained. Other ones are well maintained. So mileage may vary. So I do recommend that you have a look at it. But if there is some piece of functionality that web form is missing, come to the add-on page and there's a good chance a module already exists for that. So I do recommend that if this is the first time you are looking at web form, have a look at the modules and just have a play with it. Okay. So now let's go ahead and actually build out a custom form. Now to do that, you want to be logged into your Drupal site and then just click on web form. And then here you just create the title of your form. Pretty simple. I'll call this one contact us. If I can actually spell that correctly, there we go. And then click on save. Then we get redirected to the elements page. Now the concept of elements is just think of it as a field. For some reason, web form calls them elements, but we can think of them as fields. If you click on elements, you can see all of the available element types, checkbox, text area, text field, but then you have advanced ones such as order complete, color, email confirmation, email, multi, mapping. Then you have all sorts of other ones, which aren't just fields, but they actually offer certain type of functionality. There's a lot here. You can even control layouts as well. You can even control markup and pretty much anything that gets added to a form is an element. So let's scroll back up and create our first element. So the first one we're going to do, this being a contact us form, we'll put in a first name. So let's put in a text area and then let me do that again. Click on text field and click on text area. Then on the right hand side, we get a little bit of a few tabs and I'll call this one, what will we call this one first name? I'll call this one also first name is key. And then up the top here, you have a few items. Okay, you can control the conditions. You can add in advanced options and also you can control the access. Now this is advanced stuff. I don't want to cover it too much because I would honestly do probably another three or four presentations on this. But if you do have to have full control over access, you can do so from here. So here we've set the key, set the title. Let's make it required and then click on save. I'll probably have to zoom this out a little bit. So I've got more space. There we go. Now the next field we're going to add in is a text area. So this one you can see here and we'll call this one project details. You can see here now the key is getting added in because I think if it was zoomed in too much, it just displays it. And let's make that one required as well. And you can also put in a required message if you like. So at this point, if we go to view, we can see a working form, pretty simple. All we've done is add in a text area and a text field. We have all of these tabs that we can jump back into certain parts of the form. So if we click on build, it will take us back to this build page. Let's now put in a dropdown because forms always use dropdowns. I'll search for select. Then I'll click on the first select item. Do that again for some reason. It's not. There we go. And this one I will call tech knowledge. Okay. And I'll call this one as well. Technology and blow here. We can put in our option. So let me just chuck in a few options and I'll give it WordPress. Why not? Okay. And scroll down and click on save. So now we have a select box. If we save the elements, jump back here, click on test. Now test is a great feature. It just pre populates the fields for you. It's a great way to test out. And you can see a dropdown. We can take things one step further. If we go to build and there is another fancy element which I absolutely love. And that is select other. Now, what does that do? If I put in a title of say hosting. And let's put in a few hosting providers. So I'll call this one Google Cloud. And we scroll all the way down and hit save. And then we go and test out the form. We get our dropdown, but then we also get other. And this allows you to just add in another option that isn't part of the dropdown. I've actually used this feature a lot. I remember back in the day of client asking for this type of functionality out of a standard Drupal form. And there was a lot of custom code involved. But this is one of those great elements where you can select from a dropdown. And if it's not available, you can just chuck in some other option. And that is a very powerful element type. And now let's look at rearranging the form because sometimes forms build. Well, the whole point of a form is to build it out and they get pretty large. And what I want to show you is just how to organize the layout of the form. So instead of every form element being on a single row, we can kind of float them nicely and next to each other. And I'll create a last name field. So again, to do that, you click on build. And let me just click on add elements. I will chuck in text area and I'll call this one last name and make it required. And then this time I'll click on add layout. And from a technical standpoint, it just adds a flex box CSS. Just adds a bit of CSS to it. But to organize your fields, all you need to do is move this element up, pop first name and last name below, hit save. And now if we go back and test it out, we should see our forms out to first name and last name fields have been popped next to each other and you can just see that without writing any custom code or any CSS, we are starting to build out a pretty decent form. So you can really see the power of web form, especially given it to editors. They can manage everything through the Drupal backend and you don't have to pay for an extra SAS subscription because there's one thing that happens, there's one thing I've noticed in the last couple of years, the price of SAS application doubles every couple of years. That's pretty much what happens. All right, let's now put in another select item and also keeping track of the time as well because we're pretty much halfway. And what I'll do is I'll add in another select and this time I'll call this one industry and let's use one of the preexisting options. So this one is just industry and what it's going to do is it'll populate the actual drop down using the options from a predefined options list. So as I mentioned earlier, let's imagine we have 20 odd forms and all of them are using this industry drop down and you want to make a change and rename manufacturing and operations to just manufacturing instead of going through 20 odd forms and manually modifying that, you can just come to one option section and just change it once and that's it. So that's the power of using those predefined options. So at this point, we have a pretty decent size form and then if we click here and click submit, we have submitted it and that's it. Now, a form builder is not complete without the ability to add in conditional logic because that's where I know I've spent many hours or many weeks actually defining the defining logic and all and all of these custom conditions when this field is selected disappears when this field is not selected make this required and things like that. Web form has support for conditional logic. So let's go back to build and what I want to do well before we do that let's add in a bit of logic so that if you select Drupal you will get a version element text field up here below and also it will be required. Now to do that, we first of all need to create the text field. So I'll click on add and I will select text field let's call this one version and let's just make it required. So at this point we have a field in there but we need to now add in the actual logic. So you want to go and edit the field then go to conditions and let me pull this out a bit so it's a bit more easier to see then the state should be visible and these options because we're only dealing with one logic with with with one parent we don't need to worry about this then we then we want to select our technology and value is and that's going to be the option. So we have put in the current logic which is visible if all of the following is met. The technology the technology drop down has a value of Drupal. So we can scroll down and hit save and let's move this up the top where is it just below version click on save elements and now if we go to view I'll go to view so we can actually see it in action we can fill in our form and then if we come along in here and select Drupal we get the version drop down and it is required if we select the other option it automatically appears sorry it automatically disappears and work for me smart enough to to actually not ask for that field because we did set it as required so it is smart enough to know that if it's not visible or then it is not required but if we come back and fill out the form and select Drupal we need to fill in that form right there. So the conditional logic or the conditional system in WordPress is pretty powerful so it does take a bit of time getting used to especially if this is the first time you are using it but as you saw it's very quick and easy to just add in a little bit of logic in there to build out any type of custom workflow. Now the next thing I want to show you is how to create pages because this form is simple there's not really that many elements but I've seen forms with 20, 30 odd elements and from a usability standpoint it's not that exciting to see a form with 50 odd elements in there so it's sometimes good to just break it up into separate pages. Now to create the pages again you come back into build click on this add page and then you want to define all of your separate pages so I'll quickly go ahead and define contact and how you break down your pages is really up to you but I'll break it down into three the next one will be project and the last one will be tech and so all we need to do is move these stuff up so let's move this up so contact and then anything that you want to appear under that page you just need to indent it below that page element so again with tech I will move that up and then I'll move or let's just move these ones and we'll move them all up together because we can do that so we can move these ones up and then simply select that and pop them up and then finally down to bottom here we can add those in and pop them in there we go done and that's it now you've created a form and it's broken out into separate pages come along in here and you get these nice little in progress yes that can be styled a bit but that's all just front-end work and then you click on next and you can go ahead and just fill it out and then finally hit submit and you're done now when you do have multiple pages another great feature to have is a preview step so your users can preview what they are submitting before it gets submitted because chances are you're going to have a lot of elements now to do that all you need to do is go into settings and you can see here every form has its own set of options and all you need to do is scroll down here click on form and scroll all the way down to the bottom and you should see a form preview settings you can make an optional you can make it required let's make it required scroll down and click on save and then come back up top and if we quickly go through this again now you get a preview you can preview your submission and then finally click on submit and it's a nice quick way to just preview your content now we are quickly running out of time so I'm going to have to go through this quickly when you have multiple pages a common thing to do is actually to track users through the funnel and I don't know if you can see that up the top but the URL all the way up the top here doesn't really change when you go through the different pages so you'll see here it is webforms.contactus.test if we go back it stays the same so it actually makes it very difficult for us to use any type of analytics tool to see when people are dropping off the form now luckily for us webform has an option so if we come in here come into forms and then scroll down there is an option all the way down here to track the users so it will use the page key and then add it in as a get parameter so you can then easily use any type of analytics tool and just track them with the actual URL so if I come in here with test you can come along and when you click on next you will see that you get now the key up the top here and this is a great way to just track them and you could write a bit of JavaScript code if you're inclined to do that and create custom events and track also which page they are on by pushing in custom events so we are running out of time very quickly let me just quickly go through submissions if you click on results here you will see all of the available submissions because there's no point of having a form and not having actual submissions this is also another great feature of webform because you can export your data so you can download it as a CSV you can clear your submission data another great thing you can do if we go back you can control what appears in this table because you can imagine if you have 30 odd elements this table is going to be massive so you can come along in here and customize it and see all of the available columns and you can chuck those columns in and if you want you can go ahead click on edit and you can export well you can view the submission and then if you click on view you can view it as HTML as a table format as a plain text and also if you are integrating with other systems you can export it out of course this will require custom code but you can export it out into a YAML format and then push your information into other systems now the final thing I want to show you before we finish up is embedding the form into different parts of Drupal because yes we do have a single page so if we go back and we go back all the way we do have this page here but chances are you may want to embed it into other places so a common way of embedding forms is through the block system so you can come along in here click on place click on block layout and let's add it to the sidebar straight away if you search for web form you will get a web form block you can click on place block you can search for your form and then just place it in and now you're going to have a web form just automatically up here in the sidebar so if we go to the home page you'll see straight away here it's in the sidebar of course it is kind of squashed in so you may not want to have this type of form embedded directly in the sidebar but if you fill it out and hit next you'll see everything it is kind of as I mentioned squashed in but you can have it in there and it will automatically be embedded in now one thing to be aware of is if you go to results you will see let's go to an actual page because I do have an actual page right here so if we fill out so if we want to test the article and let's imagine you have a sign up letter form and you want to see where everyone is coming from you can have them fill out the form at this step and then they can preview it they can submit everything and it's been submitted and if you click on results in the submitted to column you can actually see where the submission came from and this is actually pretty important because if you do have a page with X number of articles and you notice that well people are signing up to our newsletter from one particular article most of the time that's a good way to gauge how well your articles are running so so if the submitted to is empty it means that they have submitted it on the actual form page because that means that they submit on the form page okay the final thing I'll show you is one of the most common requests I get is how to change the buttons so you can easily do that by coming down here and clicking on customization and you can go ahead and modify the submit button CSS, styling, label you can update the update button, the wizard previous and next button there's a lot here you can you can modify the actual the actual preview buttons as well and the previous and next button of the preview button so web form allows you to modify a lot and very rarely do you need to write custom code to kind of put in like form altars especially for the developers out there because web form allows you to customize a lot and if you and if you have to create a custom element well there are plugins that you can do to implement all of that yourselves okay I think I've got one more minute to go and I think that is it so thank you very much that is it and do you have any questions? Oh I've got a few questions good good good that's alright Hi thank you for showing us what web forms can do so I have a question like if we have a list of check boxes and if we click one check box then I need to show a plain text that's a conditional logic thick can I achieve the same thing the one you show us like when you click on a select and then it show the text box God just just any type of like text yes so all that is is that would be you would create there are HTML elements so I think it's just HTML yeah basic HTML okay and you can just add in any type of markup right and that's it and then here again you can just come along here and set the same logic so so every single element can be conditionally displayed and the element can be a bit of HTML it can be a bit of text or anything else so once you understand this conditional system you can apply it to any type of element cool thank you so much thank you just can we use recapture or anything to secure our forms yes you can so if you come under forms add-ons well let me collapse all these links enhancements or spam protection these are the recommended ones so you do have anti bot yeah capture recapture honeypot one thing I have noticed is that I do believe recapture now they're going to start charging for it because I know that at work that we will move in a way from them but you want to also test out caching because I don't know if this has changed but a couple a year or two ago I think when you use recapture on forms it automatically turned off dribbles caching and you may not notice it if you just put recapture at the footer on every single page then all of a sudden caching is turned off so you just want to test that out it's recapture doesn't stop absolutely everything but you can utilize a few of these options to actually stop yeah from spam bots getting in but I do believe also having like a multi-page form and all that will kind of slow things down but you won't be able to eliminate it fully you're always going to get something coming through but there are there are options there yes have you tried to implement some sort of quiz functionality using web forms? like a multiple choice and you show yeah you did it I believe there are examples I haven't myself most of my work has been around actually making all this stuff kind of headless where we use web form what is it rest if you want to create like a headless form and then push it into web form that's another thing that web form is great for but if you come here I do believe right down at the bottom there are quiz types where was it I believe there are certain elements if I scroll up scroll up well maybe I was looking at it in different place I think it's maybe there is a module for that yeah there's probably a module for that but maybe there is quiz no okay no well the answer is no I haven't I do remember there used to be a quiz Drupal module just called quiz but yeah but I'm sure it can be done but you can imagine with the logic yeah there will be a bit of logic in there and you could implement quiz functionality but then you'll be but then you have to think of all the different permutations of what the forms going to look like and then yeah things can get a bit hectic around that was one of them it's not really a question that you said there's no point having a form without submissions actually did one a couple of weeks ago and it was a form without submissions sort of what she was saying over there we use it for a contact form but as a contact form for phone numbers and help links so you choose what kind of help you want it gave you a couple of links all with the conditional logic and markup fields just turned off the submit button and it worked perfectly and it made the marketing lady very happy okay you can do that yeah I mean that's an option that's not really using it as a form builder I guess it's just using just the conditional logic to display things which can be done with a bit of well again yeah it could be done with yeah absolutely it could be done with JavaScript or anything like that so yes all right thank you