Form Field Divi Modules For Divi Form Builder With Material Design

Divi Form Builder With Material Design transforms any standard Divi section into a fully functional form container.

Add form fields to this section via corresponding divi modules.

It supports following form fields

• Single Line Text – A single line text field.
• Paragraph Text – A multi line text field
• Checkbox – A multi-select tickbox field
• Radio -A radio field to select a single option
• File Upload – A field to enable file uploads
• Drop Down – Dropdown field to select an option from multi-choices.
• Email – A text field with email validation
• Consent – A field with a tick switch toggle and description
• Submit Button – A field to create form’s submit button

This approach allows you to build forms using Divi’s intuitive, mobile-friendly grid, ensuring your forms automatically adapt to look perfect on any device.

Pre-Requisites

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

Enable Form On Divi Section

1. The plugin works by converting a standard Divi section into a functional form.

2. This section serves as the main container for your form. You can add your desired form field modules directly inside it.

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

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 card required.

Start Risk-Free Trial

Reserved Names For Form Fields

1. Each form field divi module has a setting called Field Name

2. This serves as a unique background label for the field. We recommend using lowercase letters and underscores.

3. WordPress reserves certain keywords for its core functions; to prevent technical conflicts, please avoid using these specific names.

4. Source : https://codex.wordpress.org/Reserved_Terms

5. Avoid using the following reserved names - m, p, posts, w, cat, withcomments, withoutcomments, s, search, exact, sentence, calendar, page, paged, more, tb, pb, author, order, orderby, year, monthnum, day, hour, minute, second, name, category_name, tag, feed, author_name, static, pagename, page_id, error, attachment, attachment_id, subpost, subpost_id, preview, robots, taxonomy, term, cpage, post_type, embed

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

“Single Line Text” Divi Module

1. It create a single line text field for the divi form. To add one,

   • Edit a page in divi’s visual builder.
   • Within a divi row click on the plus icon for Add New Module
   • Search for Single Line Text - MD, click and add the divi module.
   • The divi module’s settings shows up.

2. General Section Toggle Settings In Content Tab

   It has the following fields

   • Label Text - Set the text for the field label
   • Field Name - A unique background label for the field. Ensure it does not use any of the reserved WordPress names mentioned earlier.
   • Default Value - A default text value for the field.
   • Placeholder Text - A short hint that describes the expected value of the field. Shown inside the field.
   • Helper Text - A verbose text that provides extra information about the field
   • Enable Autocomplete - A toggle that lets the user’s browser automatically fill in previously saved information, saving them time.
     • Autocomplete Attribute - Select the appropriate data type that best describes the information you are collecting.
   • Enable Password Field - Enable this to mask sensitive user input, displaying asterisks (*) instead of the typed text.

3. Validation Section Toggle Settings In Content Tab

   This section setups It has the following fields

   • Required toggle field. Makes form input compulsory when enable.
   • Required Error Message - The error message text to use when required validation fails.
   • Min Length - A toggle when enabled, allows to setup minimum input length validation
     • Minimum Character Length - Set the minimum number of characters needed for the validation to pass.
     • Min Length Error Message - The error message text to use when the validation fails
   • Max Length - A toggle when enabled, allows to setup maximum input length validation
     • Maximum Character Length - Set the maximum number of characters, above which the validation fails.
     • Max Length Error Message - The error message text to use when the validation fails

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

“Paragraph Text” Divi Module

1. Create a multi-line text field for the divi form. To add one,

   • Edit a page in divi’s visual builder.
   • Within a divi row click on the plus icon for Add New Module
   • Search for Paragraph Text - MD, click and add the divi module.
   • The divi module’s settings shows up.

2. General Section Toggle Settings In Content Tab

   It has the following fields

   • Label Text - Set the text for the field label
   • Field Name - A unique background label for the field. Ensure it does not use any of the reserved WordPress names mentioned earlier.
   • Default Value - A default text value for the field.
   • Placeholder Text - A short hint that describes the expected value of the field. Shown inside the field.
   • Helper Text - A verbose text that provides extra information about the field
   • Rows - Set number of rows for the paragraph text input. It controls the height.

3. Validation Section Toggle Settings In Content Tab

   This section setups It has the following fields

   • Required toggle field. Makes form input compulsory when enable.
   • Required Error Message - The error message text to use when required validation fails.
   • Min Length - A toggle when enabled, allows to setup minimum input length validation
     • Minimum Character Length - Set the minimum number of characters needed for the validation to pass.
     • Min Length Error Message - The error message text to use when the validation fails
   • Max Length - A toggle when enabled, allows to setup maximum input length validation
     • Maximum Character Length - Set the maximum number of characters, above which the validation fails.
     • Max Length Error Message - The error message text to use when the validation fails

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

“Checkbox” Divi Module

1. Create a multi-select tickbox field for the divi form. To add one,

   • Edit a page in divi’s visual builder.
   • Within a divi row click on the plus icon for Add New Module
   • Search for Checkbox - MD, click and add the divi module.
   • The divi module’s settings shows up.

2. General Section Toggle Settings In Content Tab

   It has the following fields

   • Label Text - Set the text for the field label
   • Field Name - A unique background label for the field. Ensure it does not use any of the reserved WordPress names mentioned earlier.
   • Choices - A comma-separated list of choices. For example, First Choice,Second Choice,Third Choice etc.
   • Default Value - A comma-separated list of default values
   • Helper Text - A verbose text that provides extra information about the field
   • Layout - Layout for the checkbox options. Options are
     • Horizontal
       • Arranges the checkboxes horizontally.
       • Columns - Set the number of columns for horizontal layout.
     • Vertical
       • Arranges the checkboxes vertically

3. Validation Section Toggle Settings In Content Tab

   This section setups It has the following fields

   • Required toggle field. Makes form input compulsory when enable.
   • Required Error Message - The error message text to use when required validation fails.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

“Radio Buttons” Divi Module

1. Helps create a set of radio buttons & enable user to select a value. To add one,

   • Edit a page in divi’s visual builder.
   • Within a divi row click on the plus icon for Add New Module
   • Search for Radio Buttons - MD, click and add the divi module.
   • The divi module’s settings shows up.

2. General Section Toggle Settings In Content Tab

   It has the following fields

   • Label Text - Set the text for the field label
   • Field Name - A unique background label for the field. Ensure it does not use any of the reserved WordPress names mentioned earlier.
   • Choices - A comma-separated list of choices. For example, First Choice,Second Choice,Third Choice etc.
   • Default Value - A default text value. Should be one of the choices
   • Helper Text - A verbose text that provides extra information about the field
   • Layout - Layout for the radio options. Options are
     • Horizontal
       • Arranges the radio buttons horizontally.
       • Columns - Set the number of columns for horizontal layout.
     • Vertical
       • Arranges the radio buttons vertically

3. Validation Section Toggle Settings In Content Tab

   This section setups It has the following fields

   • Required toggle field. Makes form input compulsory when enable.
   • Required Error Message - The error message text to use when required validation fails.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

“File Upload” Divi Module

1. An input field for uploading a file to the form. To add one,

   • Edit a page in divi’s visual builder.
   • Within a divi row click on the plus icon for Add New Module
   • Search for File Upload - MD, click and add the divi module.
   • The divi module’s settings shows up.

2. General Section Toggle Settings In Content Tab

   It has the following fields

   • Label Text - Set the text for the field label
   • Field Name - A unique background label for the field. Ensure it does not use any of the reserved WordPress names mentioned earlier.
   • Helper Text - A verbose text that provides extra information about the field
   • Allowed File Extensions - A comma-separated list of allowed file extensions

3. Validation Section Toggle Settings In Content Tab

   This section setups It has the following fields

   • Required toggle field. Makes field upload compulsory when enabled.
     • Required Error Message - The error message text to use when required validation fails.
   • Upload Limit - Set the maximum upload limit in megabytes
     • Upload Limit Error Message - The error message text to use when file size exceeds upload limit.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

“Drop Down” Divi Module

1. Allows user to create a dropdown field with multi-choices. To add one,

   • Edit a page in divi’s visual builder.
   • Within a divi row click on the plus icon for Add New Module
   • Search for Drop Down - MD, click and add the divi module.
   • The divi module’s settings shows up.

2. General Section Toggle Settings In Content Tab

   It has the following fields

   • Label Text - Set the text for the field label
   • Field Name - A unique background label for the field. Ensure it does not use any of the reserved WordPress names mentioned earlier.
   • Choices - A comma-separated list of choices. For example, First Choice,Second Choice,Third Choice etc.
   • Default Value - A default text value. Should be one of the choices
   • Helper Text - A verbose text that provides extra information about the field

3. Validation Section Toggle Settings In Content Tab

   This section setups It has the following fields

   • Required toggle field. Makes form input compulsory when enable.
   • Required Error Message - The error message text to use when required validation fails.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

“Email” Divi Module

1. It create a single line email text field for the divi form. To add one,

   • Edit a page in divi’s visual builder.
   • Within a divi row click on the plus icon for Add New Module
   • Search for Email - MD, click and add the divi module.
   • The divi module’s settings shows up.

2. General Section Toggle Settings In Content Tab

   It has the following fields

   • Label Text - Set the text for the field label
   • Field Name - A unique background label for the field. Ensure it does not use any of the reserved WordPress names mentioned earlier.
   • Default Value - A default text value for the field.
   • Placeholder Text - A short hint that describes the expected value of the field. Shown inside the field.
   • Helper Text - A verbose text that provides extra information about the field

3. Validation Section Toggle Settings In Content Tab

   This section setups It has the following fields

   • Required toggle field. Makes form input compulsory when enabled.
     • Required Error Message - The error message text to use when required validation fails.
   • Email toggle field. When set ON, enables email validation
     • Email Validation Error Message - The error message text displayed on email validation error.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

“Consent” Divi Module

[[YOUTUBE_EMBED:f_WNABrZqw4]]

1. An advanced field that offers a toggle switch and a detailed consent description. To add one,

   • Edit a page in divi’s visual builder.
   • Within a divi row click on the plus icon for Add New Module
   • Search for Consent - MD, click and add the divi module.
   • The divi module’s settings shows up.

2. General Section Toggle Settings In Content Tab

   It has the following fields

   • Checkbox Label - Label for the checkbox toggle switch
   • Field Name - A unique background label for the field. Ensure it does not use any of the reserved WordPress names mentioned earlier.
   • Checkbox Default - Set a default value for the checkbox. Options are CHECKED and UNCHECKED
   • Consent Text - A text that describes the consent request in detail.

3. Validation Section Toggle Settings In Content Tab

   This section setups It has the following fields

   • Required toggle field. Makes form input compulsory when enabled.
     • Required Error Message - The error message text to use when required validation fails.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

“Submit Button” Divi Module

1. Creates the button users click to securely send their completed form. To add one,

   • Edit a page in divi’s visual builder.
   • Within a divi row click on the plus icon for Add New Module
   • Search for Submit - MD, click and add the divi module.
   • The divi module’s settings shows up.

2. General Section Toggle Settings In Content Tab

   It has the following fields

   • Button Label - Label for the submit button
   • Full Width - Makes button full width when set to ON

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial