Various forms are the heart of website’s interaction with the user. They are vital for usability, conversions, marketing analytics, and more. So form building tools are in demand — the Drupal Webform module ranks 7th on the 42,000+ list of contributed modules, which makes it one of the most important tools in Drupal development. We will give it an overview and show an example of creating a simple form with the Webform module.
An overview of the Webform module in Drupal 8
The Webform module lets us create any kind of forms, from simple to complicated multipage ones. It also adds settings and features to them like:
- statistics collection
- email notifications
- confirmations
- data export in various formats
- fine-tuned access
- conditional logic
- filtering and sorting
- pushing results to CRM
- downloading results as CSV
- and more.
The stable version for Drupal 8 arrived on December 25, 2018. Drupal creator Dries Buytaert congratulated the Webform module creator Jacob Rockowitz via Twitter and called the release a big milestone.
The Webform ecosystem of modules in Drupal 8
The Webform module for Drupal 8 is a complex module with 20 submodules that demonstrate its varied capabilities. The minimum ones to enable are Webform and Webform UI modules.
There is also a number of contributed modules that work together with Webform and extend its capabilities still further: Webform Views, Webform REST, Webform Analysis, Webform Encrypt, Webform Composite Tools, Webform Invitation, CAPTCHA, Honeypot, MailSystem, SMTP, and more.
Key special features of the Webform module in Drupal 8
Defining forms in a YAML file or admin interface
One of the most remarkable new features of Webform module in Drupal 8 is the ability to define a form in a YAML file. Webform module creator Jacob Rockowitz also built the YAML Form module specifically for Drupal 8. As of Webform 8.x-5.x, the YAML Form merged into Webform. So developers now can go to the YAML file by clicking the “Source” tab.
But there is also a user interface for form creation that is intuitively understandable even for website administrators. The admin dashboard contains examples and videos, as well as a built-in contact form.
The support for submission limits and option limits
The module keeps developing and getting new powerful features for your website. One of them is that the Webform module started supporting submission and option limits. The module’s creator Jacob Rockowitz dedicated a blog post to this.
- You can specify how many submissions are allowed per webform, source entity, or user. When the number is exceeded, it shows a custom message.
- Webform also allows you to limit the allowed number of submissions per element’s option (for example, in a select menu, a checkbox, and so on).
HTML5 and SVG support
- The Webform module can now support the creation of custom elements using HTML5 and SVG markup. As Jacob Rockowitz explained in the post, sometimes end-users need an interactive visual mechanism that would let them select a complex option (for example, a map location). This is where HTML5 and SVG come in, allowing developers to create visually rich and interactive elements.
Integration with the Group module
- One of the latest features is the integration of the Webform module with the Group module. The Group module allows you to create user groups with various levels of membership. Now, on the webform access tabs, you will be able to assign permissions to user groups that apply to all members of the group.
Example: creating a simple webform with the Webform 8.x-5.1 module
We will create a feedback form for customers from scratch. With the Webform and Webform UI modules enabled, we go to Structure — Webforms, click “Add webform," name “Let us know your thoughts," and save it.
The form then needs to be completed with fields that are called “elements” in Webform. The “Add element” button leads us to the list of 60+ available fields, both simple and complex.
We will need a field for the customer’s name. For this purpose, there is a complex “name” element with sub-elements (First name, Last name etc.) that can be checked or unchecked to be included in the form or not.
If no complex name structure is needed, we can use a simple “Text field” element for the name. Let’s call it “Your name (optional)” in the “Title.”
For the email field, we select an “Email” element and add a placeholder for email addresses
An element of “Checkboxes” type will let customers check some options. For our feedback form, we list the company’s services as “option values”.
To let customers give their votes, we will use an element of the “Rating” type and set the value range from 1 to 10.
A “Text area” element will host customers’ comments.
On the list of all fields for our form, we can drag and drop the fields to change their order, or check them to quickly make them required/optional.
Let’s choose where the submitted forms will go. On the form’s dashboard, we select Settings — Emails/Handlers and click “Add email.” There, we configure the “sent to” email address (in our case, it’s the default [site:mail] is OK). We also add a custom subject, “You received a new form submission.”
The “View” tab takes us to our form on the website. If we submit something and check the admin email, we see new messages about form submissions.
Let’s create the forms your Drupal website needs
This was just a very simple form example where we have not even touched advanced options — conditional logic, access, submission handling, JS effects, and so on. The Webform module in Drupal 8 has unlimited capabilities, and our website development company can create you the forms that will work in accordance with all your requirements.