How to Make an Advanced Webform in Drupal 8
One of our OSTraining members asked us how to make a user input form in Drupal 8.
We’re going to recommend using the Webform module, which has just had a major update.
Step #1. Install Webform and libraries
- Install the latest version of the Webform module.
- Enabled all the Webform options on the “Extend” page. You don’t need to do this all the time, but it’s useful to see what Webform is capable of. My Webform options looked like the screenshot below:
To create a more advanced Webform there are multiple libraries you can install.
- Go to Reports > Status you can see a wide variety of suggested libraries:
Here are links for the following packages:
- Webform library: CKEditor
- Webform library: Code Mirror
- Webform library: jQuery Geocoding and Places Autocomplete Plugin
- Webform library: jQuery Input Mask
- Webform library: jQuery Timepicker
- Webform library: jQuery Toggles
- Webform library: jQuery Word and character counter plug-in!
- Webform library: RateIt 1.1.1
- Webform library: Select2
- Webform library: Signature Pad
Extract the files and place them inside /libraries/ folder.
Rename the folders so that they match the naming convention, shown in the screenshot below:.
- Go back to Status > Status Reports and run cron.
- Check that Drupal sees and recognizes all the plugins we just installed.
The only alert you should see at this stage is a warning about privacy. If you are collecting sensitive data, you should make sure you have configured Webform to use private files. For more information on how to properly use private files in Drupal, please read “Accessing Private Files“.
Step #2. Building the Webform
Now, as we have fully installed Webform module, we can start building our own form.
- Go to Structure > Webforms.
- Select “Add webform”.
- Give our form a title and a description.
Now we need to add the elements for the webform, which we will collect the user information.
- Click “Add element” and you will see a long list of options:
- “Name” already exists as a predefined field. So select it from the elements list and we can configure it to our needs. You have to give every element a title. We only want the First and Last name, so untick visibility for the other fields. You should also set this to be required.
Now, for the first page, we are going to add the following fields:
- Name
- Address
- Date (for date of birth)
- Telephone (for this field you would probably want to change the Form display so that it looks a little more obvious that it is a phone number field)
- Status (for the Status field we are going to use a select type field that allows us to add the values we want to be available for our user).
- After we’ve added those fields, we can rearrange them and improve the layout:
We have a lot of fields already, so let’s add a second page to break this one up a little bit and make it look more professional:
- Select “Add page'”. This will create a page break in the form and add the navigation for it.
- You need to tell it which fields to put on which page, so we will also need to make a page for the first-page content. Indenting the fields will automatically add them to a specific page:
Webform comes with a host of extra features, such as conditional logic for fields. The image below shows the “Conditional Logic” you can find by clicking “Edit” for an element:
Step #3. Webform Layout
Now I will go and fill out the form so you can see what a filled out form would look like. If you want to add a custom element for example if you wanted to combine several elements into one type jrockowitz explains here but we won’t be covering that in this tutorial instead for passengers I will simply allow ‘add another option’ Which will still allow the data to be collected in a logical way. In Values, you could add the other fields you want to collect but they will be limited to the field type selected.
Now we have our Multiple page form but it doesn’t look very nice and we have some odd repeat behaviour. So let’s fix that. First lets update the passenger page to add a tick box to create more passengers and clone the name and date of birth fields.
Now we have to edit the name and date of birth field so that when the checkbox is selected the fields become available. We do this by selecting Edit and going down to conditional logic. And below conditional logic to both the name and date of birth field.
A multi-page Webform will look like the image below:
If you would like to improve the layout of the fields without theming, you can use the “Flexbox” options. From the example below, you can see that Flexbox can be used to make forms look more compact:
I just posted a new documentation page about managing the Webform module’s third party libraries ([url=https://www.drupal.org/docs/8/modules/webform/webform-libraries)]https://www.drupal.org/docs…[/url]. It documents that you can use `drush webform-libraries-download` to quickly download and update all 13 libraries.
Thanks Jacob!
Where do you put the libraries folder?
The /libraries folder goes in the root of your Drupal site. The /libraries folder is the recommended place to put external non-PHP libraries in D8. @see https://drupal.stackexchange.com/questions/84811/what-are-all-the-directories-for-in-the-new-drupal-8-structure
Is it possible that you use Webform for retrieving data from the database tables and showing it as a form on a page? And is there a possibility to update data with that same form?
Thanks!
You are welcome, Sergey.
Hello
How I can add ad-ons like ‘Webform Mass mail’ in drupal8?
I added it into modules\contrib and modules\contrib\webform\modules. But it is not listing it into /admin/modules page.
Thanks
Hiral
My requirement is , I have to send mail with pdf attachment based on selected roles and industries value form drop down via Webform Druapl 8 . Any one can help me out on this requirement.
I have installed webform module and created contact form however the submission details are not going to my site email address although I have clearly mentioned my site email address
Thank you
I have a Drupal 8.8.x ‘Open Social’ Community site in development where I have multiple *Required User Profile Fields that were added through the field group UI and are included in the Registration process.
After approval there are additional Profile Fields that the user is encouraged to complete in which case they then go to the Profile Edit page to do so!
While my first goal would be to have a multi page/step Registration (and Profile Edit) process (I currently have it in accordions), I see no way to do this out of the box in Drupal 8 and also see no way to integrate Webform in the process!
Also the features of “chained” fields (similar to the Country/address field widget) does not seem possible nor the ability to use option groups
I have spoken to the developer of Select2, who as someone who does not know Drupal, is also baffled as to how to find my solutions!
Can anyone here offer a hand?
I am happy to supply more specific use case specifics if needed!
Hi Daniel, thanks for that. now am quite stuck when it comes to designing the css of the induvidual submission view page
I have a question, How can I hide Category of webforms from all forms in Drupal 9?
Hi,
on your webform, click on Settings and update the URL path settings to whatever you want.