Drupal 8 Webform Module: How to Build and Customize Powerful Forms (2023)

Drupal 8 Webform Module: How to Build and Customize Powerful Forms (1)

... easily adaptable, content-rich forms that can be maintained” I should have added, right? Creating "just" forms and surveys in Drupal 8 is not a real challenge (for that you always have the Contact module "up your sleeve").Creating robust web forms that are "customizable" and, moreover, forms that even editors andfearscan tweak and website builders can create directly in the user interface, that's a real challenge!We will be putting the Drupal 8 Webform module to the test in this tutorial here!

Introducing: Drupal 8 Webform module, once a YAML form!

That's right, Webform is a reworked version of the YAML form for Drupal 8.

Because the YAML form was so "developer-oriented" and therefore not "ideal" for a form developer (creating and editing forms used to be the sole job of developers; they would "get their hands dirty" in the YAML source code),a new "builder" and submission manager for Drupal 8 was much needed.

One that would also empower package and theme builders to easily create and customize powerful forms!

(Video) How to Create Forms using Webform and Contact in Drupal 8

And so,Web formfor Drupal 8creating. Suitable for creating basic and multi-page, highly customizable forms, it:

  • equipped himself withuser friendly user interface
  • no longer restricts the user (be it a developer or package builder) to writing custom code whenever some "tweaking" needs to be done
  • comes with multiple pre-built functions

Now let's go through some of its main use cases:

  1. To create a completely new form or duplicate an existing form template
  2. To collect and manage submissions
  3. To publish newly created forms as nodes, pages or blocks
  4. To view online applications
  5. To send confirmations and notifications by email

Webform, the native tool for creating forms in Drupal, vsWeb formfor Drupal 8

Has Drupal 8 made any changes to this long-standing Drupal module?", you may be wondering now.

It certainly has!” Take for example the fact that:

  • it comes with a completely different codebase
  • its approach to creating forms is different from what you may already be familiar with from Drupal 7

And there's more! More changes applied to the Drupal 8 Webform module to meet some "strict" needs that a YAML form or contact module could not meet (eg that website builders should be able to easily create forms without entering source code or need to add more APIs):

  • has an extended core API (plugins, configuration entities, FAPI, etc.) that enriches its "collection" of features
  • allows you, the user (whether you areDrupal developerin Canada or website builder) to engage in endless refactoring, writing multiple tests, OO pattern design, etc.

The point: by far the most important 2 changes made toWeb formfor Drupal 8are a custom UI (which website builders can now use to create new forms) and an extended API that powers a multitude of "customization scenarios".

In other words: It's true that you get a new form "in the blink of an eye" with the Contact module, but it's the user-friendly form you get when using the Drupal 8 version of Webforms. Think long term!

Drupal 8 Webform module: Who is it for?

Who will be most excited about this new version of Webform?How do its new features meet the needs of each "role" within the company?

  • programmers: quickly and easily create and edit forms, directly in YAML source code
  • site builders: they are authorized to create any type of web forms and customize them by choosing from all the form elements made available to them, directly in the user interface of the module
  • fears: they can style form layouts and elements to their liking
  • website/company owners: they benefit from the fact that their teams are enabled to create/edit forms much faster and more cost-effectively; in addition, they also face a "wealth" of new opportunities to build rich content patterns that easily integrate with multiple APIs and systems

Building powerful, responsive forms using the Drupal 8 Webform module

1. Install the module(s)

First things first: check the "Webform" module from the list of modules that opens on your screen, along with the "Webform UI" module (highly recommended, especially if this is the first "test drive" you run the Drupal 8 Webform module, to check Webform Templates, Webform Demo: ApplicationEvaluation System and Webform Examples modules, too)

(Video) Webform Custom Options Elements

2. Access the web form

To goStructure>Web form

There you have access to all web forms on your Drupal site. For now you only have a basic email "Contact” web form. Click!

3. Build your new form

Just press "+ AddWeb form” and enter a name for it in the popup that opens!

4. Add form elements

Note: in this Drupal 8 form builder, "form fields" are called "shapes elements”.

So let's add some fields to oursnewly created web form: click on "+ Add items button”!

Drupal 8 Webform Module: How to Build and Customize Powerful Forms (2)

From the newly opened pop-up window, freely select the elements with which you want to "fill" your web form: name, address, phone, password, e-mail, name, etc.

Note: the "Name" field is actually a "collection of predefined fields", so expect to be asked to go through a separate round of field selection for this particular form element: middle, first, last, suffix, degree, etc.

Once you've added all the planned elements/fields to your new form, just… submit your form. Simply!

(Video) Creating Web Forms In Drupal 8: Contact Module & Webform Module Tutorial

5. Add more pages to your form

Go back to the contact form and press "+ Add page" this time.

Drupal 8 Webform Module: How to Build and Customize Powerful Forms (3)

This will instantly create a page break in your web form (adding the necessary navigation to it as well).

once in "Add item” in the wizard page popup, simply select the fields you want to appear on each of your form pages: name details, contact details, etc.

Note: just drag in specific fields, from those shown to you, and you'll instantly add them to a specific page in your web form!

6. Use conditions to show/hide fields

Now, this is where (much of) the Drupal 8 Webform module "magic" comes from: you are no longer limited to running custom JavaScript code if you want to conditionally display certain fields on your web form!

It's nothing more than ready-made custom logic that you need to add to your form!

Once again go to the contact form and click on "edit” next to that specific field that you want to conditionally display in your form (it could be an email address or a phone number, etc.). Let's say it's "E-mail" the field you want to edit!

  1. u "Edit emailElement" popup screen just scroll down to "Conditional logic” part of page i
  2. Select your form element "state” (visible, invisible, disabled, required, etc.)
  3. Choose your “Element/Selector” from the adjacent drop-down menu (e.g. “Contact mode (Radio)”
  4. Select "Trigger" from the following drop-down menu (eg "The value is")
  5. Enter your email in the field "Value” card
  6. hit "Save

Note: try a "test scenario" where your form alternately displays a phone number field and an email field!

(Video) Building forms & templates

7. "Play" with the form settings

Another great thing about the Drupal 8 Webform module, which contributes to its growing popularity, is itsa large number of settings options!

And there are certainly... A LOT! It is available for you to dig through and try.

Just click on "settings” menu tab at the top of your contact form page (right after the “Source (YAML)” menu tab) and then… feel free to “play around” and customize the look of your form to your liking!

Warning: remember to always test new form settings locally first!

8. Add an email notification to your form

Let's imagine this scenario here: you've just built your new form, using the Drupal 8 Webform module, fully customized it, andnow you want to add an email notification to it too!

How do you do it?

Go to "Emails/Handlers” menu tab this time (it's right next to the “Access"menu tab) and in "Add email handler” popup you:

  1. specify (from the "To email" drop-down menu) that the notification should be sent to your company's email
  2. enter the text of your email
  3. edit the item
  4. click "Save

hit "Save handlers”, too, and you're done!

Of course, a list of customizations and tweaks that you can get involved in, as well as youbuild your form with Webformfor Drupal 8, it's almost infinite. And that is the "beauty" of this module: you get all the tools you need to customize your web form right out of the box!

(Video) Using Webform in Drupal 8, 1.2: Create a Form

there is ano need to write custom codeto make your form look and work exactly the way you want it to!

  • Drupal 8 modul Webform
  • how to build forms in Drupal 8
  • Drupal 8 form builder


Drupal 8 Webform Module: How to Build and Customize Powerful Forms? ›

Edit a draft of an webform: From the upper user menu band, select 'My Account' and then click 'View profile'. Click 'Edit' on the webform you want to edit under the 'Drafts' section of this page.

How do I edit a webform in Drupal? ›

Edit a draft of an webform: From the upper user menu band, select 'My Account' and then click 'View profile'. Click 'Edit' on the webform you want to edit under the 'Drafts' section of this page.

Which module enables and provides flexible and powerful web forms solution? ›

The Group module is a very powerful and flexible solution that requires a site builder to understand the concept of group types, roles, members, and content.

How do I create a custom config form in Drupal 8? ›

Step by step guide to creating an admin form in Drupal 8
  1. Step 1: Module setup. Create the module folder. ...
  2. Step 2: Create form. There are a few parts to creating an admin form: ...
  3. Step 2: Save form data. The submitForm() method. ...
  4. Step 3: Access the form. The route. ...
  5. Step 4: use the form data.

How to create custom form in Drupal 8 step by step? ›

How to create a custom form and submit data in to database in Drupal 8 and 9
  1. Step1 – Create table schema in *. install file. Create a dn_students. ...
  2. Step 2 – Create page path and form mapping in *. routing. yml. ...
  3. Step 3 – Create a form php file in path /src/Form. Create StudentForm.php file in module path /src/Form.
Jun 13, 2021

How do I add a field in Drupal webform? ›

Adding the Drupal 9 Webform as a Field in Content Types
  1. Go to Structure > Content types > Manage fields of the content type for which the form is required.
  2. Click on Add field. ...
  3. Within Field settings, you can give the number of values allowed to the field and click on 'Save field settings'.

What is the most widely used form control in a web form? ›

The most common form field used in designing Web forms is the: text box.

What are the elements of Webform in Drupal? ›

Every form element available in Drupal is supported by the Webform module. Form elements include: Basic HTML: Textfield, Textareas, Checkboxes, Radios, Select menu, Password, and more... Advanced HTML5: Email, Url, Number, Telephone, Date, Number, Range, and more...

How do I send an email as HTML in Drupal Webform? ›

In your webform, go to settings-> Email/handlers -> Advanced tab. Make sure "Send email as HTML" is checked.

How do I create a custom block from a custom form in Drupal 8? ›

Go to admin -> structure -> block layout -> custom block library. Click the 'block types' tab. Once here, click on the 'Add custom block type' button. Enter block label and description.

How to add CSS to custom form in Drupal 8? ›

One way to do it is to:
  1. Add libraries to block_header.info.yml file in your module: libraries: - block_header/block_header.
  2. Create block_header.libraries.yml file and add: block_header: version: 1. ...
  3. Place css file you want to attach to css/block_header.css.
  4. Include css to custom form statement.
Jan 12, 2018

How to create custom entity in Drupal 8 programmatically? ›

Creating a Custom Entity using Drupal Console
  1. Navigate to the root directory of your Drupal site. ...
  2. Generate module boilerplate using Drupal Console. ...
  3. Answer a series of questions generated by the module generator. ...
  4. Generate custom entity using Drupal Console. ...
  5. Answer a series of questions generated by the entity generator.
Apr 19, 2018

How do I add a custom module in Drupal 8? ›

Here are the steps to create a custom module in Drupal 8:
  1. Step 1: File Structure. In Drupal 8, we should keep the custom or contributed modules under modules folder in the root directory. ...
  2. Step 2: Create . info. ...
  3. Step 3: Creating . routing. ...
  4. Step 4: Create Route Controller Class. ...
  5. Step 5: Creating .module and hook_menu()

How do I add a class to a Form in Drupal 8? ›

To add multiple classes to an element, create an array with all of the class names. To create an array in Twig, use the set tag followed by the name of the array. And then pass that array to the attributes. addClass() function.

What is the alternative to webform? ›

  • Google Forms. Free • Proprietary. Survey Creator. ...
  • LimeSurvey. Freemium • Open Source. Survey Creator. ...
  • Nextcloud Forms. Free • Open Source. Survey Creator. ...
  • Typeform. Freemium • Proprietary. ...
  • Microsoft Forms. Paid • Proprietary. ...
  • Nextcloud Polls. Free • Open Source. ...
  • Tally Forms. Freemium • Proprietary. ...
  • OhMyForm. Free • Open Source.
May 17, 2023

How do I edit a custom form? ›

Start editing a custom form
  1. Click the Main Menu icon in the upper-right corner of Adobe Workfront, then click Setup .
  2. Click Custom Forms in the left panel. ...
  3. Select the custom form you want to edit, then click Edit.

How do I add a master page to a webform? ›

Right click on the project->Add->New item (shown in the picture), Select Web form with the master page. After clicking on that, add the button Window, open the selected masterpage->site1. master and click OK.

How do I add custom validation to a Webform element? ›

How to add custom validation to a Webform element?
  1. First, add a hook_webform_element_alter() use Drupal\Core\Form\FormStateInterface; /** * Implements hook_webform_element_alter(). ...
  2. Now we have to implement the callback method validate() .
Oct 7, 2021

How do I create a custom field type in Drupal? ›

  1. Step 1: Override FieldItemBase::defaultFieldSettings() ...
  2. Step 2: Create the configuration schema for the settings you've created. ...
  3. Step 3: Create a form to allow users to change the settings.
Jan 4, 2023

How do I add a custom field? ›

Create a custom field
  1. In Grid view, select Add column > New field.
  2. Choose a field Type: Important: A custom field's type cannot be changed after it's created. If a custom field is the wrong type, delete the field, then create it again using the correct type.
  3. Enter a Field name, then select Create.

What is the difference between form and user control form? ›

User controls are a way of making a custom, reusable component. A user control can contain other controls but must be hosted by a form. Windows forms are the container for controls, including user controls. While it contains many similar attributes as a user control, it's primary purpose is to host controls.

What are dynamic web forms? ›

Dynamic forms are forms that change in real-time as people fill them out. They guide the user through the steps required to complete a form. Dynamic form designers can create forms that are data-driven and responsive to user inputs.

Which are the 3 types of text input controls used in forms? ›

Text Input Controls
  • Single-line text input controls − This control is used for items that require only one line of user input, such as search boxes or names. ...
  • Password input controls − This is also a single-line text input but it masks the character as soon as a user enters it.

How to export data from Webform in Drupal? ›

Export your results as an HTML table
  1. Navigate to your webform through Manage » Structure » Webform. ...
  2. In your webform's dashboard, click on the Results tab.
  3. In the Results submenu options, click on the Download link.
  4. In the FORMAT OPTIONS section: ...
  5. In the DOWNLOAD OPTIONS section: ...
  6. Click the Download button to finish.
Nov 15, 2022

What is Webform module in Drupal? ›

The Webform module is a powerful and flexible Open Source form builder and submission manager for Drupal 8. The Webform module for Drupal provides all the features expected from an enterprise proprietary form builder combined with the flexibility and openness of Drupal.

What are the components of Webform? ›

Web Form - Component Types
  • Commerce. An e-commerce component. ...
  • Date. Used to collect date information from the user, possibly a birth date. ...
  • E-mail. Used to collect email address information.
  • Fieldset. A fieldset creates a grouping of fields with a header. ...
  • File. ...
  • Grid. ...
  • Hidden. ...
  • Markup HTML.

How do I change my email in Drupal webform? ›

Editing the email address

You should end up on the settings tab of the form edit page and then you'll select the Emails / Handlers. Click the edit button for this particular email notification. After you click on the edit button, you'll see the edit panel open. Look down and you'll see the To Email option.

How do I create a web form in HTML email? ›

The three sets of code below can help you get the job done.
  1. HTML: <form method=”post” name=”contact_form” action=”contact-form-handler.php”> Your Name: <input type=”text” name=”name”> Email Address: ...
  2. JavaScript: <script language=”JavaScript”> ...
  3. PHP: <? ...
  4. Email form plugins for WordPress. ...
  5. Shopify email form apps. ...
  6. Google forms.
Apr 11, 2019

How do I convert text to HTML email? ›

Change the format of a reply or a forwarded message
  1. In the message, click Reply, Reply All, or Forward.
  2. If you're working in the Reading Pane, click Pop Out. Note: If you aren't working in the Reading Pane, you don't need to do this.
  3. In the message window, click Format Text > HTML.

How do you alter any form in Drupal? ›

function hook_form_alter

Perform alterations before a form is rendered. One popular use of this hook is to add form elements to the node form. When altering a node form, the node entity can be retrieved by invoking $form_state->getFormObject()->getEntity().

How do I add a block to a webform in Drupal? ›

  1. Create your webform.
  2. Structure => Block Layout => click "Place Block" under your preferred region.
  3. Find Webform then => Place Block => under Webform type your webform title and it will find it.
  4. Save Block.
Feb 1, 2018

How do I edit a dynamic form? ›

Edit a Dynamic Form
  1. Click Dynamic Forms tab in primary navigation bar.
  2. Click on desire Form title OR click Actions and select Edit.
  3. Edit as appropriate.
  4. Click Save Form button.
Feb 11, 2022

How do I edit a component in Drupal? ›

Start at At Administration > Configuration > Development > Features ( admin/config/development/features ). Under "Bundle", select the bundle for the feature you want to edit. Click the title of the feature you want to edit to bring up its edit form. Under "Components", add or remove components.

How do I create a custom content type in Drupal? ›

  1. In the Manage administrative menu, navigate to Structure > Content types (admin/structure/types). ...
  2. Click Add content type. ...
  3. Under Submission form settings, configure the form that is used for creating and editing content of this type. ...
  4. Under Publishing options, decide on default options for new content of this type.
Feb 20, 2023

What does layout builder customize in Drupal? ›

Drupal's Layout Builder allows content editors and site builders to create visual layouts for displaying content. Users can customize how content is arranged on a single page, across types of content, or even create custom landing pages with an easy to use drag-and-drop interface.

How do I add a master page to an already created Webform? ›

Add the master page into our project. Right click Project->Add->New item (shown in the picture), After clicking on new item, Window will open, select Web Form->Web Forms Master Page (shown in the picture), After clicking the add button, master page 'site1.

How do I create a custom block form in Drupal 8? ›

  1. In the Manage administrative menu, navigate to Structure > Block layout > Custom block library (admin/structure/block/block-content).
  2. Click Add custom block. The Add custom block page appears.
  3. Fill in the fields as shown below. Field name. ...
  4. Click Save. A message appears indicating the block has been saved.
Feb 20, 2023

What builder is used to create dynamic forms? ›

DronaHQ offers 100+ pre-built controls, dynamic form field, GPS and signature upload, rich media upload, and more powerful features to let users build a highly engaging form. It enables you to collect, store, share and analyze data supporting multiple integrations.

What is difference between page layout and dynamic forms? ›

Unlike the traditional page layout where you can only add a field once, you can add a field multiple times using Dynamic Forms. The reason for this is because you may create multiple Field Sections that display fields based on different criteria or for different record types or users.

How do I edit content in Drupal 8? ›

  1. In the Manage administrative menu, navigate to Content (admin/content).
  2. If the content item you want to edit was updated or created recently, it should appear near the top of the content list on that page. ...
  3. Click Edit in the row of the content item you want to edit (Home), to open the content editing form.
Feb 20, 2023

How do I update custom modules in Drupal? ›

Using the administrative interface
  1. Put your site in maintenance mode. ...
  2. In the Manage administrative menu, navigate to Reports > Available updates > Update (admin/reports/updates/update).
  3. Find and check the module in the list. ...
  4. Click Continue.
  5. Click Run database updates. ...
  6. Click Continue and apply all updates.
Feb 20, 2023


1. Advanced Webforms
(Bay Area Drupal Camp)
2. Webform 8.x-5.x
(Drupal 4 Gov)
3. Webforms for Everyone
(Jacob Rockowitz)
4. Webform Variants
(Jacob Rockowitz)
5. Drupal 8 Programatically created custom form.
(Drupal Up - Drupal 8 Video Tutorials)
6. Webform module for Drupal 8
(NERD Summit)


Top Articles
Latest Posts
Article information

Author: Prof. An Powlowski

Last Updated: 28/11/2023

Views: 5975

Rating: 4.3 / 5 (44 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Prof. An Powlowski

Birthday: 1992-09-29

Address: Apt. 994 8891 Orval Hill, Brittnyburgh, AZ 41023-0398

Phone: +26417467956738

Job: District Marketing Strategist

Hobby: Embroidery, Bodybuilding, Motor sports, Amateur radio, Wood carving, Whittling, Air sports

Introduction: My name is Prof. An Powlowski, I am a charming, helpful, attractive, good, graceful, thoughtful, vast person who loves writing and wants to share my knowledge and understanding with you.