Form Field Divi Modules For Divi Form Builder With Material Design

Divi Form Builder With Material Design helps to form-enables a divi section. It marks the section as a form.

Add form fields on 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

Such a setup makes it possible to use divi’s native user interface grid. Since the grid is responsive, forms are responsive.

Pre-requisites

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

Tools

  1. Computer

Total Duration : 3 minutes

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 1 - Enable 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

  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 - Reserved Names For Form Fields

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

  2. It's an unique identifier for the form field. It's advised to use lowercase alphabets and underscore characters.

  3. WordPress has reserved keyword names for field. It advises to avoid using them

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

Step 3 - "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 - An unique internal name assigned to the field. Ensure that it doesn't belong to one of the reserved names mentioned above.
    • 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 to specific where a form should have autocomplete on or off. When autocomplete is ON, the browser automatically completes the value user has entered below.
      • Autocomplete Attribute - Select one of the attribute value that describes your field.
    • Enable Password Field - Set ON if you want the field to act like a password field where user input is not visible of the field. Instead of input text, star (*) characters show.

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

Step 4 - "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 - An unique internal name assigned to the field. Ensure that it doesn't belong to one of the reserved names mentioned above.
    • 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 cards required.

Step 5 - "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 - An unique internal name assigned to the field. Ensure that it doesn't belong to one of the reserved names mentioned above.
    • 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 cards required.

Step 6 - "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 - An unique internal name assigned to the field. Ensure that it doesn't belong to one of the reserved names mentioned above.
    • 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 cards required.

Step 7 - "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 - An unique internal name assigned to the field. Ensure that it doesn't belong to one of the reserved names mentioned above.
    • 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 cards required.

Step 8 - "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 - An unique internal name assigned to the field. Ensure that it doesn't belong to one of the reserved names mentioned above.
    • 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 cards required.

Step 9 - "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 - An unique internal name assigned to the field. Ensure that it doesn't belong to one of the reserved names mentioned above.
    • 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 cards required.

Step 10 - "Consent" Divi Module

  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 - An unique internal name assigned to the field. Ensure that it doesn't belong to one of the reserved names mentioned above.
    • 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 cards required.

Step 11 - "Submit Button" Divi Module

  1. Creates a submit button which submits the form to a form-handler. 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 cards required.

Step 12 - Styling Form Fields

  1. Form styling options are available in the divi section setting's Design tab

  2. Refer to the detailed guide on how to style the form elements - https://wptools.app/how-to/build-contact-form-on-divi-visual-builder-using-material-design/

FREE DOWNLOAD

Start your FREE trial. No credit cards required.