Skip to main content

Building a Contact Form with Divi Form Builder

Creating a contact form with the Divi Form Builder is a straightforward process that allows you to capture essential information from your website visitors. Follow these steps to build an effective contact form on your Divi WordPress site.

Video​

Step 1: Add The Form Module​

  1. Open the page where you want to add the contact form.
  2. Click on the '+' icon to add a new module and the Form Module from the list of options.

Add Form Module

Step 2: Define Form Settings​

  1. Add a descriptive Form Title for your contact form.
  2. Assign a unique Form ID to the form to ensure it is easily identifiable.
  3. Select Contact Form from the Form Type option.
  4. Customize the text of the Submit Button (e.g., "Send Message").

Form Settings Contact Form

Step 3: Add Form Fields​

  1. Click on the Add New Field button to start adding fields to your form.
  2. Configure Each Field:
    1. Add a descriptive Field Title and Admin Title for your contact form.
    2. Ensure that each form field has a unique Field ID for proper data handling.
    3. Choose from various field types such as Email, Number, Date, Input, etc.

For more detailed information on our Field Types, click HERE.

Add Form Fields

Step 4: Customize Contact Form​

Divi Form Builder offers extensive customization options for both the entire form and individual form fields.

A Few Features​

For more detailed information on our features, click HERE.

  1. Form-Wide options include:
    1. Customize the appearance of the entire form, including colors, fonts, and borders.
    2. Configure the email settings to ensure form submissions are sent to the correct email address.
    3. Implement spam protection measures such as reCAPTCHA to prevent unwanted submissions.
    4. Set up redirection rules to take users to a specific page after form submission.
    5. Enable saving form entries to your database, making them accessible for later review.
  2. Field-Specific options include:
    1. Customize the appearance of individual fields, including font size, color, and background.
    2. Apply conditional logic to show or hide fields based on user input, enhancing the form's interactivity and relevance.

Additional Tips​

By following these steps, you can create a highly functional and aesthetically pleasing contact form using Divi Form Builder. Whether you need a simple form for basic inquiries or a more complex setup with conditional logic and spam protection, Divi Form Builder provides the tools you need to customize and optimize your contact forms.