Make a Custom Inline Contact Form for Your Divi Website

by | Jan 25, 2025 | Blogging, Tips & Tricks, Tutorials | 0 comments

Affiliate Disclosure: Some of the links in this post are affiliate links, which means we may earn a commission if you click through and make a purchase. For more details, please read our Affiliate Disclosure Policy.

Contact forms are essential for effective communication and user engagement on any website. For 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

  1. Open the Divi Builder for the page where you want to add the contact form.
  2. Insert a Contact Form Module into the section or row of your choice.
  3. 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

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:

  1. Click on the Settings icon of the Contact Form Module.
  2. Navigate to the Advanced tab.
  3. In the CSS Class field, enter the class name dc-inline-contact-form.
  4. 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

Step 4: Test Your Form

After adding the CSS, refresh your page and test the form:

  1. Ensure that the fields are aligned horizontally.
  2. Check the focus effect by clicking into each field.
  3. 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 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 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

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Stay ahead with the Latest WordPress Insights

Subscribe for tips, updates, and exclusive tools to elevate your website game.

Newsletter

No spam ever. Only Divi related updates. You need this.

Pin It on Pinterest

Shares