How to Seamlessly Include a Slide-In Column Contact Form in Your Divi Hero Section

Last Updated on September 16, 2022 by 4 Comments

How to Seamlessly Include a Slide-In Column Contact Form in Your Divi Hero Section
Blog / Divi Resources / How to Seamlessly Include a Slide-In Column Contact Form in Your Divi Hero Section

When thinking of ways to include CTAs in your page design, you might consider including a contact form in your hero section. This approach allows people to immediately get in touch with you without having to navigate any further on your website. If youโ€™re looking for a seamless way to make this work inside Divi, youโ€™re going to love this post. In this tutorial, weโ€™ll show you how to add a slide-in column contact form to your hero section using Diviโ€™s built-in options only. Youโ€™ll be able to download the JSON file for free as well!

Letโ€™s get to it.

Preview

Before we dive into the tutorial, letโ€™s take a quick look at the outcome across different screen sizes.

Desktop

column contact form

Mobile

column contact form

Download The Column Contact Form Hero Section Layout for FREE

To lay your hands on the free column contact form hero section layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If youโ€™re already on the list, simply enter your email address below and click download. You will not be โ€œresubscribedโ€ or receive extra emails.

Letโ€™s Start Recreating

Add New Section

Background Color

Start by adding a new section to the page youโ€™re working on. Open the section settings and change the background color.

  • Background Color: #ff8949

column contact form

Background Image

Weโ€™re uploading a background pattern thatโ€™s part of the Financial Advisor Layout Pack next. You can find this background image in the folder you were able to download at the beginning of this post.

  • Background Image Size: Fit
  • Background Image Position: Center

column contact form

Spacing

Move on to the sectionโ€™s design tab and remove all default top and bottom padding.

  • Top Padding: 0px
  • Bottom Padding: 0px

column contact form

Overflows

Complete the section settings by hiding the overflows in the advanced tab. This will make sure the animations we add later wonโ€™t go beyond the section container.

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

column contact form

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

column contact form

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings as follows:

  • Equalize Column Heights: Yes
  • Width: 80% (Desktop), 100% (Tablet & Phone)
  • Max Width: 1380px
  • Row Alignment: Right

column contact form

Spacing

Remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

column contact form

Column 1 Settings

Spacing

Then, open the column 1 settings and modify the spacing settings across different screen sizes.

  • Top Padding: 22%
  • Bottom Padding: 22%
  • Left Padding: 10% (Tablet & Phone Only)
  • Right Padding: 10% (Tablet & Phone Only)

column contact form

Column 2 Settings

Background Color

Next, weโ€™ll open the column 2 settings and use a white background color.

  • Background Color: #ffffff

column contact form

Animation

Weโ€™ll complete the column 2 settings by applying the following animation settings:

  • Animation Direction: Left (Desktop), Up (Tablet & Phone)
  • Animation Duration: 1500ms
  • Animation Intensity: 70%
  • Animation Starting Opacity: 100%

column contact form

Add Text Module #1 to Column 1

Add H1 Content

Time to add modules, starting with a first Text Module in column 1. Add some H1 content of your choice.

column contact form

H1 Text Settings

Move on to the moduleโ€™s design tab and change the H1 text settings as follows:

  • Heading Font: Oswald
  • Heading Font Style: Uppercase
  • Heading Text Color: #ffffff
  • Heading Text Size: 120px (Desktop), 70px (Tablet), 60px (Phone)

column contact form

Sizing

Weโ€™re changing the moduleโ€™s sizing settings as well.

  • Width: 75% (Desktop), 100% (Tablet & Phone)
  • Module Alignment: Left

column contact form

Add Text Module #2 to Column 1

Add Description Content

On to the next module, which is another Text Module. Add some description content of your choice.

column contact form

Text Settings

Move on to the moduleโ€™s design tab and change the text settings accordingly:

  • Text Font: Open Sans
  • Text Color: #ffffff
  • Text Line Height: 1.9em

column contact form

Sizing

Modify the sizing settings too.

  • Width: 75% (Desktop), 100% (Tablet & Phone)
  • Module Alignment: Left

column contact form

Add Button Module to Column 1

Add Copy

The last module we need in column 1 is a Button Module. Add some copy of your choice.

column contact form

Button Settings

Move on to the moduleโ€™s design tab and change the button settings as follows:

  • Use Custom Styles For Button: Yes
  • Button Text Color: #ffffff
  • Button Border Radius: 1px

column contact form

  • Button Font: Oswald
  • Button Font Style: Uppercase

column contact form

Add Blurb Module to Column 2

Add Content

On to the second column. There, the first module we need is a Blurb Module. Add a title of your choice.

column contact form

Select Icon

Next, select an icon.

column contact form

Icon Settings

Move on to the moduleโ€™s design tab and change the icon settings as follows:

  • Icon Color: #ffd8c6
  • Icon Placement: Top
  • Icon Alignment: Center
  • Use Icon Font Size: Yes
  • Icon Font Size: 250px (Desktop), 150px (Tablet & Phone)

column contact form

Title Text Settings

Modify the title text settings next.

  • Title Heading Level: H2
  • Title Font: Oswald
  • Title Font Style: Uppercase
  • Title Text Alignment: Center
  • Title Text Color: #ff8949
  • Title Text Size: 38px

column contact form

Spacing

Add some left and right padding too.

  • Left Padding: 11%
  • Right Padding: 11%

column contact form

Animation

And complete the module by adding the following animation settings:

  • Animation Direction: Down
  • Animation Duration: 1100ms
  • Animation Delay: 400ms
  • Animation Starting Opacity: 100%

column contact form

Add Contact Form Module to Column 2

Turn Fields Fullwidth

On to the last module, which is a Contact Form Module. Open the name and email fields individually and make them fullwidth in the layout settings.

column contact form

  • Make Fullwidth: Yes

column contact form

Background Color

Then, go back to the general Contact Form Module settings and add a background color.

  • Background Color: #f7f7f7

column contact form

Fields Settings

Move on to the design tab and make some changes to the fields settings next.

  • Fields Background Color: #ffffff
  • Fields Text Color: #ff8949
  • Fields Top Margin: 15px
  • Fields Bottom Margin: 15px
  • Fields Top Padding: 20px
  • Fields Bottom Padding: 20px

column contact form

  • Fields Font: Oswald
  • Fields Font Style: Uppercase
  • Fields Text Alignment: Center
  • Fields Text Size: 21px

column contact form

Button Settings

Then, style the button accordingly:

  • Use Custom Styles For Button: Yes
  • Button Text Color: #ff8949
  • Button Border Radius: 1px

column contact form

  • Button Font: Oswald
  • Button Font Style: Uppercase

column contact form

Sizing

Weโ€™re also making sure the width is โ€˜100%โ€™ in the sizing settings.

  • Width: 100%

column contact form

Spacing

Move on to the spacing settings next and apply some custom padding values.

  • Top Padding: 14%
  • Bottom Padding: 14%
  • Left Padding: 12%
  • Right Padding: 12%

column contact form

Animation

Then, use the following animation settings:

  • Animation Style: Slide
  • Animation Direction: Up
  • Animation Duration: 1100ms
  • Animation Delay: 400ms
  • Animation Starting Opacity: 100%

column contact form

Position

And complete the module settings (and the tutorial) by repositioning the module on desktop only:

  • Position: Absolute (Desktop), Default (Tablet & Phone)
  • Location: Bottom Center

column contact form

Preview

Now that weโ€™ve gone through all the steps, letโ€™s take a final look at the outcome across different screen sizes.

Desktop

column contact form

Mobile

column contact form

Final Thoughts

In this post, weโ€™ve shown you how to seamlessly include a contact form in your hero section. More specifically, weโ€™ve created a slide-in column contact form that looks great across all screen sizes. You were able to download the JSON file for free as well! If you have any questions, feel free to leave a comment in the comment section below.

If youโ€™re eager to learn more about Divi and get more Divi freebies, make sure youย subscribe to our email newsletterย andย YouTube channelย so youโ€™ll always be one of the first people to know and get benefits from this free content.

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time ๐Ÿ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi 5 Update: Public Alpha Version 4

Divi 5 Update: Public Alpha Version 4

Posted on November 25, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 4 today. We release new Divi 5 versions every two weeks, and it gets better each time! If you haven’t tested Divi 5 yet, try it and let us know what you...

View Full Post
New Starter Site for Freelancers (Quick Install)

New Starter Site for Freelancers (Quick Install)

Posted on November 24, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

4 Comments

  1. you forgot to add the demo site U_U

  2. I must say that adding a slide-in contact form will definitely be a good move. Contact forms are generally helpful to someone who wanna contact us and this will be helpful to them. Glad you shared it with us.

  3. I really like the creative tutorial on how I might use divi. truly shows off the power of the divi plugin.

  4. I loved this tutorial and followed it step by step.
    Even though I was paying close attention to it, I think I missed something because my results look too big compared to yours.
    Am I correct?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

๐Ÿ‘‹ It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today