Adding a Sticky Contact Form to your Divi page is an excellent way to ensure your visitors can easily reach out to you. In this tutorial, We’ll guide you step by step through the process of creating and customizing a Sticky Contact Form in a simple and easy-to-follow manner. Whether you’re a Divi theme beginner or an experienced developer, this tutorial will help you achieve a clean, functional design that enhances user experience and keeps your contact form always accessible.

Step 1: Navigate to the Page for Adding the Contact Form

First of all, you need to access the page where you want to add the contact form. Whether your contact form is already created or you plan to add a new one, you must go to that specific page.

Step 2: Build Your Contact Form from Scratch

We are going to create the contact form from scratch. If you already have a contact form and just want to make it sticky, you can skip this step. Otherwise, follow along step by step as we build it together.

1. Click on the Plus Icon button to add a new section to your page.

Step 3: Create a Row and Columns

In this step, we’ll create one row with two columns, but this is optional. You can choose to have one row with a single column if that suits your design better. In the First Column, we’ll add our Contact Form module, In the Second Column, you can add a Blurb module, or simply skip it altogether if you prefer a single-column layout.

1. Select one Row with two Columns as shown in the screenshot below.

Step 4: Add the Contact Form Module

1. Click on the Plus Icon button as shown in the screenshot below.
2. Search for “Contact Form” in the module search bar.
3. Click on the Contact Form module to add it to your selected column.

Step 5: Enable Sticky Option

In this step, we’ll enable the sticky option in the Advanced tab to ensure our Contact Form stays fixed at the top of the website while scrolling.

1. Click on the Gear Icon button to open the Contact Form module settings.
2. Navigate to the Advanced tab.
3. Click on Scroll Effects.

1. Select Stick to Top in the Sticky Position option.
2. Set the Sticky Top Offset to 24px or adjust it to your desired value.
3. Finally, click on the green Tick Marks button to save your changes.

Read More: 5 Unique Ways to Style Divi’s Contact Form Module

Step 6: Add Colors to the Contact Form Fields

In this step, we’ll add some colors to the contact form fields and text, giving it a more polished and professional look that matches your website’s style. Keep in mind that you’ll need to do this for each field separately. In this step, we’re doing it for the Name field, but you’ll follow the same process for the Email and Message fields to customize their colors as well.

1. Click on the Gear Icon button for the Contact Form module settings.
2. Click on the Gear Icon button for the Name Field in the Content tab.

Learn More: How to Create a Custom Divi Contact Form Message Pattern

1. Click on the Design tab.
2. Click the Field option.
3. Set the Field Background Color to match your website design.
4. Set the Field Text Color for better readability and style.
5. Click on the green Tick Marks button to save your changes.

Final Results of the Sticky Contact Form

The GIF below showcases the final result after successfully adding the Contact Form and setting it to stick to the top of our website.

Conclusion

By following these detailed steps, you’ve successfully added a Sticky Contact Form to your Divi page. This feature ensures that your visitors always have quick and easy access to get in touch, improving the overall user experience and accessibility of your website.

Don’t forget to customize the contact form’s layout, colors, and fields to match your website’s branding perfectly. Whether you’re building a business site, a blog, or a portfolio, this sticky contact form is a simple yet effective way to enhance communication and engagement with your audience.

Learn More: 9 Best Contact Form Plugins for Divi and WordPress in 2024