You have seen them, you have used them and now you will learn how to easily build them in Drupal. Because collecting form data is so important for any organization, it is crucial to have a flexible, customizable, and feature-rich form system in place.
And what’s better than our very own Webform module? The Drupal 9 Webform module is a contributed module and is one of the most powerful and flexible modules in Drupal. It is an open-source module used for building forms and managing submissions. Drupal Webform has also made it to our list of top Drupal modules that you absolutely need for your next Drupal project! Learn more about the adaptable module in this Drupal 9 webform tutorial.
Webform Logo derived from Drupal.org/Webform
Why use the Drupal Webform Module?
Drupal Webform is a highly versatile module used to build forms and extract information from users. For example, you can use the Drupal Webform module to create surveys, contact forms, and feedback forms. After submission, this module will allow sending emails to the user and can send notifications to the administrator regarding the submission. There are options to view the submission, publish it as a node, page, or block and export the results into a CSV file.
- Drupal Webform module is open source, which means it is free and you only need time to set up and configure the forms.
- It lets you perform form validations through hooks, Webform handlers, or the Drupal Webform Clientside Validation module. This needs the Clientside Validation module to be installed.
- These Webforms are flexible and allow for customization of fields used in the forms.
- It provides many valuable options in a single installation like sending notifications and emails to the user and the administrator.
- Drupal Webforms makes it easy to export the results of the submission. Users can view the result of the submitted form in the admin interface and can also export the result in CSV format by clicking a single button.
For a deeper look into the features of the Webform module, check out this article.
Getting started with the Drupal 9 Webform module
The Drupal community has given us some phenomenal modules and Drupal Webform is certainly one of them. Jacob Rockowitz, the builder and maintainer of the Webform module, had once discussed with us about Webform and his contribution to the Drupal community. “Everyone has a personal groove/style for building software. After 20 years of writing software, I have come to accept that I like working towards a single goal/project, which is the Webform module for Drupal. At the same time, I also have learned that building open source software is more than just contributing code; it is about supporting and creating a community around the code.”
A big thank you to Jacob and other contributors to the Webform module for giving us an extremely valuable module.
Now, let’s get started with installing the Drupal 9 webform module and creating Webforms.
Install and enable the Drupal Webform module
Download the Drupal 9 Webform module from here and enable it.
To enable the Webform, go to Extend and in the Webform category, you will see a Webform along with the checkbox (as shown above). To work with Drupal 9 Webforms enable Field API, System module, and User module. Without enabling these three modules, Webform cannot be enabled.
There are various options under Webform that provides specific functions. Enable them as per your requirements.
Create a new Webform
To create a new Drupal 9 Webform, enable Webform UI and Webform Access. Webform UI provides a good user interface for building and maintaining webforms. Webform Access controls the webform nodes. Enable the Webform Node before enabling Webform Access. Then go to Structure -> Webforms.
Here are some options for Webforms.
- In the first tab, Forms, you will find a list of Webforms created. By default, there is always a Contact form available.
- In the Submissions tab, you can view the forms submitted by the users.
- Options tab provides a predefined reusable set of values that are available for the radio buttons, checkboxes, and menus.
- In the Configurations tab, general settings of the webforms are provided.
- In the Access tab, you can create a group of users and set permissions to the group.
- In the Add-ons tab. You will see a list of modules and plugins that can be used to improve the features of the Webforms.
To create a new Webform:
- Click on Add Webform.
- Now a tab opens with a title, description, category, and status.
- Add a title to the Webform and a short description about the form.
- Under Status, you will see two options: open and closed. This means if the status is ‘open’, the form is available to the user else it's closed.
- After editing all the options click on Save.
Adding Fields to the Drupal 9 Webform
When you click on Save, a page opens with the title of the Webform (here: Registration).
- To add fields to the Webform, click on the +Add element button.
- You will now see a pop-up with the list of fields that can be used in the Webform.
- To preview the elements, click on Show Preview in the top right corner. To add the element, click on the Add element button of the respective element. Now a pop-up opens up on the right side of the page..
- You will now see options for editing the title and many advanced settings for the field. After you are done making all the settings changes, click on the Save button. Click on the Required checkbox for all the mandatory fields in the Webform.
- You can view the Webform created by clicking on the View tab on the top. The Submit button is created automatically upon adding an element to the Webform.
- Test tab provides testing to the Webform created. The values to the form fields are auto-filled with random values.
- In the Result tab, the values of the submitted form can be viewed. There are three options under the result tab.
- A list of all the submitted forms under the Submission tab.
- Submitted results can be downloaded in 4 formats - Delimited text, HTML tables, JSON document, or Yaml document under the Download tab.
- You can clear the submitted forms in the Clear tab of results.
- Settings tab has the general settings of the Webforms which can be changed according to the requirement of the user.
- The configuration of the Drupal Webform can be downloaded from the Export tab. The configuration is displayed and can be downloaded by clicking the Download button at the end of the page. It is downloaded in Yaml format as the Yaml config file can be easily imported to another Drupal instance.
Adding Content to the Drupal Webform
As soon as the Drupal 9 Webform Node module is enabled, a content type with the name ‘webform’ is created. It has fields like title, body, and Webform. The Webform has a dropdown with all the created Webforms.
To add content to the Webform, go to Content > Add content > Webform. As mentioned, there will already be a title and body present. You will find a dropdown labeled Webform, which has the Title names of all the web forms created.
Right next to that, there is another option called ‘Webform settings’.
Under Status, there are three options, Open (to keep open to users), Closed (to close the form for users), and Scheduled (it will provide a date and time field and according to the date and time mentioned, the form will be kept open to the users to fill).
You can also provide default data by filling the Default submission data field with an available token. A token can be browsed by clicking on You may use tokens. Examples to write the token can be viewed by clicking on the Example link. You can view all the submitted forms under the Result tab.
Adding the Drupal 9 Webform as a Field in Content Types
Now let’s add the Drupal Webform in a content type.
- Go to Structure > Content types > Manage fields of the content type for which the form is required.
- Click on Add field. In Add a new field, select ‘Webform’. Under the ‘References’ section, give a label to that field and click ‘Save and Continue’.
- Within Field settings, you can give the number of values allowed to the field and click on ‘Save field settings’.
- You can select the default form from the default value or else click on ‘Save settings’.
- Now go to Contents > Add content and select the content type which has a field referring to the Webforms.
- Select the form from the dropdown which is required for this content. The submitted form can be viewed in the Result tab of that content.
Adding Captcha to Drupal Webforms
Many websites today use Captcha to verify users. Before submitting a form, it provides a question and asks for a response from the user. This prevents bots from overloading the servers by making form submissions and email submissions (mostly multiple times).
Drupal Webform lets you add the Captcha element while creating the web form. Drupal Webform captcha requires you to enable the Captcha module.
Steps to add Captcha in forms:
- Download and enable the Captcha module. You will also need to enable the Image captcha module to get the image option in Captcha.
- Go to Configuration > People > CAPTCHA module settings to configure the captcha module.
- Navigate to Structure > Webforms.
- Click on the build of the form to which the Captcha is required.
- Click on Add element and expand Advanced elements. On expanding, the list of advanced elements can be viewed. Click on Add element of CAPTCHA to add the captcha.
- Clicking on Add element will open a settings window on right. Check on the box Admin mode so that the admin can debug and view the captcha.
- The Challenge type gives you 2 options - Math and Image. You can select any one of your choices. Then click on Save and on Save elements. If you cannot see the image option here, you need to enable the image captcha module.
- Add the field in the content type of the field type Webform and refer to the form for which the captcha is added.
- Now go to Content > Add content > and content type which has a field referred to the form.
- Fill in the title and save the content. Now when you view the content, the form along with the captcha is published. Before clicking on the submit button, the captcha field should be filled, or else the form will not get submitted and gives an alert message.
The use of forms on websites is indispensable today, whether it is for contact or feedback. Building forms in Drupal are now made easy using the Drupal Webform module, which has many significant features and can be customized according to the needs. With Webforms, the forms are more flexible, and functional and can be completely integrated into your Drupal website. We hope this Drupal 9 Webform tutorial was helpful in learning more about this amazing module. Need help in creating intuitive forms using the module? Contact our expert team of Drupal developers now!
Drupal 9 Drupal 9 Module Drupal Development Drupal PlanetLeave us a Comment
Recent Blogs
ImageThe Drupal 9 Webform Module – A Brief Tutorial
ImageHow to React Quickly in Drupal
ImageConfiguring the Drupal 9 Metatag Module - A Brief Guide
Need help in creating intuitive forms in Drupal? TALK TO USFeatured Success Stories
Upgrading and consolidating multiple web properties to offer a coherent digital experience for Physicians Insurance
Upgrading the web presence of IEEE Information Theory Society, the most trusted voice for advanced technology
Great Southern Homes, one of the fastest growing home builders in the United States, sees greater results with Drupal 9
View all Case Studies