How to Create a Contact Form in Divi

Updated: August 16, 2021

If you want to build a trusted website, you should offer a contact page on your website. In most cases, website owners provide a contact form on the contact page to make it easier for visitors to reach them out. In WordPress, you have a bunch of plugin options to create a contact form, but if you use Divi, you don’t need to install an extra plugin anymore. Instead, you can create a contact page using Divi Builder and use the Contact Form module to add the contact form. This article will show you how.

The Contact Form module of Divi Builder is more than enough to create a contact form. It supports basic field types like text, email, and text area. You can also add input styles like radio button, dropdown, and checkbox. Interestingly, you can also add a conditional logic to show/hide a field based on a certain parameter. For instance, you can show a field once a previous field is filled.

How to Create a Contact Form in Divi

Unlike Elementor (read: Elementor vs Divi), the Contact Form module of Divi Builder can only be used to create a contact form. You can use another module — the Email Optin module — to create an email opt-in form.

Creating a contact using Divi Builder, you have abundance styling options as Divi Builder comes with a visual editor just like other page builders. If you want it, you can use the contact form you created with Divi Builder on Gutenberg.

Creating the Contact Form

To get started, first, create a new page (Pages -> Add New) and edit it with Divi Builder. You have three options to create a page in Divi: from scratch, from a premade layout, and by creating a clone from an existing page. We choose the first option in this example.

Insert a row and then add the Contact Form module. You can read our previous article to learn more about how to work with a row in Divi Builder, as well as section.

As you can see, Divi Builder will automatically load the contact form — which consists of three fields — as you add the Contact Form module. To add a new field, you can simply click the plus button. While to remove an existing field, you can click the trash icon on the field you want to remove.

To edit an existing field, you can click the gear icon on the field you want to edit. Clicking this button will turn the contact form settings panel into fields setting panel whereby you can set things like field ID, field title, and field type.

You can set the field ID and field title on the Text block. While to set the field type, you can open the Field Options block.

Once done setting a field, you can click the undo icon on the top-left corner of the settings panel to switch back to the contact form settings panel.

To set the form title, success message, and submit button you can open the Text block.

Next, you can open the Email block to set the email address where the form submission to be sent to. From this block, you can also set the message pattern in case you want to create a custom message pattern. If you have no idea about the custom message pattern, you can leave the field blank to use the default message pattern.

If you want to add a redirect link, you can simply click the Redirect block to add one.

Adding reCaptcha to the Form

reCaptcha is a spam protection service widely used by WordPress users. The big name of Google is the main reason many people use it. Divi Builder offers a native integration with reCaptcha so that you don’t need to install an extra WordPress plugin to protect your contact form with reCaptcha. You can open the Spam Protection block on the settings panel and enable the Use A Spam Protection Service option to use reCaptcha.

For more detailed instructions on how to protect a Divi form with reCaptcha, you can read our previous article.

Adding Conditional Logic to a Field

As stated above, the Contact Form module of Divi Builder supports condition logic to allow you to show a field based on certain parameters. Here are the parameters you can use:

  • Show a field when other field(s) equal to certain value(s)
  • Show a field when other field(s) contain certain text
  • Show a field when other field(s) is empty
  • Show a field when other field(s) is not empty

You can add multiple parameters.

To add a conditional logic to a field, first, click the gear icon of the field you want to add the conditional logic to. Next, open the Conditional Logic block and enable the conditional logic by toggling the switch.

You can set the parameter on the Rules section. You can add multiple parameters. To add a new one, simply click the plus button.

Styling Up the Form

Once you are done making the necessary settings, it’s time to style up your form. In Divi Builder, you can style up a module from the Design tab on the settings panel. So, simply go to the Design tab to start styling up your form. First, you can open the Fields block to set the set the background of the fields, focus background of the fields, text color of the fields, text color of the fields focus, text colors, and so on.

To set the text alignment, you can open the Text block. To style up the submit button, you can open the Button block. You can enable the Use Custom Styles For Button option to use custom stylings for the submit button. You can read our previous article to learn how to customize a button in Divi Builder.

To customize the border of the fields, you can open the Border block. From this block, you can set the border radius, border type, border width, and border color.

You can play around with other blocks to explore other styling options you can add.

Styling Up Individual Fields

If you want it, you can also use a custom styling on an individual field on your form. For instance, you might want to use a different background color on a certain field.

To add a custom styling on an individual field, first, you can click the gear icon on the field you want to add the style to. Next, you can go to the Design tab and open the blocks to apply the stylings as we have just covered above.

Once you are done editing the form, you can add other modules on your Divi page to make your contact page more appealing. Once done, you can click the Publish button on bottom-right corner to publish your page. To exit Divi Builder editor, you can click the Exit Visual Editor text on the top bar.

How to Use a Divi Form on Gutenberg

Divi has a native integration support with Gutenberg to allow you to add a Divi layout to Gutenberg. This feature allows you to add a Divi form to a blog post or any page you created with Gutenberg.

To use a Divi form on Gutenberg, you need to create a contact layout using Divi first. To do so, go to Divi -> Divi Library and click the Add New button to add a new layout.

Give your layout a name on the Layout Name field. On the Layout Type, select Layout. Click the Submit button.

Create your contact form as we have covered above. Once done, click the Update button on the right sidebar. If you want to edit the form via Divi Editor, you can click the Build On The Front End button.

Once the layout is created, create or edit a new post using Gutenberg. Add a new block and select Divi Layout.

Click Load From Library to select the form layout you have just created above.

On the appearing dialog, click the Your Saved Layouts tab and select the form layout you created.

Potential Error

The Contact Form module of Divi uses wp_mail (the default mail delivery function of WordPress) to send the form submission to your email address. The function itself depends on the send_mail function belongs to PHP to work. So, if the form you created doesn’t work, you can check this area to fix the issue. Not all web hosting providers enable the send_mail function on their hosting plans, especially the shared hosting plans. We recommend you use a managed WordPress hosting or even a Divi hosting which is optimized for Divi.

Alternatively, you can use a third-party mail delivery service like SendGrid and Mandrill to replace the default mail delivery function of WordPress.

Originally posted on: August 16, 2021

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!