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.


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us