There are small but extremely important elements in a website’s design that boost user engagement, help your audience fulfil their goals, and give you plenty of valuable statistics. These elements are webforms, and you definitely need them on your website.

Welcome on a little webform tour by the Golems Drupal team! We will discuss what webforms are and describe the Webform module that is commonly used to create them on Drupal websites. In addition, we will share a simple Drupal 8 Webform tutorial specifically focused on the task of adding webforms to Drupal content types.

What are webforms and why are they important on a website?

Webforms, also known as web forms or HTML forms, are online forms meant for website users to submit some data that can afterwards be processed by the server. These can be contact forms, feedback forms, subscription forms, appointment forms, survey forms, job applications, support requests, or whatever else you can think of — based on your business needs and marketing strategies.

To ask for users’ data, webforms can contain a set of text fields, checkboxes, select menus, radio buttons, and so on. Placeholders that show the needed data format, an autocomplete feature, and various help texts are part of making webforms more user-friendly. Online forms also follow specific web accessibility guidelines that make them easy to use for audiences with disabilities — for example, the forms should have clear labels, form validation should be easily associated with a specific field, keyboard input should be available, and so on.

Speaking about the importance of online forms, it should be noted that they are the primary tool to establish a relationship with your users. They help you engage your audience, get to know them better, keep your interaction going, help you keep track of your marketing campaigns, provide instant help to your audience when needed, and so on. They work 24/7 and gather data for your business.

Webforms in Drupal: meet the most popular tool

When it comes to creating online forms in Drupal, certainly the key tool for this is the Webform module created and maintained by Jacob Rockowitz together with other great contributors. The module is currently 7th in popularity among all 46,200+ contributed modules on drupal.org.

The Drupal 7 Webform once was 2nd after the Views module, and became the module of choice for form creation as opposed to using CCK or Field module. It is still fully maintained and receives new features and bug fixes, so if your website is on Drupal 7, you can fully rely on it. The Webform module for Drupal 8 has a completely new codebase and uses new approaches to creating user-friendly online forms. Now that Drupal 9 is available, the Webform module is also compatible with it.

Key features of the Drupal Webform module

The Webform is a complex Drupal module that comes packed with a bunch of submodules. Here are at least some of its main features:

• There is an intuitively understandable user interface for building (as well as viewing, configuring, exporting, deleting, etc.) any kind of online forms.
• You can build your Drupal webforms like Legos by putting together various ready-made configurable elements (name, email, telephone, terms of services, textbox, checkbox, table select, rating, range, scale, autocomplete, multimedia file upload, “submit” button, and so on — the total list is really impressive).
• There are unlimited options in customizing every detail of how the form looks and works (labels, messaging, emails, confirmation, etc.)
• You can give granular permissions to who can create, delete, view, or perform other actions with your online forms.
• The module includes numerous demos, videos, webform examples, as well as a ready-made customizable contact form that you can just grab and edit to your liking.
• It’s possible to create forms of any complexity (including multi-page forms with multi-column layout and customizable progress bars, conditional logic, and much more).
• You can configure the sending of customizable emails to your Drupal website admin or/and the sender.
• The form data can be exported as CSV to Google Sheets or MS Excel. Thanks to the integration with the Views module, advanced reporting is available.
• The module’s creators strive to follow the accessibility guidelines so forms work well with screen readers, keyboard input, and so on.
• The Drupal Webform module has an API to extend its features.
• Element encryption is possible thanks to the integration with the Webform Encrypt module.
• Form submission and retrieval via a REST API is available with the Webform Rest module integration.
• There is an almost endless list of other contributed modules that take Webform’s capabilities even further (Webform CiviCRM Integration, Webform Invitation, Webform Composite Tools, and so on).

How to add a webform to a Drupal content type

It is often beneficial to add online forms to Drupal content types in order to increase user engagement. For example, you can add an application form to a job listing, a sign-up form to an event description, a feedback form to a vendor page, and much more.

Adding webforms to Drupal content types is very easy thanks to a special “Webform” field that appears in Drupal content types when the Webform module is enabled. There have been issues with this in some module versions that required using additional modules Extra Field and Webform Extra field. However, now that we are using Drupal Webform 8.x-5.22 in our example, adding webforms to Drupal content types works perfectly out-of-the-box.

In our case, we have an Event content type to which we want to add a registration form. We create this form called “Register for the event” by going to “Structure — Webforms — Add webform.” Let’s compose it with a couple of elements — for example:

• “Email”
• “Name”
• “Text field” (to ask about a user’s company)
• “Terms of service” (to make it a Privacy Policy acceptance checkbox)
• “Submit” button

While adding elements, we customize each of them in the right tab — change labels and edit the default settings to our liking. For example, the “Name” element by default has a complex structure with titles, first names, middle names, and last names, but we can delete the extra ones if we don’t need them. We can also customize the “Submit” button text. In addition, let’s make a few fields required by checking the relevant boxes next to them.

So we get the form that looks like this:

Let’s go ahead and add a field of the Webform type to our Event content type in “Structure — Content types — Event — Manage fields.”

The field label will be the one all users will see above the form (unless you choose to hide it in “Manage display.” While completing this field setup, we can select the default form that will appear during the creation of new content of this content type. The dropdown menu shows us all webforms that we have, and we select the newly created one.

We are almost theme! Let’s finally create an event content item and see how it looks with a registration form attached.

Build your best Drupal web forms with Golems!

We have shown you the ABC of adding Drupal webforms to content type. However, there are not enough letters in the alphabet to describe the full potential of the Drupal Webform — there are tons of form settings to make the forms fit your website like a glove. See how you can boost your user engagement using well-built online forms — contact the Golems development team!