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.

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.
• Submit Button: Enter the button name.
• Disable Submit Button Until Required Field Is Filled In: Enable to hide the submit button until all required fields are completed.
• Ajax Submission: Enable to use our Ajax Form Submission feature.
• Hide Form Until Loaded: Enable to hide the form until it loads.
• Use Preloading Animation: Enable to use the pre loading animation.
• Preloading Animation Style: Select the pre loading animation style.
• Scroll To Form After Submission: Enable to scroll to form after the submission.
• Hide Form After Successful Submission: Enable to hide the form after a successful form submission.

Multistep Options

• Enable Multistep: Enable to use the multistep form.
• Form Transition Effect: Select a transition effect between steps.
• Form Transition Effect Speed: Select the transition speed.
• Progress Bar Style: Select the progress bar style.
• Progress Bar Show Percent: Enable to show the percentage of the multistep form.
• Progress Bar Show Step Number In Circle: Enable to show the step number in a circle.
• Progress Bar Step Border Radius: Define the circle radius.
• Progress Bar Show Step Title: Enable to show the step title.
• Go To Next Step On Press Enter: Enable to proceed with enter.

Email Notification

• 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.) 
• Reply-To-Email Name Field ID: Define a reply to the email ID name.
• Reply-To Email Address Field ID: Define a reply-to email address field.
• CC Email List: Define a comma-separated email list.
• BCC Email List: Define a comma-separated email list.
• 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

• 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.
• Sender Email: Input the ID of the input field with the sender's email from the form.
• 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

• 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.

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

• 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.
• Subscriber Name Field ID: Define subscriber name field ID.
• Subscriber Last Name Field ID: Define the subscriber's last name field ID.
• Subscriber Email Field ID: Define the subscriber email field ID.
• Subscribe Email List: Select the email list.
• Subscribe Checkbox Label: Define the label.
• Check Subscribe Checkbox As Default: Enable to check the subscribe checkbox by default.
• 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.

Field Options

• Field Title: Give the field a title.
• Admin 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.
• Is Google Address: Enable if this is a Google Address.
• 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.
• Required Field Message: Enter a message to display.
• Required Message Position: Select the message position.
• Autocomplete Field: Enable to auto-complete the fields.
• Email Input Error Message: Define the email input error message.
• Use Wysiwyg Editor? Enable this button to use the Wysiwyg Editor.
• Textarea Rows: Set the number of rows.
• Textarea Character Limit: Give the text area a limit.
• Auto Detect From Mapped Field: Use this button if you have set up an ACF checkbox field with options.
• Options: Set options if you are not using ACF fields and field mapping.
• Add Images To The Options: Enable to add images.
• Enable Select Placeholder: Enable the placeholder text for a select field.
• Select Placeholder Text: Give the select field placeholder text.
• Hide Upload Image Preview: Enable to hide preview image.
• Hide Upload Preview Title: Enable to hide preview title.
• Hide Upload Preview File Size: Enable to hide preview file size.
• Hide Upload Preview Progress Bar: Enable to hide the progress bar.
• Upload Alt Title: Give the uploaded image an alt title.
• Max Upload File Counts: Set the number of files to upload.
• Max Number Of Files Exceed Error: Set the error message.
• Max Upload File Size: Set the max upload file size.
• Max Upload File Size Error: Set the max upload file size error (if too large).
• Upload Error hide Delay: Set the delay time.
• If On Edit Form - Button Text To Show Upload Box: Set the button text for upload.
• If On Edit Form - Button Text To Close Upload Box: Set the button text for closure.
• Edit Image Instructions Text: Set the instructions for image editing.
• Date & Time Picker Language: Select the language.
• Calendar Date Format: Set the calendar format.
• Content Type: Set the content type.
• Context Text: Give the content some text.
• Code: Give the field some code.
• Divi Library Layout: Select a Divi Library layout.
• Previous Button Text: Give the previous button text.
• Next Button Text: Give the next button text.
• Progress Bar Step Icon: Select the progress bar step icon.

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.
• Enable An Icon On The Input: Enable an icon on the input.
• Radio/Checkbox Field Style: Define the radio.checkbox field style.
• Make Radio/Checkbox Options A Grid Or In One Line: Inline or grid?
• Enable Select2: Enable Select2 or not?
• Upload Description: Give the upload a description.
• Show Upload Icon: Show the upload icon or not.
• Upload Icon Style: Define the upload icon style.
• Icon/Text Alignment: Set the icon/text alignment.
• Upload Icon Drag Animation: Define the upload animation.

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.