Using Webform in Drupal CMS

Webform is the most popular module for building forms in Drupal. You can use it for a simple contact form or for a long form with conditional logic, file uploads, and email alerts. Either way, you build the whole thing from the admin interface without writing code.

In the video above, you will learn how to build a form with Webform in Drupal CMS. You will create a Customer form, add conditional logic, send a confirmation email, split the form into pages, view submissions, and embed the form on a Drupal Canvas page.

What’s Webform

Webform is a form builder. You add elements such as text fields, email fields, and select menus, and Webform stores the submissions, sends the emails, and shows the results, all from one place. It also handles file uploads, multi-page wizards, computed values, and add-ons for things like payments.

Webform ships with Drupal CMS through the Haven recipe (and many others), so you don’t need to install anything. Two forms are set up out of the box: a newsletter signup form and a contact form. You can see the newsletter form in the site footer.

To open the webform admin page:

1. Go to Structure.
2. Click Webforms.

If you do not see this admin area, turn on the Webform UI module.

The listing shows all of your forms. The operations column lets you edit, duplicate, or delete each one.

Creating a Form

A form is made up of elements. An element is a single part of the form, such as a text field or a select menu. It is not the same thing as a Drupal field. A Webform element only lives inside the form and does not add storage to a content type.

To create a new form:

1. Click Add webform.
2. Give it a name, such as Customer.
3. Click Save.

You build the form on the Build tab. To add an element:

1. Click Add element.
2. Pick the element you want from the list.
3. Set a title.
4. Click Save.

Webform shows a preview of each element before you add it, which makes it easy to find the right one.

The Customer form uses five elements.

• Full name is a name element that holds a first and last name in one field.
• Email is an email element that is set to required.
• Message is a textarea for a longer reply.
• Tech is a select menu with the options Drupal, WordPress, React, and Astro.
• Drupal version is a text field that only shows when Tech is set to Drupal.

Every element has its own settings. You can set a default value, mark it as required, add help text, and add basic validation. You can also try the form at any point with the Test tab, which fills in sample data for you.

Adding Conditional Logic

Conditional logic lets you show or hide an element based on what the user picks earlier in the form. In the Customer form, the Drupal version field only appears when the user selects Drupal in the Tech menu.

To set this up:

1. Open the Drupal version element.
2. Go to the Conditions tab.
3. Add a state and set it to Visible.
4. Set the trigger to the Tech element with the value Drupal.
5. Add a second state and set it to Required with the same trigger.
6. Click Save.

Now the Drupal version field only shows, and is only required, when the user picks Drupal. There is no code involved. Webform uses the Drupal States API behind the scenes and builds the rules for you, and you can use the same approach to hide, enable, or disable other elements too.

If you want to see what Webform creates, open the Source tab on the Build screen. The source shows the whole form as YAML, including the conditional rules.

Confirmation Messages and Emails

When someone submits the form you can show a confirmation message, send an email, or both.

The confirmation controls what the user sees after they submit, and you set it under Settings > Confirmation. Webform gives you a few types: an inline message on the same page, a redirect to another page, or a separate confirmation page. Pick the one that suits your form.

To add a confirmation email:

1. Go to Settings > Emails / Handlers.
2. Click Add email.
3. Set the To address to the form’s Email element.
4. Leave the subject and body on their default values, or write your own.
5. Click Save.

The To address uses a token, so the email goes to the person who filled out the form.

You can add more than one handler if you need to. A common setup is one email to the admin and one to the user.

If you are using DDEV to run Drupal CMS, you can view outgoing emails in Mailpit. It captures every email your site sends, so you can read them without sending anything for real.

Building a Multi-Page Form

A long form is much easier to fill out when you break it into steps. Webform calls these wizard pages. To turn the Customer form into a wizard, add a wizard page with the Add page button and move your elements under it.

The Customer form has three pages: Full name details, Message details, and Tech details. Webform then shows a progress bar at the top of the form so the user can see how far along they are. You can also change the text on the previous, next, and submit buttons to match your site.

Viewing Submissions

Every time someone submits the form, Webform saves the data for you.

To view submissions:

1. Open the form from Structure > Webforms.
2. Click the Results tab.

The Results tab shows a table of every submission. You can open a single submission to read the full details, download or delete submissions, and customize the columns so the table shows only the data you care about.

If you only want to send emails and not store the data, you can turn results off in the settings.

Embedding a Form on a Canvas Page

So far the form lives on its own page. You can also place it on any page you build with Drupal Canvas. Every Webform is available as a block, and Canvas turns blocks into components.

To add the form to a Canvas page:

1. Edit the page in Canvas.
2. Add the Webform block.
3. Choose the Customer form.

In the video we add it to a page called Customer Details. We place it inside a group so we can set the layout and add a background.

Watch out for Ajax. If the form has Ajax turned on, it can break once you embed it in a Canvas page, and the submit button stops working as expected. Turn Ajax off under Settings > Form.

It also helps to use an inline confirmation so the message appears inside the page after the user submits, instead of sending them away from your Canvas layout.

Once you know your way around the Build and Settings tabs, you can build almost any form you need without touching code. Open Structure > Webforms and create a form of your own.

Let me know in the comments how are you using Webform.