The way to Come with a Touch Shape in Your Divi Footer

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

Desktop-Divi-Footer-Contact-Form-Example-One

Divi’s footer is a great place so that you can upload a marginally form. Fortunately, this is easy to do with the Divi Theme Builder. In truth, we don’t want to merely add it anywhere as there are a few things to bear in mind for usability. In this submit, we’ll see the right way to include a touch shape to your Divi footer. We’ll go through a couple of examples to help you get started.

Let’s get started!

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

In regards to the Contact Form in Your Divi Footer

Why Include a Contact Form in Your Divi Footer?

The footer is a location where visitors will seek for specific wisdom. This incorporates ways to the touch you. Together with a marginally form to the footer not most straightforward makes that contact wisdom visual however as well as simplifies the process.

Where to Add the Contact Form

When choosing a location for the contact form, check out the other footer portions to look what would battle for attention.

It’s absolute best imaginable to put the contact form on the subject of other contact wisdom, then again you don’t want it preventing the email form. Putting two forms next to each other can confuse your visitors. Place the contact form in a distinct 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 material subject material.

The example beneath is from the loose Header and Footer Template for Divi’s Stone Manufacturing facility Structure Pack. This is a great example of the right way to use a marginally form inside the footer. This layout includes a contact form and an email correspondence form. The contact form is situated with the contact wisdom in a distinct Row from the links and email correspondence form. It’s moreover a distinct colour than the email form and it’s categorised well, so visitors will know at a glance which form is which.

Where to Add the Contact Form

Methods to Include a Contact Form in Your Divi Footer

Probably the most most straightforward techniques so that you can upload a marginally form to your Divi footer is by way of building the footer inside the Divi Theme Builder. A slightly form can also be added to any provide footer. The process of together with the form is the same.

Import Your Divi Footer Construction

Throughout the WordPress dashboard, move to Divi > Theme Builder. Select Add World Footer whilst you don’t have a world footer, choose Add New Template, or select the footer template you wish to have so that you can upload the contact form to. We’ll import a brand spanking new footer. For this example, we’ll add a marginally form to the Header & Footer for Divi’s Monetary Services and products Structure Pack.

Select the Portability icon inside the upper right kind corner of the Theme Builder. Navigate to your header and footer template for your pc, choose it, and click on on Import Divi Theme Builder Templates. Save your changes.

Import Your Divi Footer Layout

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

Import Your Divi Footer Layout

Methods to Add the Divi Footer Contact Form

Next, we’ll add the contact form to the footer layout. First, we’ll wish to make some adjustments to the layout’s design. We see the layout has two Sections. The easiest Section has a reputation to identify that it’s the contact wisdom. This Section incorporates 3 forms of contact wisdom lined up horizontally.

We’ll stack the contact wisdom at the correct, above the email subscription form. Then, we’ll place a Divi Contact Form Module on the left. This may building up the scale of this Section and balances the footer with a kind on every side.

How to Add the Divi Footer Contact Form

Switch the Contact Wisdom

First, drag and drop the Text Modules to the suitable column. Stack them to show E-mail on best, Place of work inside the center, and Phone on the bottom.

Move the Contact Information

Keep watch over the Row

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

Adjust the Row

Add the Contact Form

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

Add the Contact Form

Now we have now a marginally form added to our Divi layout. The contact form balances well with the email form on the other side of the layout. In truth, it actually works then again it received’t fit well with the layout’s design until we style it.

Add the Contact Form

Methods to Style the Divi Footer Contact Form

Now, let’s see the right way to style the Divi Contact Form Module to test the layout. We’ll check out two examples, along side 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 inside the previous phase.

Text

Open the Contact Form Module’s settings. Enter the text for the Determine and Put up Button.

Determine: Contact Us In this day and age
Put up Button: Get in touch

Divi Footer Contact Form Example One

Fields

Next, move to the Design tab. Business the Fields Background Color to #ffba52 and change the Fields Text Color to #0f1154. Leave the focus colors at their default settings. This lets them use the an identical colors since the commonplace fields.

Background Color: #ffba52
Text Color: #0f1154

Divi Footer Contact Form Example One

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

Font: Montserrat
Weight: Bold
Size: 16px

Divi Footer Contact Form Example One

Determine Text

Next, scroll proper all the way down to Determine Text. Make a selection H3 for the Heading Level. The identify of this phase uses H2, so settling on H3 will assemble the proper internet web page building. 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

Divi Footer Contact Form Example One

Captcha Text

Next, scroll proper all the way down to Captcha Text. We’ll make changes to the Captcha Text in this surroundings, then again we’ll moreover add some CSS to switch the field colour. Business 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

Divi Footer Contact Form Example One

Button

Next, scroll proper all the way down to Button and make allowance Use Custom designed Types for Button. Business the Font Size to 16px, the Font Color to white, and the Background Color to #1d4eff.

Use Custom designed Types for Button: Certain
Size: 16px
Text Color: #ffffff
Background Color: #1d4eff

Set the Border Width and Border Radius to 0px for every. Business the Font to Roboto and the Weight to Medium.

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

Next, scroll proper all the way down to Button Padding. Enter 14px for the Best and Bottom Padding and 24px for the Left and Correct Padding.

Padding: 14px Best and Bottom, 24px Left and Correct

Captcha Background

Finally, move to the Difficult tab and scroll proper all the way down to the Captcha Field. Enter the CSS beneath into the field. This provides the background a distinct colour from the rest of the form, so consumers will comprehend 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 One

Divi Footer Contact Form Example Two

Let’s check out each different example. For this one, I’m the use of the global footer from the unfastened Header & Footer for Divi’s Podcaster Structure Pack. We’ll trade the contact email correspondence with a marginally form.