Configuring Drupal 9 Webforms

Drupal 9 Webform Module

The Webform module has been revitalized for the ninth Drupal edition. Creating Drupal 9 webforms can be as simple, detailed, and accessible as you need. There are over a dozen feature sets available to meet your business demands and integrate applications you use for information management.

Installing the Drupal 9 Webform Module

  1. Visit https://www.drupal.org/project/webform.
  2. Log into Drupal and install the Webform module using the tar download link.
  3. Select “Enable newly added modules.”
  4. Under “Webform,” select applicable modules for your needs. For this guide we enabled Webform, Webform Access, Webform Options Limit, Webform Shortcuts, Webform Node, and Webform UI.
    Drupal 9 Webform options
  5. At the bottom, select Install.

Creating Drupal 9 Webforms

In the navigation menu, select “Structure” and “Webforms.” If you don’t see the module, clear your Drupal cache and try again.

In the Forms tab you’ll see a basic contact form is included. Select the down arrow on the right to build, view, test, configure, and duplicate, and delete a webform. 

Drupal 9 webforms

You can also select the “Contact” title to view the default form on the new, live /contact page. The default form requires a name, email address, subject, and message.

Drupal Website feedback webform

When you add or duplicate a webform, you’ll be prompted to add a title, admin description, and category to better organize webforms. The status is open for submissions by default. 

Add a Drupal webform

Upon selecting “Save” you’ll be redirected to the Build tab to develop the Drupal 9 webform. Select “+ Add element” to build the form. A sidebar will show on the right with customization options. 

The Conditions tab allows you to automate when an element displays and is required. The Advanced tab includes CSS and placeholder text options. The Access section configures who can submit, update, and view the form. Once you’re done, select “Save.”

You can add a page to split form elements into separate sections. The wizard page title will show in a status bar at the top of the form. After adding the page you can drag and drop elements under it for organization.

Two elements under a Webform Page

The webform below has two pages and shows a message, name, and text area element.

Drupal Webform with two pages
Webform with 2 separate pages

Add a layout to create a flexbox that shows on the top of each page of the webform.

You can customize the “Submit” button appearance and when it shows based on user permissions.

Advanced users can select “Source” at the top to quickly make coding changes in the webform.

Webform Settings

Go to the Settings tab to further control access to the form past admin, registered, and anonymous users with seven submenus.

General: customize the webform URL and page users are sent to after a submission.

Form: change the status of the form (open, closed, or scheduled) with a custom message and restrict navigation options.

Submissions: set notifications for when submissions cannot be completed or have already been completed by the user.

Confirmation: specify what happens after a successful submission. You can redirect users to a different page or display a notification.

Emails / Handlers: email submissions with conditional logic (if this, then that) and additional info.

CSS / JS: add custom CSS and JavaScript to all pages that load the webform.

Access: set anonymous, authenticated, and admin user privileges for creating and modifying webforms. Everyone can only create submissions by default.

For migrating routines from older Drupal versions check out the “Webform: Migrate” module.

Testing Webforms

The Test tab adds dummy text throughout the form for quick submission testing. Test submissions are listed as regular submissions in the back-end.

Testing a Drupal Webform

Webform Results

The Results section lists all submissions with included info. Admin users can star, flag, lock, delete, and add notes to submissions. 

The Download page supports exporting submissions as text, HTML, JSON, and YAML.

Submissions in the Webform module

The Clear page is the easiest way to delete a lot of webform submissions at once.

Remember, this Drupal 9 article only covers getting started with Webform. There are over a dozen additional features and example forms available. The Addons tab lists other Drupal 9 integrations for getting more out of your webforms.

Get the power and performance you need without additional configurations with our Drupal VPS Hosting.

J
Jacqueem Content Writer I

Technical writer focused on cybersecurity and musicianship.

More Articles by Jacqueem

Comments

It looks like this article doesn't have any comments yet - you can be the first. If you have any comments or questions, start the conversation!

Was this article helpful? Let us know!