---
title: "A Deep Dive into the Webform Module for Drupal 10"
description: "With over 400K websites using it, the Webform module is easily one of the most popular Drupal modules. Take a deeper look into this amazing module and its features in this article."
url: https://www.specbee.com/blogs/webform-module-drupal-10
type: Article
author: "Ankitha Shetty"
categories: "Code Corner, Drupal Talk"
published: 2023-12-26
updated: 2026-09-18
---

# A Deep Dive into the Webform Module for Drupal 10

The Webform module is the most powerful and flexible form builder and submission manager for Drupal. It gives site builders the power to easily create complex forms instantly. It comes with a certain level of default settings, also letting you customize it as per your requirements.

Check out this amazing blog - [Drupal 9 Webform Module - A Brief Tutorial](https://www.specbee.com/blogs/drupal-9-webform-module) to help you get started with the [Webform module](https://www.drupal.org/project/webform) for your Drupal 9 or 10 website. This will help you understand the basics easily.

The Webform module ships with tons of interesting features! Allow me to present a concise overview of some of the noteworthy features and functionalities that make this module a powerhouse in the world of Drupal.

*This is an updated version of the article last published on 12 October 2021, designed to keep you in the loop with Drupal 10 and its* [*latest developments*](https://www.specbee.com/services/drupal-web-development)*.*

 ![Web_form_module_1](https://www.specbee.com/sites/default/files/styles/large/public/migrated/Web_form_module_1_0.jpg.avif?itok=oUnt-SPX)

 

 ## Altering form & elements

Any form, element and its related settings can be altered by using their respective hooks. Below are few hooks that are available to use and you can find more in the **webform.api.php** file:

- **Form hooks**

 ◦ hook\_webform\_submission\_form\_alter() 
 ◦ Perform alterations before a webform submission form is rendered.

- **Element hooks**

 ◦ hook\_webform\_element\_alter()
 ◦ Alter webform elements.

- **Option hooks**

 ◦ hook\_webform\_options\_alter()
 ◦ Alter webform options.

- **Handler hooks**

 ◦ hook\_webform\_handler\_invoke\_alter()
 ◦ Act on a webform handler when a method is invoked.

- **more hooks…**

 ◦ hook\_webform\_access\_rules\_alter() etc..
 ◦ Alter list of access rules that should be managed on per webform level.

## YAML Source

The Webform module started as a [YAML Form module](https://www.drupal.org/project/yamlform), which allowed people to build forms by writing [YAML](https://en.wikipedia.org/wiki/YAML) markup. At some point, the YAML Form module started to have UI and became the Webform module for Drupal 8.

- YAML provides a simple & easy to learn markup language for building & bulk editing a webform's elements.
- The (View) Source page allows developers to edit a webform's render array using YAML markup. Developers can use the (View) Source page to hand-code webforms to alter a webform's labels quickly, cut-n-paste multiple elements, reorder elements, as well as add custom properties and markup to elements.
- Here’s an example of a Contact form and its corresponding YAML source code:

 ![Contact Form with Drag and Drop UI](https://www.specbee.com/sites/default/files/styles/large/public/migrated/Contact_form_0.png.avif?itok=0L9jG6xP)

 

 A Contact form with drag-n-drop UI

 ![YAML Source Code](https://www.specbee.com/sites/default/files/styles/large/public/migrated/YAML_source_code_0.png.avif?itok=FRs1xavk)

 

 The Contact form’s YAML source code

## Conditional fields

Webform lets you add conditional logic to your elements within your form. Let us consider a small example, wherein we need to conditionally handle the visibility of elements based on the value of another element within the form.

Here’s an example form with two-step fields, **STEP 1** (Radios element) with options ‘Email’ and ‘Mobile Number’. **STEP 2** (Fieldset) with two elements, 'Email' and 'Mobile Number'.

 ![Build Page](https://www.specbee.com/sites/default/files/styles/large/public/migrated/build_page_0.png.avif?itok=Y7aIldjx)

 

 Form Build page

 ![Form View Page](https://www.specbee.com/sites/default/files/styles/large/public/migrated/form_view_page_0.png.avif?itok=lZb7CCuA)

 

 Form View page

In the above example, I would like to show the ‘Email’ field if the ‘Email’ option is chosen in Step 1, else show the ‘Mobile Number’ field if the ‘Mobile Number’ option is chosen in Step 1.

To achieve that, edit your ‘Email’ field, click on the ‘Conditions’ tab, choose the ‘State’ as ‘Visible’ and set the ‘Trigger/Value’ as ‘STEP 1 \[Radios\] value is email’. Similarly, follow the same steps to add conditional logic to your ‘Mobile Number’ field and set the ‘Trigger/Value’ as ‘STEP 1 \[Radios\] value is mobile\_number’. Here’s the final look of the Webform:

 ![Edit Email Element](https://www.specbee.com/sites/default/files/styles/large/public/migrated/edit_email_element_0.png.avif?itok=zswqkktr)

 

 Setting up conditional logic

 ![Step1](https://www.specbee.com/sites/default/files/styles/large/public/migrated/Step1_0.png.avif?itok=VNzKhqoh)

 

 Form when ‘Email’ is chosen on STEP 1

 ![Step 2](https://www.specbee.com/sites/default/files/styles/large/public/migrated/step2_0.png.avif?itok=kgL3yFmu)

 

 Form when ‘Mobile Number’ is chosen on STEP 1

## Custom options properties

Webform lets you add custom option properties to your from elements.

Imagine a scenario where you would want to conditionally handle the options of a radio element based on the value of a different element within the form. How would you do that?

Well, I did not find any way to handle it through the Conditional logic settings from the UI. But there is a provision to set ‘custom options properties’ to your element, wherein you write the required conditional logic targeting your options within the element using the YAML code.

Here is an example, where we can see two radio elements and based on the option I select in the first element, the visibility of the options within the second element should change.

 ![Form Build Page](https://www.specbee.com/sites/default/files/styles/large/public/migrated/form_build_page_0.png.avif?itok=J-5sSNvf)

 

 Form Build page

 ![Custom Option](https://www.specbee.com/sites/default/files/styles/large/public/migrated/Custom_option_0.png.avif?itok=lHpPVtVV)

 

 Form View page before adding any custom options properties:

If ‘Type A’ is chosen, then ‘Option 1’ and ‘Option 2’ should be visible from the second element. Similarly, if ‘Type B’ is chosen, then ‘Option 3’ and ‘Option 4’ should be visible.

To achieve this edit the second element, go to the ‘Advanced’ tab, scroll down to the ‘Options (custom) properties’ sections and write the necessary logic in YAML.

 ![Option Element](https://www.specbee.com/sites/default/files/styles/large/public/migrated/Option_element_0.png.avif?itok=20RpZYCk)

 

  ![Edit option element](https://www.specbee.com/sites/default/files/styles/large/public/migrated/edit_option_element_0.png.avif?itok=PLgmMnfz)

 

 Setting up the options properties

 ![Choose type](https://www.specbee.com/sites/default/files/styles/large/public/migrated/Choose_type_0.png.avif?itok=u_nM3dIH)

 

 Form when ‘Type A’ is chosen

 ![Choose Type B](https://www.specbee.com/sites/default/files/styles/large/public/migrated/Choose_type_b_0.png.avif?itok=bttiGv-i)

 

 Form when ‘Type B’ is chosen

[ ![Get UI UX services package now](https://www.specbee.com/sites/default/files/styles/large/public/migrated/Duck_20Duck_20go_20banner_58.jpg.avif?itok=yQ2YvTq0)

 

 ](https://www.specbee.com/services/drupal-seo)## Webform submission email handlers

- **Email handlers**

Email handlers sends a webform submission via email. To add email handlers to your webform, go to ‘Settings’ and then ‘Emails/Handlers’ tab. Next, click on the ‘Add Email / Add handler’ button.

 ![Email handler](https://www.specbee.com/sites/default/files/styles/large/public/migrated/email_handler_0.png.avif?itok=NBzvLpu0)

 

 Add Email Handler

As shown in the below image, on the ‘General’ tab, add the ‘Title’ and set ‘Send to’ and ‘Send from’ details. Add the message ‘Subject’ and ‘Body ‘ as required and save the configuration form.

 ![Email Confirmation](https://www.specbee.com/sites/default/files/styles/large/public/migrated/email_confirmation_0.png.avif?itok=BUvQ0x-h)

 

  ![Confirmation Handler](https://www.specbee.com/sites/default/files/styles/large/public/migrated/Confirmation_handler_0.png.avif?itok=XsULA4lg)

 

  ![Email Confirmation Handler](https://www.specbee.com/sites/default/files/styles/large/public/migrated/email_confirmation_handler_0.png.avif?itok=70I7ICpM)

 

  ![Message](https://www.specbee.com/sites/default/files/styles/large/public/migrated/Message_0.png.avif?itok=YcChSeHd)

 

  ![Title & Description](https://www.specbee.com/sites/default/files/styles/large/public/migrated/Title_description_0.png.avif?itok=6dQR5REF)

 

 And that’s about it. Your handler gets fired whenever the form is submitted.

- You can also set conditional email handlers to your webform i.e., trigger different email handlers based on the value of certain elements within the form.
- For example, let us consider a ‘Select’ element with values ‘Type 1’ and ‘Type 2’. If the user submits ‘Type 1’, trigger the ‘Email - Type 1’ handler that has set ‘To’ address to ‘user1@gmail.com’. If the user submits ‘Type 2’, trigger the ‘Email - Type 2’ handler that has set ‘To’ address to ‘user2@gmail.com’.
- To add conditional logic to your email handler, create one handler and name it ‘Email - Type 1’. Set ‘To’ address to ‘user1@mail.com’, switch to the ‘Conditions’ Tab, choose the ‘State’ as ‘Visible’ and set the ‘Trigger/Value’ as ‘Select Type \[Select\] value is type\_1’.
- Similarly, create the second handler and name it ‘Email - Type 2’. Set ‘To’ address to ‘user2@gmail.com’, switch to the ‘Conditions’ Tab, choose the ‘State’ as ‘Visible’ and set the ‘Trigger/Value’ as ‘Select Type \[Select\] value is type\_2’.

 ![Email type](https://www.specbee.com/sites/default/files/styles/large/public/migrated/email_type_0.png.avif?itok=ax_cmPMi)

 

 - **Scheduled email handlers**
    - It extends the Webform module's email handler to allow emails to be scheduled. To use this feature, enable the ‘Webform Scheduled Email Handler’ sub-module.
    - To schedule sending an email of the form submissions, click on the ‘Add handler’ button. Select ‘Scheduled Email’ handler here.

 ![Select Handler](https://www.specbee.com/sites/default/files/styles/large/public/migrated/select_handler_0.png.avif?itok=8R4Eurub)

 

 There is only one extra config setting in the ‘Scheduled Email’ handler compared to the normal ‘Email handler’. And that is to add Schedule email date under the General settings tab.

 ![Schedule email Handler](https://www.specbee.com/sites/default/files/styles/large/public/migrated/schedule_email_handler_0.png.avif?itok=vQ9Vdq4v)

 

 Scheduled email handler

Set the date to trigger your handler and when the next cron is run, your email will be sent!

## Generate PDF copies of Webform submission

The webform module lets us download and export webform submissions as PDF documents. It also supports sending these PDF documents as email attachments and customising the templates and CSS of the PDF documents.

How do we get this working? To begin with, you need to enable the **Webform Entity Print (PDF)** submodule (to download and export the PDF documents) and **Webform Entity Print (PDF) Attachment** submodule (to send these PDF documents as email attachments).

Please note: It requires the [Entity Print](https://www.drupal.org/project/entity_print) module to be installed which allows you to print any Drupal entity (Drupal 7, 9 and 10) or View (Drupal 9 and 10 only) to PDF.

**Download the PDF of a single submission**

- Visit your webforms results page, view the submission you want to download and scroll down to click on ‘Download PDF’.

![download pdf of single submission](https://www.specbee.com/sites/default/files/inline-images/download-pdf-single-submission.png)Click on ‘Download PDF’

![downloaded pdf](https://www.specbee.com/sites/default/files/inline-images/downloaded-pdf.png)Downloaded PDF

**Export multiple webform submissions as a PDP document in a zip file**

- Visit your webforms results page, go to the Download exports tab, choose export format as ‘PDF document’ and hit Download.
- You will get all your webform submissions as a PDF in a single \*.tar.gz or \*.zip file.

![Export multiple webform submissions](https://www.specbee.com/sites/default/files/inline-images/export-multiple-webform-submissions.png)Choose Export format as ‘PDF documents

**Customise the templates and CSS of the PDF documents**

- Go to your webforms general settings tab (/admin/structure/webform/manage/{your-webform-name}/settings), and scroll down to the ‘Entity print’ settings section.
- Add necessary header and footer template details (it supports tokens) and some CSS to be shown in your PDF.
    
    ![third party settings](https://www.specbee.com/sites/default/files/inline-images/third-party-settings.png)

Customising your PDF by adding a default header, footer and some CSS

![PDF after customizing](https://www.specbee.com/sites/default/files/inline-images/pdf-after-customizing.png)PDF after customizing

**Attach these PDF documents to your emails**

- Start by adding an element called PDF to your webform. Add the PDF element details like its title, view mode, file name etc and save it.

![attach pdf documents to you email](https://www.specbee.com/sites/default/files/inline-images/add-element.png)Click on ‘Add element’

![add attachment element](https://www.specbee.com/sites/default/files/inline-images/add-attachment-element.png)Add PDF element details

- The PDF element is now added to your results column (Please note: we are not adding it to our form). When you click on it, you will be redirected to your PDF document.

![apply to selected element](https://www.specbee.com/sites/default/files/inline-images/apply-to-selected-element.png)- The next step is to attach it to your emails. For that, go into Settings > Email/Handlers.
- Edit any of your email handlers, check the PDF element and enable ‘Include files as attachments’ and save the handler.

![email notification handler](https://www.specbee.com/sites/default/files/inline-images/email-notification-handler.png)Enable ‘Include files as attachments

- Next time you submit the webform, the PDF will be attached to your email along with webform submission details.

![contact pdf attached email](https://www.specbee.com/sites/default/files/inline-images/contact-pdf-attached-email.png)Contact.pdf is attached in the email attachments

## Finding Help

There are different ways through which you can seek help with the webform module. Here is a list of a few sources:

- Documentation, Cookbook, & Screencasts - https://www.drupal.org/docs/contributed-modules/webform
- Webform Issue Queue - https://www.drupal.org/project/issues/webform
- Drupal Answers - http://drupal.stackexchange.com
- Slack channel - You can always post your queries regarding the Webform module at the #webform channel within the Drupal slack workspace. Anyone from the community, even the module maintainer themselves are always around and are kind enough to guide you with your problems.

A HUGE shoutout to [Jacob Rockowitz](https://www.jrockowitz.com/) for his relentless support towards the Drupal 9/10 Webform module. Webform wouldn't have been what it is now without him.

## Final Thoughts

There’s just so much this versatile Webform module can do that we cannot possibly cover it all in one article. If you love Webforms as much as we do, we’d encourage you to get involved and contribute in any way possible. Looking for professional [Drupal services](https://www.specbee.com/services/drupal-web-development) and expertise to build your next Drupal website with beneficial modules such as this? We would [love to hear](https://www.specbee.com/contact) from you.