Introduction: Drupal 8 Contact Form & Secure Email Data
[openingText]
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.
[/openingText]
Step One: [stepName]Enable the Contact Form Module[/stepName]
[step]
[howToDirection]
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.
[stepImage]
[/howToDirection]
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.
[howToDirection]
Required Modules:
- 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.
[stepImage]
Drupal 8 publishers using the Contact Form for site-wide email need also consider installing the Captcha, ReCaptcha, & HoneyPot modules for anti-spam protection.
[/howToDirection]
[/step]
Step Two: [stepName]Add a New Contact Form for Website Emails[/stepName]
[step]
[howToDirection]
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”.
[stepImage]
[/howToDirection]
[howToDirection]
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:
[stepImage]
[/howToDirection]
[howToDirection]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’.[/howToDirection]
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]
Step Three: [stepName]Add Fields for Address, Phone, & Business URL[/stepName]
[step]
[howToDirection]
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
[/howToDirection]
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.
[howToDirection]
In order to add these fields to the Contact Form, click on the “Add Field” button.
[stepImage]
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.
[/howToDirection]
[howToDirection]
Add a label, then save & continue the configuration. Set the number of allowed values.
[stepImage]
[/howToDirection]
[howToDirection]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.[/howToDirection]
[/step]
Step Four: [stepName]Manage Custom Contact Form Display[/stepName]
[step]
[howToDirection]
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.
[stepImage]
[/howToDirection]
[howToDirection]
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.
[stepImage]
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.
[/howToDirection]
[/step]
Step Five: [stepName]Force SSL/TLS Connections on Contact Forms[/stepName]
[step]
[howToDirection]
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.
[stepImage]
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.
[/howToDirection]
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.
[/step]
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:
Your query to the best web hosting can end by clicking on this link.
