Getting Started with Webform in Drupal (2024)

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

Webform is a Drupal module that allows you to create forms directly in Drupal without using a 3rd party service.

It can be used to create basic “Contact Us” and complex application forms with custom field logic and integration.

In this getting started guide you’ll learn how to:

  1. Create a form
  2. Add elements to form
  3. Customize form with conditional logic
  4. Embed the form
  5. Send submissions to Google Sheets

This tutorial accompanies the video above.

Getting Started

Before we begin download Webform by running this Composer comman:

composer require 'drupal/webform:^6.2'

Then go to Extend, search for Webform and enable Webform and Webform UI.

Create Form

1. Go to Structure, Webforms and click on “Add webform”.

2. Enter a form title and click on Save.

Create Form Element

Fields in Webform are called elements.

1. Click on “Add element” from the Build page on your form.

2. Search for an element and click on “Add element”.

3. Enter in a Title and adjust the key as required.

4. Scroll down to the bottom and click on Save.

5. Go and create the following elements.

LabelKeyTypeRequired
First namefirst_nameText fieldYes
Last namelast_nameText fieldYes
Project detailsproject_detailsTextareaYes
Technology
– Drupal
– WordPress
– React
technologySelectNo
Hosting
– AWS
– Google Cloud
hostingSelect otherNo

Float Elements using Flexbox

Elements can be floated next to each other, which is an excellent way of reducing the height of the form.

Let’s float first and last name on the same row.

1. Click on “Add layout”.

2. Add “full_name_flexbox” into Key and adjust the “Align items”.

3. Then click on Save.

4. Now the two elements should be floated on the same row.

Organize Elements using Fieldset

Another way to reduce a form’s size is to group elements using a fieldset.

1. Click on “Add element” and find Fieldset.

2. Enter Project as the Title and click on Save.

3. Indent elements below the fieldset.

4. On the front end you should see all of your elements wrapped with a fieldset.

Use Predefined Option in Select Element

Learn more about predefined options by reading “How to Use Webform Predefined Options in Drupal”.

Learn how to use terms as options by reading “Use Taxonomy Terms as Webform Options in Drupal”.

Webform ships with predefined options that can be added to select, checkboxes and radio buttons elements.

You can see all available options by going to Structure, Webforms, and then clicking on the Options tab.

We’ll create an Industry select element that will use the Industry options.

1. Click “Add element” and add Industry as the Title.

2. From Options select Industry.

3. Click on Save.

4. If you expand the select element you should see all the industries.

Conditional Elements

> Learn how to create advanced conditional logic using regex in “Using Pattern Trigger (Regex) in Webform Conditional Logic in Drupal”.

Webform allows you to display elements and even make them required conditionally.

Let’s create a new element called Version, which will only appear if Drupal is selected from the Technology dropdown.

1. Create a Version text field element on the form.

2. Edit the Version element and click on Conditions.

3. From State select Visible.

4. Below select “Technology [Select]”, then “Value is” and choose Drupal as the value.

5. The Version element will only be visible if Drupal is selected from the Technology dropdown

Convert Form into Pages (Form Wizard)

Webforms can be broken down into separate pages or as a form wizard.

1. Click “Add page” and create an element for each page.

2. Indent the element below the page element for it to appear on the page.

Do this to all your pages.

4. Save the page and test the form.

You should now see a progress page at the top of the form.

Add Preview Step

> Check out our detailed tutorial on “Add Preview Page to Forms using Webform in Drupal”

When adding pages to a form, a preview step must be added. This way the user can preview what will be submitted.

1. Go to Settings, Form.

2. Scroll down to “Form preview settings” and select Optional or Required.

3. An extra step will be added to the form wizard.

Add Page Tracking

When navigating through each step or page the URL stays the same.

This makes it hard to track users as they progress through the form.

Webform allows you to add a tracking parameter.

1. Go to Settings, Form and scroll down to “Form wizard settings” and choose an option from “Track wizard progress in the URL by”.

2. Select “Page name” and click on Save.

3. Test the form and you should see a page parameter.

Turn on AJAX

When you navigate between pages the browser refreshes.

Webform has an option where you can turn on AJAX, meaning the form will just update without refreshing the whole page.

1. Go to Setting, General and scroll down to “Ajax settings”.

2. Check “Use Ajax” and click on Save.

3. If you use the form, it will update without refreshing the browser.

Change Button Labels

Button labels can be changed from a few sections but the easiest place to change them is by clicking on Customize on the “Submit button(s)” element.

You can access the element from the build page

When you click on Customize you can change the label, CSS classes and styles to all sorts of buttons.

View Submissions

Submissions can be viewed, downloaded or cleared by clicking the Results tab on a form.

Download Submissions

If you need to export the submissions into a specific format just click Download, select the export format, and click Download.

Clear Submissions

If you need to clear or delete the submissions just click on Clear, select the “Yes” checkbox and click on Clear.

Note: This will permanently delete the submissions.

View all Submissions

To view submissions click on Submissions.

Submissions can be found and filtered using the “Filter submissions” fieldset.

You can bulk select submissions by selecting them and running an action.

View Individual Submission

You can view and edit individual submissions by clicking on the submission number.

Submission data can be viewed in multiple formats: HTML, table, plain text and in a YAML format.

Submission Table

The columns in the submission table can be customized, this allows you to show or hide elements on the page.

1. Click on the Customize button.

Customize the table using the modal pop-up.

Customize Confirmation Step

Weform allows you to customize the confirmation type when a submission has been added.

Go to Settings, Confirmation to see all the different confirmation types.

You can have a confirmation message displayed inline, on a specific page, or a modal pop-up, or you can redirect the user to a different URL.

Change Confirmation Message

You can customize the confirmation message by scrolling down to the “Confirmation settings” section and adding text or tokens into the confirmation text area.

NOTE: Make sure you have downloaded and installed the Token module.

Redirect to Confirmation Page

A typical webform workflow is redirecting the user to a different URL.

1. Go to Settings, Confirmation and choose “URL with message” from Confirmation type.

2. Create a basic page in Drupal.

3. Go back to Settings, Confirmation, scroll down to “Confirmation URL” and add in a URL into “Confirmation URL” and click Save

4. When the user submits the form they will be redirected to the new confirmation page.

Access Webform

The default way to access a webform is via its “/form” page which will be “/form/machine_name”.

The URL can be changed by going to Settings, General and then scrolling down to “URL path settings”.

Embed Form using Blocks

Forms can be embedded into a page using the Webform block.

1. Go to Structure, “Block layout,” and click on “Place block” in any region.

2. Search for Webform and click on “Place block”.

3. Select your form from the Webform autocomplete and click Save block.

4. You should see the form on the frontend.

Understanding the “Submitted to” on Submissions

Webform tracks which page the submission came from by storing the value in “Submitted to” column. This is useful for tracking on which page the submission came from.

Embed Form using Webform Field

Forms can be embedded into content types, or any fieldable entity, by using the Webform field.

Add the Webform field to a content type or a fieldable entity.

Select your form from the Webform dropdown.

Display Webform in a Dialog Box

> Learn in more detail how to “Open Webforms using Dialog Box in Drupal”.

Webforms can be displayed in a pop-up or dialog box.

1. Go to Structure, Webforms, Configuration, Forms and scroll down to “Form dialog settings” and check “Enable site-wide dialog support”.

2. Go to Settings, General (in the form) and scroll down to “Dialog settings”.

Copy the example URL and paste it into the editor.

3. You may need to adjust your text format to handle classes on <a> elements.

Edit your text format and add class into “<a>”.

4. If you paste the example markup you should see the webform in a dialog box.

Send Emails using Handler

> Need to integrate Webform with Mailchimp? Then look at “Send Webform Submissions to Mailchimp in Drupal”.

Webform allows you to send off an email when a form has been submitted by creating an email handler.

Go to Settings, “Email/Handers” to create an email handler. Click on “Add email” to configure the email details.

From the right-hand side you can configure the “To” and “From” of the email, the subject and the email body.

NOTE: Make sure you have Token installed as it’s used to populate the email body.

A handler can be duplicated, disabled and deleted by clicking on the dropdown in the Operations column.

Integrate Webform with 3rd Party Services

Webform can easily be integrated with 3rd party platforms using a service such as Make or Zapier.

From a Webform standpoint, all that is required is to use the remote post handler to send the submission data to a remote webhook managed by one of these services.

If you need a free option, I recommend using Make, as the webhook functionality is available on their free plan.

We’ll use Make to pass submission data from Drupal to Google Sheets.

Create a scenario on Make

1. Click on “Open Scenario Builder”.

2. Click on the center + and add Webhooks.

3. Click on “Custom webhook” trigger.

4. Click “Create a webhook”, enter a name in “Webhook name” and click on Save.

5. Copy the generated webhook address.

Add Webhook to Remote Handler

Jump back into Webform.

1. Go to Settings, “Email/Handers” to create a remote handler. Click “Add handler” and add the “Remote post” handler.

2. Scroll down to “Completed URL” and paste the webhook address from Make.

3. Submit the form so Make can determine the structure of the incoming data and go back to Make.

You should see “Successfully determined”. This means Make can receive the remote post.

Connect Google Sheets

Now that the scenario receives webhooks, we can integrate with Google Sheets.

1. Click on a + and search for “Google sheets”, then add the “Add a row” action.

2. Connect Make to your Google account, create a sheet, and copy the ID.

Paste the ID into “Spreadsheet ID”

Example Google sheet.

3. Map the fields by clicking and dragging.

4. Save the scenario.

And enable the scenario.

5. Submit the webform; you should see the submission in Google Sheets.

View Logged Requests in Make

You can view a history of all the requests going through Make. This is a great way to debug issues if submissions aren’t getting sent to Google Sheets.

Click on the Scenario, then click on the History tab.

Click on Details.

Then on the right side you can see, in more detail, what’s been received by the webhook and sent to Google Sheets.

Here’s a webhook example.

Spam Protection

Don’t forget about spam protection.

Any publicly accessible form will get hit by spam.

Go to Structure, Webforms, “Add-ons” and find the “SPAM Protection” section to see all the recommended modules for handling spam in webform.

Summary

I hope you better understand how to create and manage webform in Drupal after watching the video above.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top