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. The Webform module has recently received its stable version for Drupal 8. We will give it an overview and show an example of creating a simple form with the Webform module.
Webform module in Drupal 8: finally stable
The Webform module lets us create any kind of forms from simple to complicated multi-page 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 finally 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.
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 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 a also number of contributed modules that work together with Webform and extend the its capabilities still further: Webform Views, Webform REST, Webform Analysis, Webform Encrypt, Webform Composite Tools, Webform Invitation, CAPTCHA, Honeypot, MailSystem, SMTP, and more.
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 us 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.
Update from 12/2019: new Webform module capabilities
We’ve been describing the module’s version 8.x-5.1 here in February 2019. However, the Webform module development has been very active — it’s already on version 8.x-5.6 and has added some new, interesting things. Among them:
- The Webform module supports 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).
- 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.
- The latest (for now) new feature 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.
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 Drupal team can create you the forms that will work in accordance with all your requirements.