How to Set Up a Custom Contact Form in Drupal 8


Introduction: Drupal 8 Contact Form & Secure Email Data

This Tutorial will show how to build a custom Contact Form to collect a user’s name, address, phone number, email address, & other details on a Drupal 8 website.

With Drupal 8’s core Contact Form module, administrators can set up multiple forms for different departments or sales & marketing campaigns for a business organization.

Web publishers can also install the Secure Login module for Drupal 8 which will ensure that SSL/TLS Encryption is enforced on all versions of the contact form.

Step One: Enable the Contact Form Module

The Contact form module is part of the Drupal 8 core distribution so administrators only need to navigate to: /admin/modules and enable the module to begin using it for email.

How to Set Up a Custom Contact Form in Drupal 8

For this Tutorial, there is the additional requirement of the Secure Login module which will be used to force secure connections with SSL/TLS Certificates on contact forms.

Required Modules:

Navigate to: /admin/modules/install and upload the module files. Enable the module and save the settings. Continue to the next step to build the site-wide Contact Form.

How to Set Up a Custom Contact Form in Drupal 8

Drupal 8 publishers using the Contact Form for site-wide email need also consider installing the Captcha, ReCaptcha, & HoneyPot modules for anti-spam protection.

Step Two: Add a New Contact Form for Website Emails

To begin building a site-wide Contact Form for emails on Drupal 8, navigate to: /admin/structure/contact & click on the link: “Add Contact Form”.

How to Set Up a Custom Contact Form in Drupal 8

On the subsequent screen, create a new label for the Contact Form, i.e. 'website feedback' or 'product information'. Then specify the recipients of the form:

How to Set Up a Custom Contact Form in Drupal 8

For recipients, use standard email values like 'webmaster@example.com'. For multiple copies,use comma-separated values, i.e. 'sales@example.com,support@example.com'.

Next specify any particular message to display to the user after submission of the form. Leave the section blank for no message. Then set a Redirect Path after submission.

There are also Contact Form options for Auto-reply, Weight, & use as the Default Form for site-wide email contacts. This includes use of the /contact URL for the form.

Step Three: Add Fields for Address, Phone, & Business URL

After the Contact Form has been created, right click on the “Edit” menu & select “Manage Fields” from the list of options.

  • Navigate to: /admin/structure/contact/manage/feedback/fields

In this section, additional fields can be added to the form to collect information for the customer’s address, phone number, email address, & business URL.

In order to add these fields to the Contact Form, click on the “Add Field” button.

How to Set Up a Custom Contact Form in Drupal 8

Select the “Address” field (if installed) or use Text, Date, Integer, Paragraph Field, etc. options as required for the customer information collection on the form.

Add a label, then save & continue the configuration. Set the number of allowed values.

How to Set Up a Custom Contact Form in Drupal 8

After setting the help text, required values, & other variables for each field, the Contact Form will have the ability to collect addresses, phone numbers, links, uploads, etc.

Step Four: Manage Custom Contact Form Display

To manage the Field display on a Contact Form, right-click on the “Edit” menu for the form and choose “Manage Form Display”. The module provides two tabs with options.

How to Set Up a Custom Contact Form in Drupal 8

Use the drag-and-drop levers on the Fields to arrange the display order on the Contact Form. Position the Address, Phone Number, Email, & Business URL above the Message text box. The Sender Name & Sender Email fields are defaults.

How to Set Up a Custom Contact Form in Drupal 8

Select the “Manage Display” tab & a choice of options are available to build a theme template for the Contact Form, for example using Twitter Bootstrap or Panels.

Step Five: Force SSL/TLS Connections on Contact Forms

After the custom fields & display are established on the Contact Form, remember to configure the Secure Login module to protect the form using encryption on submit.

How to Set Up a Custom Contact Form in Drupal 8

Navigate to: /admin/config/people/securelogin & make sure that the “Contact Form” is checked as an option under Forms to protect. Set a secure base URL as optional.

Secure Login will force SSL/TLS Encryption using HTTPS for all of the Contact Form submissions, insuring that the address, phone, email, etc. is not plain text in transit.

Conclusion: Simple & Easy Drupal 8 Contact Forms

Drupal 8 permits the creation of multiple Contact Forms for different departments, website sections, special promotions, or individual use by custom labels & URLs.

The Contact Module is part of Drupal 8 core and is a standard aspect of all CMS websites. Expand functionality with CCK Field modules & build complex forms.

Drupal 8 developers can use Twitter Bootstrap & Panels templates to add custom blocks with images, code, video, links, etc. to Contact Form pages in theme display.

Check out these top 3 Drupal hosting services:

Was this article helpful?