Build Contact Form On Divi Visual Builder Using Material Design

Divi Form Builder With Material Design is THE form builder for divi.

Salient features include :

  • Responsive forms using native divi row/column grid.
  • Form field divi modules like text, file upload, email, checkbox etc.
  • Google’s “Material Design” styles out-of-the-box. Customizable styling.
  • Setup form submission notifications
  • Spam protection with reCAPTCHA.
  • Save form submission to WordPress database.

It provides you with all the tools for creating high converting forms.

Pre-requisites

  1. A WordPress website
  2. Divi Theme by Elegant Themes
  3. Divi Form Builder With Material Design plugin

Tools

  1. Computer

Estimated Cost : 29

Total Duration : 9 minutes

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 1 - Enable & Setup Form On Divi Section

  1. Plugin works by making a divi section, form-enabled.

  2. This divi section acts as a form container. Add the form field divi modules in this section.

  3. To enable form on a divi section,

    • Edit a page in divi's visual builder.
    • Hover over a divi section and click the cog icon to bring up the Section Settings
    • On the Content tab click on the Form section toggle
    • Set the Enable Form toggle switch to ON.
    • Give the form an unique name via the Form Name setting
    • Set successful form submission message in the Success Message setting

  4. Note: Form related module settings won't show in divi section & form submissions won't work if the above isn't enabled.

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 2 - Setup Spam Protection

  1. To block unwanted spam form submissions

    • Create Google reCAPTCHA website profile
    • Save the SITE KEY & SECRET KEY in WordPress
    • Enable & setup spam protection on a form
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 3 - Form Email Notification

  1. Plugin provides versatile setting for email notifications.

  2. Send email notification on successful form submission.

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 4 - Add Form Fields To The Divi Section

  1. Now that the form is setup, we need to add form fields to it.

  2. Each form field is a divi module

  3. The following form field (and hence divi modules) are available

    • Single Line Text
    • Paragraph Text
    • Checkbox
    • Radio
    • File Upload
    • Drop Down
    • Email
    • Consent
    • Submit Button

  4. Add a form field by selecting appropriate divi module.

  6. Next steps are to customize the form styles

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 5 - Section Rows - Design Settings

  1. This section represents style settings for the rows within the divi section

  2. In the divi section settings visit Design Tab and click on Form - Section Rows toggle

  3. Settings options are

    • Set Top/Bottom Padding To 0
      • A toggle field to set the top and bottom padding for the section rows to zero.
      • It help maintain proper row spacing for form fields on multi-row section setup.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 6 - Field Container - Design Settings

  1. This section represents style settings for a field container. A field container is the main wrapper for the field.

  2. In the divi section settings visit Design Tab and click on Form - Field Container toggle

    • Margin
    • Padding
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 7 - Label - Design Settings

  1. This section represents style settings for field label.

  2. In the divi section settings visit Design Tab and click on Form - Label toggle

  3. Setting options are

    • Font settings like font family, weight, font styles
    • Text size, letter spacing, line height and color
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 8 - Text & Dropdown Field - Design Settings

  1. This section represents style settings for a Single Line Text, Paragraph Text and Dropdown field

  2. In the divi section settings visit Design Tab and click on Form - Text & Dropdown Field toggle

  3. Setting options are

    • Font settings like font family, weight, font styles
    • Text size, letter spacing, line height and color
    • Border color
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 9 - Checkbox Field - Design Settings

  1. This section represents style settings for Checkbox field

  2. In the divi section settings visit Design Tab and click on Form - Checkbox Field toggle

  3. Setting options are

    • Checkbox option font settings like font family, weight, font styles
    • Checkbox option text size, letter spacing and line height
    • Selected Checkbox Background - Background color of the checkbox when selected.
    • Checkbox Tick Color - Color of the tick symbol.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 10 - Radio Field - Design Settings

  1. This section represents style settings for Radio field

  2. In the divi section settings visit Design Tab and click on Form - Radio Field toggle

  3. Setting options are

    • Radio option font settings like font family, weight, font styles
    • Radio option text size, letter spacing and line height
    • Selected Radio Button Background - Background color of the selected radio button
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 11 - File Upload Field - Design Settings

  1. This section represents style settings for the File Upload field.

  2. In the divi section settings visit Design Tab and click on Form - File Upload Field toggle

  3. Setting options are

    • Button text option font settings like font family, weight, font styles
    • Button text option text size, letter spacing, line height and color
    • Button background color
    • Padding
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 12 - Consent Field - Design Settings

  1. This section represents style settings for the Consent field

  2. In the divi section settings visit Design Tab and click on Form - Consent Field toggle

  3. Setting options are

    • Consent text option font settings like font family, weight, font styles
    • Consent text option text size, letter spacing, line height and color
    • "ON" Switch Background - Switch background color when it's ON
    • "ON" Switch Tick Color - Tick color when switch is ON
    • "ON" Switch Track Color - Track color when switch is ON
    • "OFF" Switch Background - Switch background color when it's OFF
    • "OFF" Switch Dash Icon Color - Dash icon color when switch is OFF
    • "OFF" Switch Track Color - Track color when switch is OFF
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 13 - Submit Button Field - Design Settings

  1. This section represents style settings for the Submit Button field.

  2. In the divi section settings visit Design Tab and click on Form - Submit Button Field toggle

  3. Setting options are

    • Button text option font settings like font family, weight, font styles
    • Button text option text size, letter spacing, line height and color
    • Button background color
    • Padding
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 14 - Input Helper Text - Design Settings

  1. This section represents style settings for the Input Helper Text

  2. Input helper text is the text below the input field. It states verbose information of about the field.

  3. In the divi section settings visit Design Tab and click on Form - Input Helper Text toggle

  4. Setting options are

    • Helper text option font settings like font family, weight, font styles
    • Helper text option text size, letter spacing, line height and color
    • Helper text opacity
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 15 - Input Error - Design Settings

  1. This section represents style settings for input field error elements

  2. In the divi section settings visit Design Tab and click on Form - Input Error toggle

  3. Setting options

    • Label/Text Message/Border Color - Set the color for input label text, error message text and border.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 16 - Success Notification - Design Settings

  1. This section represents style settings for the notification on successful form submission

  2. In the divi section settings visit Design Tab and click on Form - Success Notification Text toggle

  3. Setting options are

    • Success message text option font settings like font family, weight, font styles
    • Success message text option text size, letter spacing, line height and color
    • Background color
    • Automatic Dismiss Timeout (ms) The timeout in milliseconds after which the notification will disappear.
    • Padding
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 17 - Error Notification - Design Settings

  1. This section represents style settings for the notification on invalid form submission

  2. In the divi section settings visit Design Tab and click on Form - Error Notification toggle

  3. Setting options are

    • Error message text option font settings like font family, weight, font styles
    • Error message text option text size, letter spacing, line height and color
    • Background color
    • Automatic Dismiss Timeout (ms) The timeout in milliseconds after which the notification will disappear.
    • Padding
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 18 - Form Submission Database Entries

  1. Each form submission gets captured in the WordPress database.

  2. With the saved entries, you can

    • View entry listing
    • View entry details
    • Delete entries
FREE DOWNLOAD

Start your FREE trial. No credit cards required.