Form Module

Written by the Divi Engine Documentation Team

Watch This Video

Introduction

The Form Module is used to create a variety of forms such as a contact form, post create form, register and login form, etc. Add the module to any page and customize it as described below and in our other docs.

Content Tab: Main Settings

The content tab has the main settings and then settings that relate to each specific field. Below you will find explanations of each setting. The design tab has the same layout as any other Divi module and is used to style the element.

Main Options

  • Form Title: Give your form a name.
  • Form ID: Give your form an ID (perhaps the name of the form?)
  • Form Type: Select the type of form. There are basically two types of forms. Create forms and input forms. Create forms are forms that users can fill out to create a page, post or custom post type on your website. The input forms, such as contact and login, only allow users to send information to you and/or your database to communicate or log in.
  • Contact Form: Create a contact form.
  • Create Post Form: Add new posts from the frontend.
  • Create Page Form: Add new pages from the frontend.
  • User Registration Form: Create a form that will register users to the website.
  • Login Form: Form for users to log into the website.
  • Custom Form: Used by developers to extend the form for additional functionality.
  • Confirm Password Error: Define the text to appear when the passwords do not match. 
  • Is User Edit Form: Enable if this is the user edit form.
  • Default User Role: Select the user role.
  • Already Logged In text: Define the already logged in text. 
  • Submit Button: Enter the button name.
  • Post Create Form: Default Post Status. This allows you to select the default status when the post is added. Examples are draft, published, etc.
  • Registration Form: Default User Role. This allows you to set the type of user role such as Customer, Administrator, etc. 
  • Ajax Submission: Enable to use our Ajax Form Submission feature.
  • Ajax Processing Submit Button Text: Define the text to display alongside the Ajax Submission.
  • Scroll To Form After Submission: Enable to scroll to form after the submission.

Email Notifications Options

  • Send To Email Address: Select one of four options. Admin email, author of the current post, ACF field of current post (define in a new field that will appear underneath) and Custom email (define in a new field that will appear underneath).
  • From Name: Select one of three options. Site title, the sender (define in a new field that will appear underneath) or custom (define in a new field that will appear underneath.) 
  • From Email: Select one of three options. Admin, the sender (define in a new field that will appear underneath) or custom (define in a new field that will appear underneath.) 
  • Email Subject: Write an email subject or use the data from an input field using the ID. For example, if you have a name Input field with ID = name you could add %%name%% to define the email subject as the user's name.
  • Email Template: Here you can define the custom pattern for the email Message. Fields should be included in the following format %%field_id%%. For example, if you want to include the field with id = phone and field with id = message, then you can use the following pattern: My message is %%message%% and phone number is %%phone%%. Leave blank for default. Please click HERE for more information.

Email Confirmation Options

  • Enable Confirmation Email: Enable the button to activate this feature.
  • Send To Email: Select one of two options. Sender (define in a new field that will appear underneath) and logged in user.
  • From Name: Select one of three options. Site title, the sender (define in a new field that will appear underneath) or custom (define in a new field that will appear underneath.) 
  • From Email: Select one of two options. Admin or custom (define in a new field that will appear underneath.) 
  • Reply-to Email Name: Define the name of the reply email. For example, when a user receives the email confirmation in their inbox they will have the option of replying. It is the name of this "Reply-to" email that you can define in this section.
  • Reply-to Email Address: Define the email address of the reply email. For example, when a user receives the email confirmation in their inbox they will have the option of replying. It is the email address of this "Reply-to" email that you can define in this section.
  • Email Subject: Write an email subject or use the data from an input field using the ID. For example, if you have a name Input field with ID = name you could add %%name%% to define the email subject as the user's name.
  • Email Template: Here you can define the custom pattern for the email Message. Fields should be included in the following format %%field_id%%. For example, if you want to include the field with id = phone and field with id = message, then you can use the following pattern: My message is %%message%% and phone number is %%phone%%. Leave blank for default. Please click HERE for more information.

Notices Options

  • Notice Message Display Position: Select where you would like your form notices to appear. You have four options: Before Form Title, After Form Title, Before Submit Button and After Submit Button.
  • Success Message Type: Select text or a Divi layout for your success message notice.
  • Success Message Text: If you have selected text then enter the success message text into this field.
  • Success Message Layout: If you have selected the Divi Layout then select if from the dropdown.
  • Failed Message Type: Select text or a Divi layout for your failed message notice.
  • Failed Message Text: If you have selected text then enter the failed message text into this field. Make sure to add %%message%% into the field to receive relevant notices.
  • Failed Message Layout: If you have selected the Divi Layout then select if from the dropdown. Make sure to add %%message%% into your layout to receive relevant notices.

Redirects Options

  • Redirects to another URL after successful submission: Enable if you would like your form to redirect after successful submission.
  • Redirect URL after submission: Enter the URL for successful redirection.
  • Redirects to another URL after failed submission: Enable if you would like your form to redirect after a failed submission.
  • Redirect URL after submission failed: Enter the URL for failed redirection.

Extra Options

  • Save Entries to Database: Enable if you would like your contact form to save to your WordPress database. View your entries in Divi Engine > Divi Form Entries.
  • Enable Bloom Subscription: Bloom is an elegant theme plugin for email subscriptions. Install and set up Bloom, enable this button and select the appropriate Bloom list.
  • Enable Select2 for your Select: Select2 is another way of showing your select dropdown. To enable this, enable Select2 in the Divi Form module and in the Select2 option in the field.

Spam Protection Options

  • Add Basic CAPTCHA field: Enable to use the simple math CAPTCHA.
  • Add Google reCAPTCHA: Enable to use the Google reCAPTCHA.
  • reCAPTCHA Type: Select v2 or v3 (depending on how you have set up your reCAPTCHA).
  • Google reCAPTCHA Site Key: Enter the site key from your Google account.
  • Add Honeypot CAPTCHA field: Enable to use a honeypot field.

Content: Form Field

Field Options

  • Field Title: Give the field a title.
  • Field ID: Give the field an ID (we suggest the title).
  • Type: Select a field type. As you can see there are many options such as the input field, email field, password field, text area, etc.
  • Max Length: Set the maximum number of characters set. Leave as default for unlimited.
  • Min Length: Set the minimum number of characters set. Leave as default for unlimited.
  • Allowed Symbols: Select the allowed symbols.
  • Required Field: Enable this button if you would like to have this field required.
  • Date & Time Picker Language: Select the language for your Date field.
  • Calendar Date Format: Define the calendar date format.
  • Email Field: Is the recipient's email address? Enable this button if the email address is the recipient's email address.
  • Text Area: Use Wysiwyg Editor? Enable this button to use the Wysiwyg Editor.
  • Text Area: Textarea Rows. Set the number of rows.
  • Checkboxes/Radio/Select: Auto Detect? Use this button if you have set up an ACF checkbox field with options.
  • Checkboxes/Radio/Select: Options. Set options if you are not using ACF fields and field mapping.
  • Hidden Field: Hidden Field Value. Select the type of data to send with the form.
  • Content: Content Type. Select Text, Code or Divi Library Layout.
  • Content: Content Text. Write your text in the space provided.
  • Content: Content Code. Write your code (e.g. HTML) in the space provided.
  • Content: Content Library Layout. Select your layout.
  • File/Image Upload: Hide Upload Image Preview. Enable to hide preview image.
  • File/Image Upload: Hide Upload Preview Title. Enable to hide preview title.
  • File/Image Upload: Hide Upload Preview File Size. Enable to hide preview file size.
  • File/Image Upload: Hide Upload Preview Progress Bar. Enable to hide the progress bar.
  • File/Image Upload: Max Upload File Counts. Set the number of files to upload.
  • File/Image Upload: Max Number Of Files Exceed Error. Set the error message.
  • File/Image Upload: Accepted File Types. Set the accepted file types.
  • File/Image Upload: Accepted File Types Error. Set the error message.
  • File/Image Upload: Upload Error hide Delay. Set the delay time.

Layout Options.

  • Columns For Grid: Set whether you would like the field to be displayed fullwidth (4/4), Three Quarters (3/4), etc.
  • Field Label Position: Select where you would like to display the field name. Either inside the field (placeholder) or another position.
  • Placeholder Text: If you select the placeholder, then enter the placeholder text.
  • Add A Description: Enable this button to add a short description to the field.
  • Description Location: Set the description location.
  • Description Text: Write out the description text.
  • Password Field: Password Secondary icon. Set the password icon that will show when the password is shown. Note that the first icon will show the hidden password, but when clicked it will reveal the real password and the secondary icon.
  • Password Field: Password Secondary Icon Color. Set the secondary icon colour.
  • Checkboxes/Radio: Color. Select the colour of the radio/checkboxes.
  • Checkboxes/Radio: Make Radio/Checkbox inline. Enable this button to set the radio buttons or checkboxes inline.
  • Select: Enable Select2. Enable this button to use Select2.
  • File/Image Upload: Upload Description. Set the upload description.
  • File/Image Upload: Show Upload Icon. Enable to show upload icon.
  • File/Image Upload: Upload Icon Style. Set the upload icon style.
  • File/Image Upload: Icon/Text Alignment. Set the alignment of the icon and text.
  • File/Image Upload: Upload Icon Drag Animation. Set the icon animation when an image is dragged over it.
  • Input/Email/Password: Enable Icon On The Input. Enable to show an icon.
  • Input/Email/Password: Icon. Select the icon.
  • Input/Email/Password: Icon Color. Set the icon colour.
  • Input/Email/Password: Icon Font Size. Set the icon font size.
  • Input/Email/Password: Icon From Top. Set the position of the icon on the input field.

Mapping Options (create forms only)

  • Field Mapping Type: Select the mapping type. For example, ACF Field or the Default.
  • Field Mapping: Select where to map the content. For example, a specific ACF field or the Post Title.

Conditional Logic Options

  • Enable: Enable the button to use conditional logic.
  • Relation: Select whether all or any of the rules should apply.
  • Rules: Create the rules.
  • Form Title: Please click HERE for more information on conditional logic.

More Support?

Please email us at [email protected] if you are unable to get Divi Form Builder working.


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us