Source: https://divicake.com/blog/how-to-add-a-sticky-contact-form-to-your-page-with-divi/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # How to Add a Sticky Contact Form to Your Page With Divi By Divi Cake·20 December 2024·Updated 19 August 2026·4 min read How to Add a Sticky Contact Form to Your Page With Divi We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Step 1: Navigate to the Page for Adding the Contact Form](https://divicake.com#step-1-navigate-to-the-page-for-adding-the-contact-form) - [Step 2: Build Your Contact Form from Scratch](https://divicake.com#step-2-build-your-contact-form-from-scratch) - [Step 3: Create a Row and Columns](https://divicake.com#step-3-create-a-row-and-columns) - [Step 4: Add the Contact Form Module](https://divicake.com#step-4-add-the-contact-form-module) - [Step 5: Enable Sticky Option](https://divicake.com#step-5-enable-sticky-option) - [Step 6: Add Colors to the Contact Form Fields](https://divicake.com#step-6-add-colors-to-the-contact-form-fields) - [Final Results of the Sticky Contact Form](https://divicake.com#final-results-of-the-sticky-contact-form) - [Conclusion](https://divicake.com#conclusion) Adding a Sticky Contact Form to your [Divi](https://divicake.com/go/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](https://divicake.com/blog/what-is-divi-wordpress/) 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. - Click on the Plus Icon button to add a new section to your page. dding a Sticky Contact Form in Divi, starting with accessing the desired page and adding a new section. Suitable for both creating a new form or making an existing one sticky. ## 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](https://divicake.com/go/divi-contact-form-module/), In the Second Column, you can add a [Blurb module](https://divicake.com/go/divi-blurb-module/), or simply skip it altogether if you prefer a single-column layout. - Select one Row with two Columns as shown in the screenshot below. Create a row with two columns in Divi for the Sticky Contact Form layout, with the form in the first column and an optional Blurb module in the second. ## Step 4: Add the Contact Form Module - Click on the Plus Icon button as shown in the screenshot below. - Search for “Contact Form” in the module search bar. - Click on the Contact Form module to add it to your selected column. Add the Contact Form module to Divi by searching and selecting it from the module options. ## Step 5: Enable Sticky Option In this step, we’ll enable the [sticky option](https://divicake.com/blog/a-look-at-the-new-divi-sticky-options/) in the [Advanced tab](https://divicake.com/blog/getting-started-with-divi-advanced-settings/) to ensure our Contact Form stays fixed at the top of the website while scrolling. - Click on the Gear Icon button to open the Contact Form module settings. - Navigate to the Advanced tab. - Click on Scroll Effects. Enable the sticky option for the Contact Form in Divi by navigating to the Advanced tab and selecting Scroll Effects. - Select Stick to Top in the Sticky Position option. - Set the Sticky Top Offset to 24px or adjust it to your desired value. - Finally, click on the green Tick Marks button to save your changes. Set the Contact Form to stick to the top by selecting “Stick to Top” and adjusting the Sticky Top Offset in Divi. Read More: [5 Unique Ways to Style Divi’s Contact Form Module](https://divicake.com/go/5-unique-ways-to-style-divis-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. - Click on the Gear Icon button for the Contact Form module settings. - Click on the Gear Icon button for the Name Field in the Content tab. Customize the colors of the Contact Form fields in Divi, starting with the Name field, by accessing the module settings and adjusting field colors for a professional look. Learn More: [How to Create a Custom Divi Contact Form Message Pattern](https://divicake.com/blog/custom-divi-contact-form-message-pattern/) - Click on the Design tab. - Click the Field option. - Set the Field Background Color to match your website design. - Set the Field Text Color for better readability and style. - Click on the green Tick Marks button to save your changes. Set the background and text colors for the Contact Form fields in Divi to match your website’s design and improve readability. ## 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. GIF showing the final result of a Sticky Contact Form in Divi, staying fixed at the top of the website for easy access. ## Conclusion By following these detailed steps, you’ve successfully added a Sticky Contact Form to your [Divi](https://divicake.com/go/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](https://divicake.com/blog/best-contact-form-plugins-for-divi-and-wordpress/) ## Written by Divi Cake Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week. - [About Divi Cake](https://divicake.com/about/) ## Get the Divi Cake newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi 5 migration](https://divicake.com/divi-4-to-divi-5-migration/) - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tips & Tricks [ 5 Awesome Uses for Divi's Dynamic Content Tips & Tricks5 min read ### 5 Awesome Uses for Divi's Dynamic Content Five Divi layouts — travel, recipes, car rentals, clothing and product reviews — rebuilt as reusable templates with dynamic content. 29 October 2026](https://divicake.com/blog/divi-dynamic-content/) [ Customizing Divi for advanced WordPress development projects Blogging4 min read ### Customizing Divi for Advanced WordPress Development Projects Seven ways to take Divi past its stock settings on an advanced build: custom CSS and JavaScript, child themes, integrations, hooks and filters, and performance work. 11 October 2026](https://divicake.com/blog/customizing-divi/) [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/)