How To Build A Contact Form
Written by the Divi Engine Documentation Team
Introduction
Follow these steps to make a simple Divi Form Builder contact form.
Preview
Description
How to create a Divi Form Builder Contact Form.
Difficulty
Easy.
Time
15 Minutes.
Step 1: Set It Up - Divi Form Builder
Start off by setting up a page with our Form Module.
1.) Add the FORM module to the page of your choice.
2.) Add four New Fields to the FORM module.
Step 2: Customize Our Settings - Divi Form Module
Customize the Divi Form Builder Form Module settings to make the form a functioning contact form. Below are the important settings to follow. For more information, please visit our documentation to your left.
Content Tab Main Options
1.) Give your form a title.
2.) Give your form an ID.
3.) Select Contact Form as the form type.
4.) Change the submit button text if you so desire.
Content Tab Extra Options
5.) Enable "Save Entries to Database" to save the form submissions to the database of your WordPress website.
After setting up the Main Settings you will now need to define each field.
Form Field 1 Field Options
1.) Define the Field Title for the first field as something like, "First Name."
2.) Define the Field ID of the first field as something like, "First_Name"
3.) Select the field Type as Input Field.
Form Field 2 Field Options
4.) Define the Field Title for the first field as something like, "Second Name."
5.) Define the Field ID of the first field as something like, "Second_Name"
6.) Select the field Type as Input Field.
Form Field 3 Field Options
7.) Define the Field Title for the first field as something like, "HTML Content."
8.) Define the Field ID of the first field as something like, "HTML_Content"
9.) Select the field Type as Content (Text, Code or Divi Library).
10.) Define the Content-Type as Code and then write HTML code in the CODE block that appears below. In my example I wrote, "<p>Please send us your current email address.</p>
Form Field 4 Field Options
11.) Define the Field Title for the first field as something like, "Email."
12.) Define the Field ID of the first field as something like, "Email_2"
13.) Select the field Type as Email Field.
14.) Turn on the "Is recipient email address" so that if you decide to set up the form to email, it will use the recipient's email as the one entered in here.
Step 3: Add Custom Code
No custom code here.
Step 4: Conclusion
Save your Contact Form and view it on the front end. To customize the Submit Button, head over to Appearance > Customize > Buttons and style it from there.
More Support?
Please email us at [email protected] if you are unable to get Divi Form Builder working.