In this tutorial, I’m going to show you a quick and easy way to code a Divi single line contact form perfect for Call-to-Acton sections (see example below).

Copy and paste the following CSS code in your child theme styles or paste in Divi > Theme Options > General > Custom CSS .


.dd_single_line_form .et_pb_button:hover {
    padding-left: 30px!important;
}
.dd_single_line_form {
    position: relative;
}
.dd_single_line_form .et_pb_contact_submit.et_pb_button {
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 10px 30px;
    margin-left: 20px!important;
}
.dd_single_line_form .et_pb_button:hover::after {
    margin-left: 0em!important;
}

Now lets begin by inserting a standard section and selecting a fullwidth column. Open the Section Module Settings and set the Background Color to whatever color you like (I choose purple for my example). Now open the Row Module Settings and set the Column Background Color to transparent. Navigate to the Design tab and under Sizing enable the Custom Width switch and set Custom Width to 600px (default will work, but it’s to long for my taste). Now set Custom Padding to 0px on top and bottom (see row settings below).

Next, insert a Contact Form module and delete the Name and Message fields. Open the Email field and navigate to the Design tab. Under Layout, enable the Make Fullwidth switch then click save.

With Contact Form Module Settings still open, scroll down to Background and pick the color white and set the opacity to 0.6. Now navigate to the Design tab and under Button enable the Use Custom Styles for Button switch. Now normally, these design settings could be set however you like, but to achieve my example I used the following settings.

Lastly, input the following CSS code under the advanced tab in the Contact Form Module Settings.

dd_single_line_form

And there you have it. A simple, yet effective way to style a CTA single line contact form for Divi. Be sure to visit back for more Divi tips and tricks.
Happy coding!

Live Demo

Download