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.
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.
- Secure Login: (Download Files)
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.
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”.
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:
For recipients, use standard email values like 'email@example.com'. For multiple copies,use comma-separated values, i.e. 'firstname.lastname@example.org,email@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.
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.
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.
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.
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.
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: