How to Add a Sticky Contact Form to Your Page

Last Updated on September 17, 2022 by 7 Comments

How to Add a Sticky Contact Form to Your Page
Blog / Divi Resources / How to Add a Sticky Contact Form to Your Page

Divi’s built-in sticky options allow you to create stunning visual effects on your page with just a few clicks. You can apply sticky effects to any element on your page, but in this tutorial, we will focus on how to add a sticky contact form to any Divi page you build. For this example, we will add some images and contact information that will scroll as the contact form stays in place.

Sneak Peek

Here is a preview of what we will design. On mobile, we don’t apply a sticky effect.

What You Need to Get Started

Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.

Now, you are ready to start!

How to Add a Sticky Contact Form to Your Page

Create a New Page with a Premade Layout

Let’s start by using a premade layout from the Divi library. For this design, we will use the Contact Page from the Beauty Product Layout Pack.

Add a new page to your website and give it a title, then select the option to Use Divi Builder.

divi sticky contact form create new page

We will use a premade layout from the Divi library for this example, so select Browse Layouts.

divi sticky contact form browse layouts

Search for and select the Beauty Product Contact Page layout.

divi sticky contact form find a layout

Select Use This Layout to add the layout to your page.

divi sticky contact form select layout

Now we are ready to build our design.

Modifying the Layout for the Sticky Contact Form

For this design, we want the contact form in the left column (column 1) to stay sticky while the user scrolls through the other content modules in the right column (column 2). This will give us a dynamic scrolling effect that makes your contact form stand out. Let’s begin by modifying our premade template.

Create a New Section

Add a new regular section to your page. Then, insert a new row with two columns. You can add this section anywhere on the page, the other sections will eventually be deleted as we go through the tutorial.

divi sticky contact form insert section and insert row

Open the Section Settings and change the background color to match the layout design:

  • Background: #EEE8E2

divi sticky contact form set section background color

Adding your sticky modules to column 1

Add a contact form module to column 1. If you’re following along with the tutorial or already have a contact form on your page, you can simply drag the existing contact form module over to column 1.

divi sticky contact form add contact form

Move the “Contact Us” text module to the top of this section. This will also be sticky. Add a white border in the Text Settings to match the layout design:

  1. Border Width: 20px
  2. Border Color: #FFFFFF

The original layout included some extra padding between the text and the border, but we will skip adding this padding as it cuts off the bottom of the contact form on smaller screens.

divi sticky contact form add border

Add your scrolling modules to column 2

In column 2, add all of your scrolling modules. For this design, move the two image modules, the contact information, and the location information to column 2. Once you move your modules to the new section, you can delete any remaining empty sections.

divi sticky contact form move image module

Pro-tip: If you need to move multiple modules at once, hold the Shift key and select the modules you want to move. Use the move module function to move all of your modules at the same time.

divi sticky contact form move multiple modules

The large offset image from the beauty product layout can cause some horizontal scrolling issues in this design, so let’s change a couple of settings to fix this.

Open the Section Settings. Under Advanced, navigate to Visibility, then update the horizontal and vertical overflow settings:

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

divi sticky contact form hide horizontal vertical overflow

>Now your page should look something like this, with your sticky content in column 1 and your scrolling content in column 2.

divi sticky contact form layout overview

We are ready to move on to the last step: making the contact form sticky.

Making the Contact Form Sticky

With our layout in place, we can enable the sticky settings for our contact form. Select Row Settings, then select the settings for column 1.

divi sticky contact form edit column settings

Under the Advanced tab, navigate to Scroll Effects. Here is where we will add the sticky settings. The two-column sticky design does not work well on mobile devices, so we will only change the following options for the desktop layout.

  • Sticky Position: Stick to Top
  • Sticky Top Offset: 15px
  • Set the Bottom Sticky Limit to Section.

divi sticky contact form add sticky settings

And that’s it! Now you have added the sticky settings to column 1, making your contact form and title sticky as you scroll through the page. You should see the content in column 2 scrolling alongside the contact form.

Final Result

Now let’s take a look at our sticky contact form in action.

Final Thoughts

Divi’s sticky settings are an easy way to elevate the look of your contact form – or any other element on your page. You can customize the sticky settings for any section, row, or module, making just about anything on your website sticky. If you are interested in learning more about what you can do with the sticky features in Divi, check out our tutorials for creating a sticky video slider and creating sticky social media follow modules.

How have you implemented Divi’s sticky features on your website? Let us know in the comments!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

New Starter Site For Writers (Quick Install)

New Starter Site For Writers (Quick Install)

Posted on October 11, 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
How To Migrate Your Website To Divi 5 (Public Alpha)

How To Migrate Your Website To Divi 5 (Public Alpha)

Posted on October 9, 2024 in Divi Resources

Divi 5 Public Alpha is available, so you’re probably excited to explore its new features and improvements. Transitioning from Divi 4 to Divi 5 involves a few important steps. This post will help you migrate smoothly from Divi 4 to Divi 5 Public Alpha, allowing you to take full advantage of Divi...

View Full Post

7 Comments

  1. I’m interested in this but I have a question. Can the user close the contact form if they don’t want to see it as it may interfere with their reading of the content? Also, maybe for mobile it could have a tiny sticky “contact us” with a close button, which would take the reader to the contact us page.

  2. Really nice content for adding sticking form. thanks

  3. It is a very interesting tutorial!
    I’m going to start applying it for the following projects.

    Thank you very much for sharing 🤗

  4. i’ve tried this and success…thank for the brief tutorial…!

  5. Hi, I came here by seeing Elegant Theme’s YouTube Channel. Your passion helps alot of people world wide. Thanks a lot Team Elegant Themes.

  6. A very detailed and helpful post you have here.Thanks for sharing this article. You have given me knowledge about How to add a sticky contact form to your page.I hope your tips will help me a lot and other people who wants to learn

  7. This is good timing! I was trying to work out how to do this over the weekend 🙂

    Thanks

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today