How to Include a Contact Form in Your Divi Footer

Divi’s footer is a great place to add a contact form. Fortunately, this is easy to do with the Divi Theme Builder. Of course, we don’t want to just add it anywhere as there are a few things to keep in mind for usability. In this post, we’ll see how to include a contact form in your Divi footer though you could use any contact form plugin that you prefer (though you’re on your own for designing it). We’ll go through a couple of examples to help you get started.

Let’s get started!

Table Of Contents

1 Preview
2 About the Contact Form in Your Divi Footer
- 2.1 Why Include a Contact Form in Your Divi Footer?
- 2.2 Where to Add the Contact Form
3 How to Include a Contact Form in Your Divi Footer
- 3.1 Import Your Divi Footer Layout
4 How to Add the Divi Footer Contact Form
5 How to Style the Divi Footer Contact Form
- 5.1 Divi Footer Contact Form Example One
- 5.2 Divi Footer Contact Form Example Two
6 Results
7 Ending Thoughts

Preview

Desktop Divi Footer Contact Form Example One

Phone Divi Footer Contact Form Example One

Desktop Divi Footer Contact Form Example Two

Phone Divi Footer Contact Form Example Two

About the Contact Form in Your Divi Footer

Why Include a Contact Form in Your Divi Footer?

The footer is a location where visitors will look for specific information. This includes ways to contact you. Adding a contact form to the footer not only makes that contact information visual but also simplifies the process.

Where to Add the Contact Form

When choosing a location for the contact form, look at the other footer elements to see what would clash for attention.

It’s best to place the contact form near other contact information, but you don’t want it fighting the email form. Placing two forms next to each other can confuse your visitors. Place the contact form in a different Row or Section from the email form. Add enough whitespace around the contact form so that it stands apart from the rest of the content.

The example below is from the free Header and Footer Template for Divi’s Stone Factory Layout Pack. This is a great example of how to use a contact form in the footer. This layout includes a contact form and an email form. The contact form is placed with the contact information in a different Row from the links and email form. It’s also a different color than the email form and it’s labeled well, so visitors will know at a glance which form is which.

How to Include a Contact Form in Your Divi Footer

The best way to add a contact form to your Divi footer is by building the footer in the Divi Theme Builder. A contact form can also be added to any existing footer. The process of adding the form is the same.

Import Your Divi Footer Layout

In the WordPress dashboard, go to Divi > Theme Builder. Select Add Global Footer if you don’t have a global footer, select Add New Template, or choose the footer template you want to add the contact form to. We’ll import a new footer. For this example, we’ll add a contact form to the Header & Footer for Divi’s Financial Services Layout Pack.

Select the Portability icon in the upper right corner of the Theme Builder. Navigate to your header and footer template on your computer, select it, and click Import Divi Theme Builder Templates. Save your changes.

Next, select the Edit icon for the footer template. This will open the footer template in the builder where we’ll make our changes.

How to Add the Divi Footer Contact Form

Next, we’ll add the contact form to the footer layout. First, we’ll need to make some adjustments to the layout’s design. We see the layout has two Sections. The top Section has a title to identify that it’s the contact information. This Section includes three types of contact information lined up horizontally.

We’ll stack the contact information on the right, above the email subscription form. Then, we’ll place a Divi Contact Form Module on the left. This increases the size of this Section and balances the footer with a form on each side.

Move the Contact Information

First, drag and drop the Text Modules to the right column. Stack them to show Email on top, Office in the middle, and Phone on the bottom.

Adjust the Row

Next, adjust the Row to show two columns instead of three.

Add the Contact Form

Finally, add a Contact Form Module to the left Column.

We now have a contact form added to our Divi layout. The contact form balances well with the email form on the other side of the layout. Of course, it works but it won’t fit well with the layout’s design until we style it.

How to Style the Divi Footer Contact Form

Now, let’s see how to style the Divi Contact Form Module to match the layout. We’ll look at two examples, including the one we’ve already started. We’ll use design cues from the layout itself.

Divi Footer Contact Form Example One

For this one, we’ll style the form we added in the previous section.

Text

Open the Contact Form Module’s settings. Enter the text for the Title and Submit Button.

Title: Contact Us Today
Submit Button: Get in touch

Fields

Next, go to the Design tab. Change the Fields Background Color to #ffba52 and change the Fields Text Color to #0f1154. Leave the focus colors at their default settings. This allows them to use the same colors as the regular fields.

Background Color: #ffba52
Text Color: #0f1154

Next, change the Fields Font to Montserrat. Set the Weight to Bold and the Size to 16px.

Font: Montserrat
Weight: Bold
Size: 16px

Title Text

Next, scroll down to Title Text. Choose H3 for the Heading Level. The title of this section uses H2, so selecting H3 will build the proper page structure. Select Montserrat for the Font. Select Bold for the Weight and change the Color to #1d4eff.

Heading Level: H3
Font: Montserrat
Weight: Bold
Color: #1d4eff

Captcha Text

Next, scroll down to Captcha Text. We’ll make changes to the Captcha Text in this setting, but we’ll also add some CSS to change the field color. Change the Font to Roboto, the Weight to Medium, and the Color to #1d4eff. We’ll add the CSS at the end.

Font: Roboto
Weight: Medium
Color: #1d4eff

Button

Next, scroll down to Button and enable Use Custom Styles for Button. Change the Font Size to 16px, the Font Color to white, and the Background Color to #1d4eff.

Use Custom Styles for Button: Yes
Size: 16px
Text Color: #ffffff
Background Color: #1d4eff

Set the Border Width and Border Radius to 0px for both. Change the Font to Roboto and the Weight to Medium.

Border Radius: 0px
Border Width: 0px
Font: Roboto
Weight: Medium

Next, scroll down to Button Padding. Enter 14px for the Top and Bottom Padding and 24px for the Left and Right Padding.

Padding: 14px Top and Bottom, 24px Left and Right

Captcha Background

Finally, go to the Advanced tab and scroll down to the Captcha Field. Enter the CSS below into the field. This gives the background a different color from the rest of the form, so users will know it’s different. Now, close the module and save your settings.

Captcha Field CSS:
```
background-color:rgba(255,186,82,0.2)
```

Divi Footer Contact Form Example Two

Let’s look at another example. For this one, I’m using the global footer from the free Header & Footer for Divi’s Podcaster Layout Pack. We’ll replace the contact email with a contact form.

Delete Email Text Module

First, delete the Contact Us and email Text Modules. We’ll replace the title with the one from the Contact Form Module.

Change Row Column Width

Next, change the column layout to display two equal columns. This gives us more room for the contact form.

Adjust Column

Next, we’ll change the Background of the column for the contact form. This gives us more control over the form’s design. Open the settings for the right column.

Scroll down to Background and select the Background Gradient tab. Set the first Gradient Stop’s Color to #f52791 and leave it at its position of 0%. Set the second Gradient Stop’s Color to #3742fb and leave its position at 100%. Change the Direction to 120deg.

First Gradient Stop: #f52791, 0%
Second Gradient Stop: #3742fb, 100%
Direction: 120deg

Next, go to the Design tab. Change the Top and Bottom Padding to 40px and the Left and Right Padding to 30px.

Padding: 40px Top and Bottom, 30px Left and Right.

Next, scroll down to Border and adjust the Rounded Corners. Set the Top Left to 0px, the top Right to 15px, the bottom Left to 15px, and the bottom right to 0px. Close the Column and Row settings.

Rounded Corners:

Top Left: 0px
Top Right: 15px
Bottom Left: 15px
Bottom Right: 0px

Add a Contact Form Module

Next, add a Contact Form Module in place of the Text Modules.

Contact form Content

Add the Title content.

Title: Contact Us

Spam Protection

Scroll down to Spam Protection and disable it.

Use Basic Captcha: No