In part two of our Webform tutorial, we’ll show you how to create multipage forms, apply conditional logic, create layouts and much more!
We’ll take the simple newsletter signup form created in part one of this tutorial and add additional pages. Then we’ll demonstrate how to show or hide an element depending on the selection made on another element. We’ll also look at layouts and then finish off with an overview of some of the other great features Webform has to offer.
Multipage Forms
For forms with many elements, it’s best to spread them across two or more pages. In this section, we’ll take the form we created in part one and move some of the elements to make a two page form. We’ll also add a preview page and make changes to the confirmation screen.
1. Starting from the Edit tab of the Webform created in part one, click on “Add page”.
2. Give the first page a title of “Your details”.
3. If you want to change the default “Previous page” and “Next page” text then you can do this in the “Page settings” section. We’ll stick with the defaults.
4. Click on Save to create the page.
5. Repeat the process to create a page called Feedback.
6. On the Edit tab, drag the “Your details” page to the top.
7. Drag the “First name” and Email elements to the right a little so they are indented as shown below.
8. Drag the Feedback page above the checkboxes.
9. Drag the checkboxes and radio buttons to the right so they are also indented.
10. Click on “Save elements”.
Clicking on the View tab will reveal a multipage form. You’ll see the page names on the progress bar at the top of the form. You can remove the progress bar in the form settings if you prefer.
Preview and Submission Complete Pages
For long forms, it can be useful for users to preview the information before submitting it. Also, the default message a user receives after clicking on submit is “New submission added to Newsletter signup” or similar and so changing the message is normally a good idea. We can make both of these changes from the Settings tab for our Webform.
1. From the Edit tab of our form, click on the Settings sub-tab.
2. Scroll down to the “Preview settings” section. The Optional radio button will allow users to skip the preview screen. We’ll select Required, so that users will always preview the information before submitting it. You can alter various aspects of the preview page but we’ll stick with the defaults.
3. Scroll further down the page to the “Confirmation settings” section.
4. It’s worth reading through the options under “Confirmation type”. We’ll stick with the default of Page as this will work well for our simple example.
5. For “Confirmation title”, enter “Newsletter signup successful”.
6. Enter “Thank you, [webform_submission:values:first_name]. You have signed up to our newsletter.” for the “Confirmation message”.
7. Scroll down to the bottom of the page and click on Save.
When the “First name” element was initially added to the Webform, a key of first_name was created and we’ve used this in our confirmation message. You could also use the information from other form elements by replacing first_name with the appropriate key.
You can find the key listed on the Edit tab of the form, under the Key column, although that column may be hidden on smaller screens. Also, if you edit an element, you’ll see the key shown in small text to the right of the title.
Now if you click on the View tab and fill in the information on the form, you’ll have a preview screen. After signup, you’ll also have a personalized message.
Conditional Logic
On page two of our wizard, we have a question asking about interests and then another specifically about JavaScript. Ideally, we only want to show the JavaScript question if the user has expressed an interest in it. This is where conditional logic helps. We can set the second question to respond to the results of the first.
1. From the Edit tab of our form, click on the Edit button for “Which JavaScript framework are you most interested in?”.
2. Scroll down to the “Conditional logic” section.
3. Change the State to Visible.
4. Select “JavaScript [Checkboxes]” under “Element/Selector”.
5. Under Trigger, select Checked.
6. Click on Save.
Now if you view the second page of the form, you won’t see the question about JavaScript frameworks unless you have selected the JavaScript checkbox.
Conditional logic can be used to show or hide elements, disable them or make them required, depending on the state of other elements. It’s always worth testing that the logic performs as you expect it to, especially for complex forms.
Displaying Webforms
In this section, we’ll show how to change the default URL. We’ll also demonstrate how to attach a Webform to a node and how to display it in a block.
Changing the URL
By default, Webforms have a URL of “/form/name-of-form”, so in our case it’s “/form/newsletter-signup”. You can change the form part of the URL to another word for all forms within the global Webform Settings tab (administrative toolbar, Structure, Webforms). Instead of doing that, we’ll add an alias for our form.
1. From the Edit screen of the form, click on the Settings sub-tab.
2. Scroll down to the “URL path settings” section.
3. Here you can add URL aliases. We’re going to use “/signup” for the first box and “/signup-complete” for the second.
4. Click on Save.
Now, both the form and the confirmation page will have a shorter URL.
Attaching a Webform to a Node
Webform also allows you to attach a form to a node. In this example, we’ll attach a node to the “Basic page” content type.
1. From the administrative toolbar, click on Structure and then “Content types”.
2. Click on “Manage fields” for “Basic page”.
3. Click on “Add field”.
4. Under “Add a new field”, select Webform.
5. Give the field a label, such as “Newsletter signup”.
6. Click on “Save and continue” and then “Save field settings” on the next screen.
7. You should now be on the Edit tab for the new field. In the “Default value” section, select “Newsletter signup” from the list.
8. Click on “Save settings”.
As with any field, you’ll be able to adjust its position relative to other fields, so you can move the Webform to any part of the node.
Now when you create new content using the “Basic page” content type, you’ll have the newsletter signup Webform attached.
Displaying a Webform in a Block
Another option for displaying a Webform is to create a block. This offers flexibility on where the Webform can be placed on the page.
1. Navigate to Structure on the administrative toolbar, and then “Block layout”.
2. Next to the appropriate region of your theme, click on “Place block”. We’re going to add the block to “Sidebar second” for our Bartik theme.
3. Find Webform in the list and click on “Place block” next to it.
4. Change the title to “Newsletter signup”.
5. Under Webform, type News and select “Newsletter signup” when it appears.
6. In the Visibility section, adjust the settings as you would with any block. We’re going to enter “/signup*” for “Hide for the listed pages” on the Pages tab, so the block will be hidden on the “/signup” and “/signup-confirmation pages”.
7. Click on “Save block” to complete the process.
The signup form now appears in a block on the right of our screen for most pages.
Note that Webform adds another tab to the Visibility section for block configuration. This allows you to select which Webforms the block should be displayed on.
Creating Layouts
To simplify laying out elements on a page, Webform includes a variety of containers including divs, expandable details and fieldsets. If you add a new element, you’ll see all the containers listed together.
In this section, we’ll look at the Flexbox container and use it on the second page of the form. This will allow the two questions to sit side-by-side on a large screen, but they’ll automatically be vertically stacked on smaller screens.
1. From the Edit screen of our Webform, click on “Add element”.
2. Find “Flexbox layout” in the list and click on “Add element” on the same line.
3. Give the element a key, such as newsletter_interests.
4. The defaults will work fine for this example, so click Save to create the container.
5. Drag the new Flexbox layout element, so that it’s just below Feedback and make sure it’s indented.
6. The checkboxes and radio buttons should now be below the Flexbox layout element. Move them both to the right so they are further indented.
7. Click on “Save elements” to complete the process.
Now when you fill in page two of the form, when the JavaScript box is ticked, the second question will appear to the right on large screens. If there isn’t enough room for the questions to be side-by-side then the second question will drop down below the first.
This is just a simple example of what’s possible with layouts. Later in this tutorial, we’ll install the Webform Examples module and the “Example: Layout: Flexbox” form shows how many different elements can be displayed across a page.
Even More Features
We could carry on writing about the Webform module for weeks as it includes so many great features. In this section, we’ll give a brief overview of some other features that are definitely worth looking at.
Reducing SPAM
Any form on the internet will be a target for spammers so it’s essential to have systems in place to reduce this to a minimum. Webform works with the spam protection modules Antibot, CAPTCHA and Honeypot and using a combination of these should help cut down on unwanted messages.
Head to Structure on the administrative toolbar and then Webforms. Click on the Add-ons tab and then scroll down to the “Spam protection” section and find the links to each of the modules.
Once installed, to configure Antibot and Honeypot, click on Webform’s global Settings tab. Then expand “Third party settings” within the “Webform settings” section. For CAPTCHA, there is an element that can be added to any Webform.
YAML
The Edit tab on a Webform has a “Source (YAML)” sub-tab which exposes the underlying YAML markup. This allows you to copy code to another form, add more elements and make changes to forms. For forms that use a lot of similar elements, copying and pasting with the appropriate changes can be a lot quicker than manually adding each element.
In the code below, which is the first section of our YAML markup, we’ve added a Surname text field by copying the markup for first_name and editing it. We’ve also changed the title for the second page from Feedback to Interests.
your_details: '#type': wizard_page '#title': 'Your details' first_name: '#type': textfield '#title': 'First name' '#required': true surname: '#type': textfield '#title': 'Surname' '#required': true email: '#type': email '#title': Email '#required': true feedback: '#type': wizard_page '#title': Interests
Saving the form and clicking on the View tab shows the new form element in place and the new name for the second page of our form.
If you’ve not used YAML before then be very careful with spaces. When items are nested then always use two spaces to indent. Thankfully the interface will point out any lines that have been incorrectly formatted. The screenshot below shows what happens when you add an extra space.
Note that some changes made to the YAML markup will require you to remove data first. For example, if we had also changed the key for the Feedback page, which is shown as feedback: in the YAML code above, then we would have needed to clear submissions or delete the page in the UI and then re-create it.
You can find out more about exporting and importing Webforms using YAML in this video.
Debugging
To help track down issues, you can enable debugging for a form. Start off at the Edit tab of the form and click on the “Emails / Handlers” sub-tab. Then you just need to click on “Add handler” and follow through the screens to add a Debug handler. The screenshot below shows the type of information that will be displayed as you move through a form.
The Examples Module
To get an idea of the capabilities of Webform, it’s a good idea to look at the Webform Examples module. You can enable this from the Extend tab of the administrative toolbar or by using Drush with the following command:
drush en webform_examples
This will install many Webforms that demonstrate different aspects of the module.
The “Example: Style Guide” is a good starting point as it shows all the different elements and also has some photos of cute kittens.
Settings, Modules and Add-ons
If you have been following along with this tutorial, you will have seen a huge array of settings. It’s worth spending some time looking through all the global settings available for Webform as well as the settings for individual Webforms and for different elements. These are just some of the settings available:
Webform includes a number of modules including starter templates and dev tools and you can view these on the Extend tab of the administrative toolbar by filtering using the word Webform. If you need to extend the functionality of Webform further, then the first place to look is the Add-ons tab.
Summary
In this part of the tutorial, we’ve looked at multipage forms and shown how to display Webforms in a variety of ways. We’ve used conditional logic to show or hide an element depending on the state of another element. We’ve also given an overview of some of the other great features included in the Webform module.
FAQ
Q: Is there an online demo of Webform?
You can test the features of Webform on simplytest.me.
Thanks for a great tutorial. I really liked the way you stepped through the WebForm capabilities and stopped along the way to provide additional help suggestions and deeper information recommendations.
I know it takes more effort on your part to include these additional references and I appreciate the extra effort.
We currently don’t use the WebForm module but after watching your tutorial…. we’ll give it a go!
Thanks again Ben!
Bob Schaefer
Agreed!
Ben has done a great job.
Thanks Ivan!
Thanks Bob. Your comments are greatly appreciated!
I have created custom submit handler in webform and it’s working.Can i get submission id from submission handler ?
Hi Rajeev,
When you say “submit handler”, do you mean a WebformHandler plugin? Something like this: https://blog.mattarnster.co.uk/tutorials/create-a-webform-handler-in-drupal-8/
Then you can get the id from “WebformSubmissionInterface $webform_submission”.
Cheers,
Ivan
Great tutorial, I have been playing around with the Webform module lately and your tutorials sure helped me!
I also created a newsletter with the Webform module instead of using Simplenews, but now I find myself in a bit of a situation because the Webform module doesn’t include a unsubsribe functionality. Or does it?
Hi Kim,
I don’t think Webform has the ability to stop or unsubscribe from emails that it sends. Try asking in the Webform issue queue (https://www.drupal.org/project/issues/webform).
At the end of the day, Webform isn’t a newsletter system, you won’t be able to pull out any type of metrics such as open rate and click rates.
What I would’ve done is integrate Webform with Mailchimp, there’s a module for it (https://www.drupal.org/project/webform_mailchimp). When a user fills out the form, they’re automatically subscribed to a list in Mailchimp.
Cheers,
Ivan
Why modal cofirmation is not working? it gives me just a grey layer without message. And how to add captcha? it doesn’t need a key???
Hi Sara,
Why modal cofirmation is not working?
I don’t know what the problem could be? Try asking in the webform issue queue.
Look for JavaScript errors or PHP errors
And how to add captcha? it doesn’t need a key???
It depends on what type of captcha you’re using. reCAPTCHA will require keys.
Cheers,
Ivan
The token [webform-submission:values:first_name] should be [webform_submission:values:first_name].
Thanks.
I’ve updated the tutorial.
I just finished the tutorial and learned a lot from it. Thanks for providing this! I met J Rockowitz at DrupalCamp Atlanta 2017. I’m switching my company site from WordPress to Drupal, and I’m going to use the Webform Module.
That’s great news.
Glad you enjoyed the tutorial.
How can I integrate this form with MailChimp? I’ll get a notification when someone submits the form, but I need the person’s contact info added to my newsletter.
Hi Tom,
Look at using “Webform Mailchimp” module (https://www.drupal.org/project/webform_mailchimp)
I’ve never used it, but it’ll be the first module I’d try out.
Cheers,
Ivan
I actually found it before you told me about it. I enabled it, and it seems to be working.
Do you know how know what is causing the labels for radio button and checkboxes to be larger than the rest of the labels? I’m having this issue:
https://www.dropbox.com/s/26qohhe5t04wpgg/Screenshot%202018-03-23%2010.42.45.png?dl=0
The radios and checkboxes are grouped in fieldsets and the text is from a legend tag within each fieldset. You’ll need to adjust the CSS so legend tags match the label tags.
Thanks for the quick response!
Is there a way to can reply the user who submitted the webform ?
Hi Mohamed,
I don’t think there’s a way of doing it in the Drupal 8 version. If you’re using Drupal 7 then look at https://www.drupal.org/project/webform_email_reply.
Cheers,
Ivan
Hi there! i’ve made a webform in drupal 8 in which a student can apply for internship . everything’s perfect but i want to score the student on the basis of their Cgpa but i don’t know how to do that can anyone answer how can deal with it
Thanks
Hi Umair,
I’ve never done anything like this so I have no idea.
Are you collecting the grades in the webform?
Cheers,
Ivan
Hi Sir!
Yes i want when students fill the form they are automatically given the scores like from 4.0-3.5(score 10) 3.0-3.4(score 8)
just like this and the student can’t see it . its only for the admin to see so that evaluation could be easy.
Thanks
Have a look at the Webform computed element – hopefully that will do what you want.
Hi,
Awesome tutroial… keep up the good work !
Is there a way to automatically copy the webform submission values into the “article” content type after for example the “contact” webform is submitted ?
So clearly i want to copy the webform submission values of:
_ “name” field
_ “subject” field
_ “email” field
_ “message” field
To the same field inside the “article” content type.
I have tried:
_ Rules 8 module
_ Populate module
With no succes at all!
Any ideas ?
Hi Charbel
I think at this point you’ll need to do this with custom code.
https://drupal.stackexchange.com/a/235859/247
Cheers,
Ivan
How do you limit the number of submissions/slots a user can make?
I see the max limit but there is no limit per submitted form.
THX
Hi Iga,
Click on settings on a form, then go to Submission -> Submission limit field set.
From this field set you can configure submission limits for the specific form.
Cheers,
Ivan
Thanks for the valuable tutorial.
Is it possible to create interacting forms?
Scenario 1: user enters some input in some fields, hits submit button. A second form is displayed with some results based on the input.
Scenario 2: User enter some input in some fields. A result field on the same for gets updated based on the user input
Inputs and results can be numbers and text.
Hi Vic,
What you’re asking for is pretty specific and I wouldn’t know until I tried to implement it.
You could implement what you’re asking for with custom code.
Cheers,
Ivan
How to create dependent drop down for country, state and city in webform module?
Hi Arul,
I don’t know a way off the top of my head.
Check all the available elements and see if there’s something there.
Cheers,
Ivan
Hello,
What would be the token for a select list field ? here I want to have key value of selected option, not the value !
Thanks
Hi Nileema,
Not really sure how to do this.
I’d search the Webform issue queue (https://www.drupal.org/project/issues/webform) to see if others have asked the same question.
Cheers,
Ivan
‘@Ivan, Thank you for your reply.
I searched more related to this issue and I found the answer.
We have to use “raw” after select field name. For ex. [‘webform_submission:custom_address:contry:raw’] , this gives me country code instead of country name.
Thanks