Build Contact Form On Divi Visual Builder Using Material Design

Divi Form Builder With Material Design is the ultimate form-building solution for your Divi website.

Salient features include :

• Mobile-ready forms that integrate seamlessly with Divi’s standard row and column layouts.
• A comprehensive suite of form fields, including text, file uploads, emails, and checkboxes, all available as standard Divi modules.
• Modern, high-converting “Material Design” styling applied automatically, with full customization options to match your brand.
• Automated email notifications to keep your team updated on new leads.
• Reliable spam protection powered by Google reCAPTCHA.
• Secure lead capture that saves submissions directly to your WordPress dashboard.

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

Pre-Requisites

• A WordPress Website
• Divi Theme
• Divi Form Builder With Material Design Plugin

Enable & Setup Form On Divi Section

1. The plugin transforms any standard Divi section into a functional form container.

2. Once enabled, this section acts as the master wrapper for your form. Simply drag and drop your desired form field modules into this section.

3. To enable form capabilities 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 a unique identifier via the Form Name setting.
   • Set a personalized confirmation message in the Success Message setting.

4. Note: If this setting is not enabled, form modules will not display their specific settings, and user submissions will not process.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Setup Spam Protection

1. To block unwanted spam form submissions:

   • Set up a free Google reCAPTCHA profile for your website.
   • Save the SITE KEY and SECRET KEY in your WordPress settings.
   • Enable and configure spam protection directly within your form settings.

2. Detailed guide at https://wptools.app/how-to/add-google-recaptcha-spam-protection-to-divi-contact-form/

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Form Email Notification

1. The plugin offers highly flexible options for routing and formatting your lead notification emails.

2. Automatically send customized email alerts whenever a user successfully submits your form.

3. Detailed guide at https://wptools.app/how-to/setup-email-notification-for-divi-contact-form-divi-form-builder-with-material-design/

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Add Form Fields To The Divi Section

1. With your form container ready, it’s time to build out your form’s questions.

2. Each form input is added exactly like a standard Divi module.

3. The following form fields are available in your module list:

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

4. Add a form field by selecting the appropriate Divi module.

5. Detailed guide at https://wptools.app/how-to/form-field-divi-modules-for-divi-form-builder-with-material-design/

6. The next step is to customize the visual branding of your form.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Section Rows - Design Settings

1. Customize the spacing and alignment of the rows holding your form fields.

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

3. Settings options are:

   • Set Top/Bottom Padding To 0
     • A toggle switch that instantly removes default spacing at the top and bottom of your section rows.
     • This ensures your multi-row forms look tightly integrated and professionally aligned without awkward visual gaps.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Field Container - Design Settings

1. Control the design of the outer boundary (the container) holding each individual form field.

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

3. • Margin
   • Padding

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Label - Design Settings

1. Customize the appearance of your field labels (the text prompting the user on what to fill out).

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

3. Setting options are:

   • Font settings like typography choice, font weight, and styling.
   • Text size, letter spacing, line height, and custom colors.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Text & Dropdown Field - Design Settings

1. Manage the visual styling for standard user inputs: Single Line Text, Paragraph Text, and Dropdown fields.

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

3. Setting options are:

   • Font settings like typography choice, font weight, and styling.
   • Text size, letter spacing, line height, and custom colors.
   • Border color to match your brand UI.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Checkbox Field - Design Settings

1. Customize the visual styling for the Checkbox field options.

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

3. Setting options are:

   • Font settings for the checkbox text (typography, weight, styles).
   • Text size, letter spacing, and line height.
   • Selected Checkbox Background - The accent color that appears when a user selects a checkbox.
   • Checkbox Tick Color - The color of the checkmark symbol itself.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Radio Field - Design Settings

1. Customize the visual styling for the Radio field options.

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

3. Setting options are:

   • Font settings for the radio button text (typography, weight, styles).
   • Text size, letter spacing, and line height.
   • Selected Radio Button Background - The accent color that appears when a user makes a selection.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

File Upload Field - Design Settings

1. Design the appearance of the button users click to upload their files.

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

3. Setting options are:

   • Button text settings (typography, weight, styles).
   • Button text size, letter spacing, line height, and text color.
   • Button background color to match your site’s call-to-action styling.
   • Internal button padding.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Consent Field - Design Settings

1. Style the Consent field, ensuring legal agreements and opt-ins fit cleanly into your design.

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

3. Setting options are:

   • Text font settings for the consent agreement (typography, weight, styles).
   • Text size, letter spacing, line height, and color.
   • “ON” Switch Background - The background color of the toggle switch when a user agrees.
   • “ON” Switch Tick Color - The color of the checkmark indicating consent.
   • “ON” Switch Track Color - The subtle color of the toggle track when active.
   • “OFF” Switch Background - The color of the switch when consent has not been given.
   • “OFF” Switch Dash Icon Color - The color of the default “off” indicator.
   • “OFF” Switch Track Color - The color of the toggle track when inactive.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Submit Button Field - Design Settings

1. Customize the primary call-to-action Submit Button that finalizes the form.

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

3. Setting options are:

   • Button text settings (typography, weight, styles).
   • Button text size, letter spacing, line height, and text color.
   • Button background color.
   • Internal button padding.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Input Helper Text - Design Settings

1. Customize the style of the Input Helper Text.

2. Helper text appears below a field to offer your users helpful hints or specific instructions to ensure accurate entries.

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

4. Setting options are:

   • Font settings (typography, weight, styles).
   • Text size, letter spacing, line height, and color.
   • Helper text opacity (useful for creating subtle, visually distinct hints).

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Input Error - Design Settings

1. Design how your form highlights errors (like missed required fields) so users can easily correct their mistakes.

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

3. Setting options:

   • Label/Text Message/Border Color - Select a distinct alert color (typically a bold red) to highlight the input label, error message, and field border when a mistake is detected.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Success Notification - Design Settings

1. Design the confirmation message users see after a successful form submission.

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

3. Setting options are:

   • Font settings for your success message (typography, weight, styles).
   • Text size, letter spacing, line height, and text color.
   • Notification background color.
   • Automatic Dismiss Timeout (ms) - Control exactly how long (in milliseconds) the success message remains on screen before gracefully fading away.
   • Notification padding.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Error Notification - Design Settings

1. Design the alert box that appears when a user encounters a system or submission error.

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

3. Setting options are:

   • Font settings for the error message (typography, weight, styles).
   • Text size, letter spacing, line height, and text color.
   • Notification background color.
   • Automatic Dismiss Timeout (ms) - Determine how long (in milliseconds) the error message is displayed before dismissing.
   • Notification padding.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Form Submission Database Entries

1. Never lose a lead: every successful form submission is securely stored in your WordPress database.

2. With these saved entries directly accessible from your dashboard, you can:

   • View a complete list of all form submissions.
   • Dive into the specific details of individual entries.
   • Easily delete old or unwanted records.

3. Refer to https://wptools.app/how-to/form-database-entries-for-divi-form-builder-with-material-design-plugin/ for more information.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial