Popular features of Drupal 8 web forms

There are many factors that come into play when it comes to website user experience, but one that is often overlooked are web forms. Forms are the best way to get inputs from your prospective clients, and indirectly nurture your relationship with them. With the focus often being on bringing users to your channels, not investing as much time in perfecting the user experience, including on web forms, can result in complex and frustrating interactions.

With the latest developments regarding the editorial experience in Drupal 8, the Drupal Webform module provides a feature-rich form builder with all the tools you need, whether you want to create a multi-page form with conditional logic or a simple contact form that pushes data to your CRM or marketing automation platform.

Let’s take a closer looks at web forms in Drupal 8 and how you can use them to improve the user experience on your website.

1. Flexibility & freedom

One of the great things about the Drupal Webform module, is its ease to create new forms from scratch or to edit existing forms. There’s an entire User Interface built around its functionality that allows content managers and webmasters to quickly create new forms, whether they are a simple contact form or a more extensive customer survey.

2. Out-of-the-box functionality

The Drupal 8 release of the Webform module ships with a whole suite of functionality. Of course, all basic fields are available (text, checkboxes, radio buttons, among others), but lots of extras as well.

There are also different categories in the available form elements. From the expected user input fields (email, password, date pickers), to composite fields (combination of fields that gets treated as one, e.g. “address”), upload fields (file, audio, video, image, etc.), complex fields (like a signature drawing area) and styling elements (HTML markup, buttons…).

It’s also easy to create lists of all kinds as options for your drop-down form fields. For the most common form field types, Drupal already comes with built-in pre-defined lists: days, months, time zones, languages, sizes, ethnicities, ratings (Likert scale), marital status, countries (names/iso codes), and the list goes on.

3. Validation, masking, conditionals…

The power of all the different elements stretches beyond just classifying them as a “type”. An e-mail element for example, is not only an input field, but has also a validator behind the scenes that checks submitted values for a valid email address.

We can easily extend the user experience as well by guiding them through the elements and the expected values. We can do this with descriptive titles and labels, but also with input masks and placeholders.

Placeholders are static example values that will show when we load the form and disappear when a user clicks on the input value.

A more advanced way of guiding expected input, is by using input masks. With an input mask, we define a fixed format of valid input so that the form doesn’t accept anything else to be typed.  For example, if we ask the user for a ZIP code of a country where typically the code can only have 4 digits, we can create a mask that only allows this format. In the same way, we can also create more complex masks, such as pre-defined rules and formats to fill in VAT numbers, e-mail addresses, bank account numbers, and so on. Like for other form building tools, the Drupal Webform module ships with an entire list of pre-defined masks that you can also extend with others more specific to your business needs.

Instead of showing all fields at once, on longer forms you might want to display the minimal amount and just let others surface as they become relevant based on the user’s inputs. This business logic can be added as “conditions” for each form field, so that via these conditions, each field can interact with other fields’ values.

4. Multi-step form experiences

If you’re creating a customer onboarding process, a feedback survey or any interaction where you require several kinds of information, it can become overwhelming for the user if the whole form is presented in one single page. With multi-step forms, you can easily group all the relevant elements together per page (via drag & drop in the UI) and guide the user through the different steps.

If you add a bit of logic on page-level, you can even show different form steps depending on an earlier choice. For example, if you ask the visitor for his job title in the first step, you can present them more relevant questions targeted to their role in the following ones.

5. Form templates management

It can become quite cumbersome to design a new form from the ground up whenever you want to capture newsletter subscriptions, event registrations or customer feedback. To make it easier to manage, you can create templates for the most common form types with pre-configured fields. When you need to create a new instance of the form, all you need to do is adjust it where applicable for the specific context.

6. Integrations and extra plugins

If all this out-of-the-box functionality don’t cover all your data capture needs, there are several other extra Drupal modules that add enhancements to these form building tools. A few examples are:

• Views integrations
  Create advanced lists/layouts and easily embed different forms
• Extended analysis for survey results
  Expose/display your web form submissions as pie charts, line charts or tables to easily analyze results
• Expose / post web form results to a REST web service
  Send your web form submissions to an external web service for further processing
• Encrypt form submissions
  Add a layer of security to your web form submissions to prevent interceptions
• Extra pre-defined composite fields
  The module comes with some predefined composite fields (e.g. address), but additional (common) fields can be added via other Drupal contributed modules
• Unique Invitations, to send unique codes per mail for individual forms
  Create “secret” forms and allow individual access per user
• CAPTCHA spam protection
  Submission protection by adding spam prevention
• Honeypot
  Submission protection without interrupting the user to solve a CAPTCHA
• HubSpot
  Integrate your web form with your HubSpot account: send web form submissions and add them to your HubSpot contacts instead of saving them in your Drupal database
• MailChimp
  Let users subscribe to a MailChimp mailing list by submitting a web form
• Commerce
  Integrate web forms within a Drupal Commerce shop, for example to add forms to product cart or check-out flows
• CiviCRM
  Integrate your web form with your CiviCRM account: send web form submissions and store them in the external CRM instead of saving them in your Drupal database
• Slack
  Send notifications to a specified Slack account and channel when new submissions are saved
• And more – the full list of Drupal web form add-ons is available online.

Conclusion

Websites are no longer limited to being static informational channels but rather many brands’ central channel for sharing information and communicating with their audiences. Having intuitive web forms and surveys that are easy increases your pages’ conversion rate and allows a fluid exchange of information.

Drupal 8 Webform module provides a user-friendly form building interface that allows content editors and webmasters to design the best experience for website users when submitting their data, whether they’re replying to a satisfaction survey or requesting more information about your products.