How to Include a Contact Form in Your Divi Footer

by DS | Feb 14, 2023 | Etcetera | 0 comments

divi-include-contact-form-in-your-footer-ft-img-3-min

Divi’s footer is a brilliant position so as to add a touch shape. Thankfully, that is simple to do with the Divi Theme Builder. After all, we don’t wish to simply upload it anyplace as there are some things to bear in mind for usability. On this publish, we’ll see the way to come with a contact form for your Divi footer. We’ll undergo a few examples that can assist you get began.

Let’s get began!

Preview

Desktop Divi Footer Touch Shape Instance One

Desktop Divi Footer Contact Form Example One

Telephone Divi Footer Touch Shape Instance One

Phone Divi Footer Contact Form Example One

Desktop Divi Footer Touch Shape Instance Two

Desktop Divi Footer Contact Form Example Two

Telephone Divi Footer Touch Shape Instance Two

Phone Divi Footer Contact Form Example Two

In regards to the Touch Shape in Your Divi Footer

Why Come with a Touch Shape in Your Divi Footer?

The footer is a location the place guests will search for particular knowledge. This comprises techniques to touch you. Including a touch shape to the footer now not handiest makes that touch knowledge visible but additionally simplifies the method.

The place to Upload the Touch Shape

When opting for a location for the touch shape, take a look at the opposite footer components to peer what would conflict for consideration.

It’s best possible to position the touch shape close to different touch knowledge, however you don’t need it combating the e-mail shape. Hanging two paperwork subsequent to one another can confuse your guests. Position the touch shape in a special Row or Segment from the e-mail shape. Upload sufficient whitespace across the touch shape in order that it stands except the remainder of the content material.

The instance underneath is from the unfastened Header and Footer Template for Divi’s Stone Factory Layout Pack. It is a nice instance of the way to use a touch shape within the footer. This structure features a touch shape and an electronic mail shape. The touch shape is positioned with the touch knowledge in a special Row from the hyperlinks and electronic mail shape. It’s additionally a special coloration than the e-mail shape and it’s categorised neatly, so guests will know at a look which shape is which.

Where to Add the Contact Form

Easy methods to Come with a Touch Shape in Your Divi Footer

One of the best ways so as to add a touch shape for your Divi footer is through development the footer within the Divi Theme Builder. A touch shape may also be added to any current footer. The method of including the shape is similar.

Import Your Divi Footer Structure

Within the WordPress dashboard, pass to Divi > Theme Builder. Make a choice Upload World Footer should you don’t have a world footer, make a selection Upload New Template, or select the footer template you wish to have so as to add the touch shape to. We’ll import a brand new footer. For this situation, we’ll upload a touch shape to the Header & Footer for Divi’s Financial Services Layout Pack.

Make a choice the Portability icon within the higher proper nook of the Theme Builder. Navigate for your header and footer template to your laptop, make a selection it, and click on Import Divi Theme Builder Templates. Save your adjustments.

Import Your Divi Footer Layout

Subsequent, make a selection the Edit icon for the footer template. This may increasingly open the footer template within the builder the place we’ll make our adjustments.

Import Your Divi Footer Layout

Easy methods to Upload the Divi Footer Touch Shape

Subsequent, we’ll upload the touch shape to the footer structure. First, we’ll want to make some changes to the structure’s design. We see the structure has two Sections. The highest Segment has a name to spot that it’s the touch knowledge. This Segment comprises 3 sorts of touch knowledge coated up horizontally.

We’ll stack the touch knowledge at the proper, above the e-mail subscription shape. Then, we’ll position a Divi Touch Shape Module at the left. This will increase the scale of this Segment and balances the footer with a kind on every aspect.

How to Add the Divi Footer Contact Form

Transfer the Touch Knowledge

First, drag and drop the Textual content Modules to the correct column. Stack them to turn E-mail on most sensible, Place of job within the center, and Telephone at the backside.

Move the Contact Information

Regulate the Row

Subsequent, regulate the Row to turn two columns as a substitute of 3.

Adjust the Row

Upload the Touch Shape

After all, upload a Touch Shape Module to the left Column.

Add the Contact Form

Now we have a touch shape added to our Divi structure. The touch shape balances neatly with the e-mail shape at the different aspect of the structure. After all, it really works but it surely gained’t are compatible neatly with the structure’s design till we taste it.

Add the Contact Form

Easy methods to Taste the Divi Footer Touch Shape

Now, let’s see the way to taste the Divi Touch Shape Module to compare the structure. We’ll take a look at two examples, together with the only we’ve already began. We’ll use design cues from the structure itself.

Divi Footer Touch Shape Instance One

For this one, we’ll taste the shape we added within the earlier segment.

Textual content

Open the Touch Shape Module’s settings. Input the textual content for the Identify and Publish Button.

Identify: Touch Us Lately
Publish Button: Get in contact

Divi Footer Contact Form Example One

Fields

Subsequent, pass to the Design tab. Alternate the Fields Background Colour to #ffba52 and alter the Fields Textual content Colour to #0f1154. Go away the point of interest colours at their default settings. This lets them use the similar colours because the common fields.

Background Colour: #ffba52
Textual content Colour: #0f1154

Divi Footer Contact Form Example One

Subsequent, exchange the Fields Font to Montserrat. Set the Weight to Daring and the Measurement to 16px.

Font: Montserrat
Weight: Daring
Measurement: 16px

Divi Footer Contact Form Example One

Identify Textual content

Subsequent, scroll all the way down to Identify Textual content. Make a selection H3 for the Heading Stage. The name of this segment makes use of H2, so settling on H3 will construct the correct web page construction. Make a choice Montserrat for the Font. Make a choice Daring for the Weight and alter the Colour to #1d4eff.

Heading Stage: H3
Font: Montserrat
Weight: Daring
Colour: #1d4eff

Divi Footer Contact Form Example One

Captcha Textual content

Subsequent, scroll all the way down to Captcha Textual content. We’ll make adjustments to the Captcha Textual content on this atmosphere, however we’ll additionally upload some CSS to modify the sphere coloration. Alternate the Font to Roboto, the Weight to Medium, and the Colour to #1d4eff. We’ll upload the CSS on the finish.

Font: Roboto
Weight: Medium
Colour: #1d4eff

Divi Footer Contact Form Example One

Button

Subsequent, scroll all the way down to Button and permit Use Customized Types for Button. Alternate the Font Measurement to 16px, the Font Colour to white, and the Background Colour to #1d4eff.

Use Customized Types for Button: Sure
Measurement: 16px
Textual content Colour: #ffffff
Background Colour: #1d4eff

Set the Border Width and Border Radius to 0px for each. Alternate the Font to Roboto and the Weight to Medium.

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

Subsequent, scroll all the way down to Button Padding. Input 14px for the Most sensible and Backside Padding and 24px for the Left and Proper Padding.

Padding: 14px Most sensible and Backside, 24px Left and Proper

Captcha Background

After all, pass to the Complicated tab and scroll all the way down to the Captcha Box. Input the CSS underneath into the sphere. This provides the background a special coloration from the remainder of the shape, so customers will understand it’s other. Now, shut the module and save your settings.

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

Divi Footer Contact Form Example One

Divi Footer Touch Shape Instance Two

Let’s take a look at every other instance. For this one, I’m the use of the worldwide footer from the free Header & Footer for Divi’s Podcaster Layout Pack. We’ll substitute the touch electronic mail with a touch shape.