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
- Open the Divi Builder 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:
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:
- 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.
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 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:
- 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.
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