Back to top

Simple Guide to Building Forms with Drupal Webform Module

Webforms are an integral part of a site. They are widely used on websites across multiple industries for different purposes and it is hardly possible to imagine a business platform without a form designed specifically for user data collection.

Adding a form with data collection capabilities to the site might get challenging but not with Drupal content management system and its powerful community. On a Drupal website, the best solution for form building is the Webform module. In today’s blog post, the Drupfan specialists explain how you can benefit from the Drupal Webform module & showcase a brief tutorial on the module usage. Stay tuned!

Drupal Webform Module

What Are the Benefits of the Drupal Webform Module?

The Webform module is the best and most highly customizable Drupal 10 solution available today for building any type of form and collecting any sort of user data. This solution is broadly used for creating single-page or multi-step registration forms, surveys, contact forms, quizzes, and more. Besides its core functionality, the Webform module also allows to set up email notifications for users and/or administrators.

Here, we outline the key advantages of the Drupal Webform module:

  • The Webform module is open-source (free) and offers a great range of functionality out of the box. Of course, any module requires further configuration, so if you do not possess tech skills, you can entrust webform creation and fine-tuning to the Drupfan Drupal specialists.
  • Webforms created with the help of this module are highly customizable and can be displayed as a page, block, pop-up, etc.
  • The Webform module provides email support functionality.
  • It allows export submission results in the CSV format by simply clicking a button.
  • This module allows the creation of conditional fields in the form.
  • And more!

As you see, using the Webform module is the quickest and easiest way to set up forms on Drupal websites.

Brief Tutorial to Drupal 10 Webform Module

The best way to learn how to create forms and understand the Webform module is to try it out. Follow this simple guide to get started with webforms on Drupal.

In this guide, we are talking about the Webform module in terms of Drupal 10. If you are using older Drupal versions, it is high time to think about Drupal migration or update.

  1. Installing the Webform module

Add the module to your website by pasting this command into the console:

composer require drupal/webform

Then go to the ‘Extend’ tab in the admin toolbar, search for the Webform module, and enable it (the one that simply says Webform).

P.S. To work with this module on Drupal 10, enable core modules Field API, System, and User. Otherwise, the webform module won’t work.

Under the Webform you can see numerous options. Each serves a specific functionality. Enable them as needed.

  1. Creating a webform

Before the beginning of the form building, please enable Webform UI, Webform Node, and Webform Access. The Webform UI makes the user interface for form building and maintaining more intuitive and easy to use, while Webform Access provides webform access controls for webform nodes. You also need to enable Webform Node, as it creates a webform content type that allows you to integrate the form into the site in the form of a node.

Next, proceed to ‘Structure → Webforms’ in the admin menu.

To build a new webform:

  • Click on ‘+ Add webform’.
  • Fill out the fields Title and Administrative description.
  • Choose ‘Open’ status to make it available to the users.

Click on ‘Save’.

The webform is now created and is waiting for further configurations!

 

  1. Configuring the webform.

After you’ve clicked on ‘Save’, you’ll see a webform configuration page. Click on ‘+ Add element’ to add fields to the form. You’ll see a pop-up with the list of fields.

Click on ‘Add element’ to add the required field. You’ll now see another pop-up on the right side of your screen with field configurations. Fill out the required fields. We chose the ‘text field’ and named it ‘First Name’. After filling out the necessary info, click on the Save button.

Note: if the field is required, put a checkmark under ‘Required’.

Let’s add some more fields. Then, view your webform by clicking on the ‘View’ tab.

In the ‘Test’ tab you can test a webform: the fields will be auto-filled with random values. In the ‘Result’ tab, you can view, download, or delete submissions.

 

  1. Adding content to the webform.

As you might remember, we enabled the Webform Node module, so a webform content type could be created. This content type has fields like title, body, and Webform. Under Webform, you can see a drop-down with the available forms (to create a Webform content type simply go to ‘Content → Add content → Webform’ in the admin menu).

Fill out all the necessary content to create a Webform node and choose a required Webform in the drop-down. Then, under ‘Webform settings’, you can choose the status of your form.

  • Open: if you want to make it open for users.
  • Closed: when submissions are no longer required.
  • Scheduled: will offer fields with start and closure days for the webform.

Congrats, now you can build simple forms with the Webform module on Drupal 10!

Summing Up

Drupfan specialists provided a short guide on the essentials for the webform building for non-tech users. However, the capability of the Drupal Webform module is not limited to this: we showcased only the tip of the iceberg. The Webform module is a highly customizable solution for building complex and multi-step forms for different purposes.

Drop Drupfan a line today to discuss your specific requirements for the webform and build a tailored solution just for your needs.