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

“... 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!

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)

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”!

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!

5. Add more pages to your form

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

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!

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!

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