Source: https://divicake.com/blog/inline-divi-contact-form/ [Blog](https://divicake.com/blog/)/[Blogging](https://divicake.com/category/blogging/) # Make a Custom Inline Contact Form for Your Divi Website By Divi Cake·25 January 2025·Updated 19 August 2026·4 min read Make a Custom Inline Contact Form for Your Divi Website We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Step 1: Add and Customize Contact Form Module in Divi](https://divicake.com#step-1-add-and-customize-contact-form-module-in-divi) - [Step 2: Assign a Custom Class to the Contact Form](https://divicake.com#step-2-assign-a-custom-class-to-the-contact-form) - [Step 3: Add Custom CSS to Your Website](https://divicake.com#step-3-add-custom-css-to-your-website) - [Where to Add the CSS?](https://divicake.com#where-to-add-the-css) - [Explanation of the CSS used for Making the Custom Inline Contact Form](https://divicake.com#explanation-of-the-css-used-for-making-the-custom-inline-contact-form) - [Step 4: Test Your Form](https://divicake.com#step-4-test-your-form) - [Step 5: Optimize for Responsiveness](https://divicake.com#step-5-optimize-for-responsiveness) - [Final Thoughts](https://divicake.com#final-thoughts) [Contact forms](https://divicake.com/blog/best-contact-form-plugins-for-divi-and-wordpress/) are essential for effective communication and user engagement on any website. For [Divi](https://divicake.com/go/divi/) users, taking this functionality up a notch with a custom inline contact form can enhance both design and usability. An inline contact form not only streamlines the user experience but also complements your site’s layout by keeping everything aligned and visually appealing. In this guide, we’ll show you how to create a custom inline contact form for your Divi website. From adding and styling the form to optimizing it for responsiveness, this step-by-step tutorial will help you design a professional and user-friendly contact form that leaves a lasting impression. ## Step 1: Add and Customize Contact Form Module in Divi - Open the [Divi Builder](https://divicake.com/blog/what-is-divi-wordpress/) for the page where you want to add the contact form. - Insert a Contact Form Module into the section or row of your choice. - Open the settings for each field, click the Design tab, open the Layout toggle, and enable the Make Full Width setting as shown in the screenshot below: Step-by-step guide to customizing the Contact Form Module in Divi Builder, showing how to enable the ‘Make Full Width’ setting in the Design tab’s Layout options for each field. Customizing Contact Form Module Read More: [How to Add a Sticky Contact Form to Your Page With Divi](https://divicake.com/blog/how-to-add-a-sticky-contact-form-to-your-page-with-divi/) ## Step 2: Assign a Custom Class to the Contact Form To target your contact form with CSS, you’ll need to assign a unique class to the module: - Click on the Settings icon of the Contact Form Module. - Navigate to the Advanced tab. - In the CSS Class field, enter the class name dc-inline-contact-form. - Save your changes. Divi Contact Form Module settings showing how to add a unique CSS class “dc-inline-contact-form” in the Advanced tab for customization. Assigning a Custom CSS Class to the Contact Form ## Step 3: Add Custom CSS to Your Website Now, let’s style the contact form to align its fields horizontally and add an activation effect for when users type in the fields. Add the following CSS to your website: ## Where to Add the CSS? - Go to Divi > Theme Options in your WordPress dashboard. - Scroll to the Custom CSS box and paste the following code as shown in the screenshot: /* Flexbox layout for the contact form container */ .dc-inline-contact-form .et_pb_contact_form { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; flex-wrap: wrap; } /* Style for individual contact form fields */ .dc-inline-contact-form .et_pb_contact_field input, .dc-inline-contact-form .et_pb_contact_field textarea { flex: 1 1 calc(23% - 15px); /* Dynamic width with spacing */ padding: 8px; margin: 0; background-color: #fff7e6; /* Light peach color for fields */ border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; } /* Activation effect: Focused input or textarea */ .dc-inline-contact-form .et_pb_contact_field input:focus, .dc-inline-contact-form .et_pb_contact_field textarea:focus { border-color: #0073e6; /* Blue border on focus */ background-color: #e6f7ff; /* Light blue background on focus */ box-shadow: 0 0 5px rgba(0, 115, 230, 0.5); /* Subtle glow effect */ outline: none; } /* Style for the container of the submit button */ .dc-inline-contact-form .et_contact_bottom_container { flex: 1 1 calc(23% - 15px); /* Same width as fields */ margin: 0; text-align: center; } /* Style for the submit button */ .dc-inline-contact-form .et_pb_contact_submit { padding: 10px 15px; width: 100%; color: #fff; background-color: #0073e6; border: none; border-radius: 4px; font-size: 14px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; } .dc-inline-contact-form .et_pb_contact_submit:hover { background-color: #005bb5; } Adding custom CSS in the Divi Theme Options, showing the location of the Custom CSS box in the WordPress dashboard. Adding Custom CSS in Divi Theme Options ## Explanation of the CSS used for Making the Custom Inline Contact Form - Flexbox Layout: The .et_pb_contact_form container is set to use Flexbox to align fields horizontally. - Field Styling: Each field is given a light peach background, rounded corners, and subtle shadows for a modern look. - Focus Effect: Fields highlight with a blue border and light blue background when clicked or typed into. - Submit Button: The button is styled with a blue background that darkens on hover. Read More: [9 Best Contact Form Plugins for Divi and WordPress in 2024](https://divicake.com/blog/best-contact-form-plugins-for-divi-and-wordpress/) ## Step 4: Test Your Form After [adding the CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/), refresh your page and test the form: - Ensure that the fields are aligned horizontally. - Check the focus effect by clicking into each field. - Confirm that the submit button is styled correctly and responds on hover. Guide to testing a contact form in Divi after adding custom CSS, ensuring proper horizontal alignment of fields, focus effect functionality, and correct styling and hover response of the submit button. Testing and Verifying Your Contact Form in Divi ## Step 5: Optimize for Responsiveness To ensure the form looks great on all devices, the Flexbox layout adapts automatically. However, you can [add additional media queries for further customization](https://divicake.com/blog/what-are-the-divi-breakpoints-and-media-queries/) if needed: @media only screen and (max-width: 768px) { .dc-inline-contact-form .et_pb_contact_form { flex-direction: column; } .dc-inline-contact-form .et_pb_contact_field, .dc-inline-contact-form .et_contact_bottom_container { width: 100%; } } This code ensures the form stacks vertically on smaller screens for optimal readability and usability. ## Final Thoughts Creating a custom inline contact form for your [Divi](https://divicake.com/go/divi/) website is an excellent way to enhance both the functionality and design of your site. By following the steps outlined in this guide, you can create a form that seamlessly integrates with your website’s layout while offering a smooth, user-friendly experience for visitors. Make sure to thoroughly test the form to ensure it performs as expected across all devices. Additionally, don’t hesitate to adjust the colors and styles to reflect your brand’s unique identity. A well-crafted inline contact form isn’t just a practical tool—it’s a way to make a lasting impression and build stronger connections with your audience. Read More: [How to Create a Custom Divi Contact Form Message Pattern](https://divicake.com/blog/custom-divi-contact-form-message-pattern/) ## 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 Blogging [ How to make money with Divi Blogging10 min read ### How to Make Money with Divi Nine ways to earn an income with Divi — affiliate marketing, services, digital products, courses, memberships, sponsored posts and ads — and what your site needs before any of them work. 15 October 2026](https://divicake.com/blog/make-money-with-divi/) [ 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/) [ Selling Divi websites and child themes Blogging10 min read ### How to Make Money Selling Divi Websites and Child Themes How to earn from Divi three ways: building sites for clients, selling finished websites through a brokerage or marketplace, and packaging child themes for sale. 29 September 2026](https://divicake.com/blog/selling-divi-websites-and-child-themes/)