The Drupal 8 Webform module is a contributed module and is one of the most powerful and flexible modules in Drupal 8. It is an open source module used for building forms and managing submission. Drupal Webform has also made it to our list of top Drupal modules that you absolutely need for your next Drupal project!
Drupal Webform is a highly versatile module that is used to build forms and extract information from the users in Drupal websites. For example, we can use this module to create surveys, contact forms, feedback forms and much more. After submission, this module will allow to send 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.
Webform Logo derived from Drupal.org/Webform
Getting started with the Drupal 8 Webform module
The Drupal community has given us some phenomenal modules and 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 towards 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 8. 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.“ Read more about Jacob and many more of our Drupal community contributors here.
Now, let’s get started with installing the module and creating Webforms.
Install and enable the Drupal 8 Webform module
Download the Drupal Webform module from https://www.drupal.org/project/webform and enable it.
To enable webform, go to Extend and in the webform category, you will see a webform along with the checkbox. To work with Drupal 8, webforms enable Field API, System module, User module. Without enabling these three modules, the webform cannot be enabled.
There are many options under webform which provide specific functions. Enable them as per the requirement.
Create a new Drupal Webform
To create a new Drupal 8 webform, enable Webform UI and Webform Access. Webform UI provides a good user interface for building / maintaining webforms and Webform Access controls the webform nodes. Enable the Webform Node before enabling the Webform Access. Then goto Structure > Webforms.
Here are some options for webforms.
- In the first tab, Forms, are a list of webforms created. By default, there is a contact form. This is the template provided by the Webform module.
- There are more templates in the second tab Templates.
- In the Submissions tab, we can view the forms submitted by the users.
- Options have a predefined reusable set of values that are available for the radio buttons, checkboxes, and menus.
- There are a few more reusable values in the Add-ons tab.
- In Configurations, general settings of the webforms are provided.
To create a new Webform –
- Click on Add webform.
- On clicking Add Webform a tab opens with title, description, category, and status.
- Add a title to the Webform and a short description about the webform.
- At the end, under Status, there are 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. For example, here the title is ‘Registration’.
Adding Fields to the webform
On clicking Save, a page opens with the title of the webform given (here – Registration).
● To add the fields to the webform click on +Add element.
● On clicking +Add element, there comes a popup with the list of fields that can be used in the webform.
To preview the elements, click on Show Preview on the right top. To add the element, click on the Add element of the respective element. On clicking, the popup opens on the right side of the page.
Here there are options for editing the title name and many advanced settings for the field. After making all the settings changes, click on the Save button in the end. Click on the checkbox under required for all the required 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 on 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.
- List of all the submitted forms under the submission tab.
- Submitted results can be downloaded in four formats -Delimited text, HTML tables, JSON document or Yaml document under the Download tab.
- 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 webform can be downloaded from the Export tab. The configuration is displayed and can be downloaded by clicking the Download button on the end of the page. The configuration 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 Webform 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 the content to the webform, goto Content > Add content > Webform. As mentioned, there will be a title and body. There is a dropdown labeled Webform, which has the Title names of all the web forms created.
Next to that there is another option called ‘Webform settings’.
In Status, there are three options, Open(to keep open to the users), Closed(to close the form to the users) and Scheduled(it will provide the 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 Browse available tokens. Examples to write the token can be viewed by clicking on the Example link. And can view all the submitted forms under the Result tab.
Adding the Drupal 8 Webform as a Field in Content Types
● To add webform in content type goto Structure > Content types >Manage fields of the content type for which the form is required.
● Click on the Add field. In Add a new field select ‘Webform’ under the ‘References’ section, give a label to that field and click ‘Save and Continue’.
● In Field settings, can give the number of values allowed to the field and click on ‘Save field settings’.
● You can select the default form from default value or else click on ‘Save settings’.
● Now go to Contents > Add content and select the content type which has a field referred 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 in Drupal Webforms
You must have seen Captcha being widely used in many websites. Before submitting a form, it provides a question and asks for a response from the user. This prevents the bots to overload the servers by making many of form submissions and email submissions.
Drupal Webforms lets you add the Captcha element while creating the web form. Drupal webform captcha requires you to enable the Captcha module.
Steps to add Drupal webform Captcha in forms:
● Download and enable captcha module from www.drupal.org/project/captcha.
● Navigate to Structure > Webforms.
● Click on the build of the form to which captcha is required.
● Click on Add element and expand Advanced elements. By expanding the list of the 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 admin can debug and view the captcha.
● And in the Challenge type, we have 2 options -Math and Image. You can select any one of your choices. Then click on Save and on Save elements.
● 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 the title and save the content. When you view the content the form along with the captcha is published. Before checking the submit button the captcha field should be filled, else the form will not get submitted and gives the alert message.
Advantages of Drupal 8 Webforms
● Drupal Webform module is open source, which means it is free and you only need time to set up and configure the forms.
● These Webforms are flexible and allows for customization of fields used in the forms.
● It gives many options in a single installation like sending notifications and mails to the user and the administrator.
● It is 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.
