How to Style Gravity Forms to Look Like Divi (+ Bonus Looks!)

When it comes to WordPress form plugins there are quite a few options to choose from. In a previous Elegant Themes tutorial I shared some CSS snippets for styling the Caldera Forms plugin. Caldera is a great free form builder plugin option, but today we’re going to be sharing some styling tips for Gravity Forms. Gravity Forms is one of the (if not the) most popular premium form builder plugins for WordPress websites.

Since this post is really a design tutorial I’m not going to go in-depth about the plugin itself, but there are already several really good posts on our blog that do that:

• Gravity Forms – A Detailed Look at the Personal Edition
• Gravity Forms: A Complete Forms Solution for WordPress
• 15 Best WordPress Contact Forms Plugins Compared

Why Style Your Forms in the First Place?

So you may be wondering why anyone would need or want to style their form from the default look in the first place. Here are just a few reasons:

• Having your forms match the look and feel of your website — While most plugin forms come with a clean look that could really fit into any website well, they tend to be very generic looking. Matching elements of your site to each other show that you are giving attention to detail and care about tying everything together on an aesthetic level.
• To give your form a more custom look — Any time you can customize parts of your website to differentiate yourself and give a bit of uniqueness the better.
• Uniqueness can show authority or skill level — If you are a web design agency or freelancer of course showing your skills on your own site shows your visitors that you are capable of some level of design customization, which in turn can lead to acquiring more clients.
• To learn! — Anytime you use CSS snippets from our blog to style any element of your site you are opening yourself up to a way to learn coding. You may not have a vested interest in that, and that’s fine, but if you do it’s great to read the comments in the CSS and learn which bits of code are controlling which part of the look on the frontend.

On to the Styling!

Subscribe To Our Youtube Channel

Style 1: The Divi Look

The first style we’ll be implementing is of course the Divi style. Divi has become well known for it’s clean and minimal approach to design and many users would like their forms built using a third-party plugin to look like Divi. Using our first chunk of CSS snippets this is the look you will achieve.

Pre-CSS Setup

Gravity Forms is a drag-n-drop form builder so you should have your Name, Email, and Message (paragraph text) fields dragged over to the appropriate spots. Your form may look something like this in the backend:

The first step at achieving this look actually comes before adding any CSS. We are going to limit the field to just one name field, so in the General tab select only the First field to show.

As you saw from our example image above the labels are inside the field, these are referred to as “placeholders.” So next go to the Appearance tab > enter the placeholder text you want to appear.

I’m also going to be using two of Gravity’s ready classes to make columns (by default every field is one column wide). With these I’m telling the form what goes into a left column and what field goes into a right column. Since I want the name on the left I’m entering the class “gf_left_half” into the Custom CSS Class field.

I’m going to do the same with the email field but this time I want it in a right column, so I’ll use the class “gf_right_half”

The CSS Code

The following goes in your Divi Options > Custom CSS box (at the bottom of the page) or your child stylesheet.

/*** REMOVE LABEL ON FIELDS USING PLACEHOLDER ***/
.gform_wrapper .top_label .gfield_label,
.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {
 display: none;
}
/*** FIELD STYLING ***/
input[type=text],
textarea {
 background: #eee;
 border: none;
 border-radius: 0;
 color: #999 !important;
 padding: 15px !important;
}
/*** BUTTON STYLING ***/
.gform_wrapper .gform_footer input.button {
 float: right;
 background: transparent;
 border: 2px solid #2ea3f2;
 font-size: 22px;
 color: #2ea3f2;
 padding: 12px 23px;
 border-radius: 5px;
 letter-spacing: 2px;
 cursor: pointer;
}
/*** BUTTON HOVER STYLING ***/
.gform_wrapper .gform_footer input.button:hover {
 background: rgba(0, 0, 0, 0.05);
 border: 2px solid transparent;
}

You should now have a simple contact form (or whatever kind of form you’ve built) that has that memorable Divi look!

Bonus Styles Using the Elegant Themes Icon Font and More!

I’m going to also give some more CSS snippets to achieve two additional looks. The point of these snippets is to have a jumping off point, so even if you only know how to change the color of the font and background color sometimes that’s all you really need.

As with the first example all CSS code can either go inside Divi’s Custom CSS Panel in the Theme Options or in your child theme’s stylesheet.

Style 2: Material Design

Material Design is a trend that is here to stay. To be honest it’s more than just a trend, it’s really a set of style guidelines that are being implemented in much more than just web design, but you can find out more about it on one of our recent blog posts here and from the official website here.

I’ve included just the smallest bit of animation in this one as it’s a hallmark characteristic of material design. With material design, though, animation isn’t just used for visual appeal, it tries to serve an extra functional purpose when possible.

So here my message box is only so high, but when the user clicks in it the box automatically expands and allows for more room without having to manually drag the little corner down. Some would argue more room entices a longer and more thought out message, but we’ll leave that to the design psychologists.

Here is the end result we will have with the corresponding CSS:

The CSS Code

/*** MAIN GRAVITY WRAPPER ***/
.gform_wrapper {
    background: #6000AA;
    padding: 5%;
}
/*** REMOVE LABEL ON FIELDS USING PLACEHOLDER ***/
.gform_wrapper .top_label .gfield_label,
.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {
    display: none;
}
/*** FIELD STYLING ***/
.gform_wrapper ul.gform_fields li.gfield,
.gform_wrapper .top_label li.gfield.gf_right_half {
    padding-right: 0;
}
input[type=text],
textarea {
    background: #8300E9;
    border: none;
    border-radius: 0;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    padding: 17px 15px !important;
}
/*** FIELD FOCUS STYLING ***/
input[type=text]:focus,
input.text:focus,
input.title:focus,
textarea:focus {
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);
}
/*** MESSAGE BOX TRANSITION ***/
.gform_wrapper textarea.medium {
    margin-top: 6px;
    height: 10em;
    transition: height .3s ease-out;
}
/*** MESSAGE BOX FOCUS HEIGHT ***/
.gform_wrapper textarea.medium:focus {
    height: 25em;
}
/*** BUTTON STYLING ***/
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type=submit] {
    width: 100%;
}
.gform_wrapper input[type=submit] {
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 10px 12px;
    border-radius: 0;
    background: #19ffc0;
    color: rgba(0, 0, 0, 0.5);
    border: none;
    transition: box-shadow .2s ease-in-out;
}
/*** BUTTON HOVER STYLING ***/
.gform_wrapper input[type=submit]:hover {
    background: #f2bf2f;
    color: #fff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);
}
/*** PLACEHOLDER ***/
::-webkit-input-placeholder {
    /* Chrome */
    color: rgba(255, 255, 255, 0.7) !important;
}
:-ms-input-placeholder {
    /* IE 10+ */
    color: rgba(255, 255, 255, 0.7) !important;
}
::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(255, 255, 255, 0.7) !important;
}
:-moz-placeholder {
    /* Firefox 4 - 18 */
    color: rgba(255, 255, 255, 0.7) !important;
}

** Note that I’m using those left and right column classes in my form like I did in the first example so you may want to do that as well if you like how my fields are laid out, and don’t forget to change the color hex codes to match your site.

Style 3: Opaque Background + ET Font Radio Buttons & Checkboxes

This one actually comes pretty packed with some great extras 😀

So first I have to give credit where credit is due. I found an amazing online tutorial for implementing the Elegant Themes font for use on radio buttons and checkboxes here, and I’m simply tweaking this dude’s awesome code snippets.

This is the form look we will have after we set up our background image and the CSS is added:

Pre-CSS Setup

So as you can see this form look has a background image, an opaque form background, and is using section headings. Two of those items need to be setup first (the opaque background is handled with CSS so that will happen automagically when you add the code).

In your main section you’ll want to add your background image.

In your form you’ll want to add a section and edit your heading (this is optional by the way).

The CSS Code

/*** MAIN FORM WRAPPER ***/
.gform_wrapper {
 background: rgba(255, 255, 255, 0.95);
 padding: 5%;
}
/*** GRAVITY FIELDS ***/
.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.gform_wrapper textarea.medium,
.gform_wrapper textarea.large {
 background: rgba(0, 0, 0, 0);
 border-top: none;
 border-left: none;
 border-right: none;
 border-bottom: 2px solid #000;
 border-radius: 0px !important;
}
.gform_wrapper ul.gform_fields li.gfield {
 margin-bottom: 20px;
}
input[type=text]:focus,
input.text:focus,
input.title:focus,
textarea:focus {
 border-bottom: 2px solid #b5b5b5 !important;
}

/*** BUTTON STYLING ***/
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type=submit] {
 background: #A2D400;
 text-transform: uppercase;
 border: 2px solid #1d1d1d;
 padding: 7px 12px;
 cursor: pointer;
 font-size: 18px;
 -moz-transition: all 0.2s;
 -webkit-transition: all 0.2s;
 transition: all 0.2s;
 border-radius: 0 !important;
}
/*** BUTTON HOVER STYLING ***/
.gform_wrapper .gform_footer input.button:hover,
.gform_wrapper .gform_footer input[type=submit]:hover {
 background: #1d1d1d;
 color: #fff;
}
/*** SECTION STYLING ***/
.gform_wrapper h2.gsection_title {
 font-weight: normal;
 font-size: 2em;
}
.gform_wrapper .gsection {
 padding: 20px !important;
 border-bottom: none;
 background: #A2D400;
}
/*** GRAVITY RADIO AND CHECKBOXES ***/
.gform_wrapper ul.gfield_checkbox li input[type=checkbox],
.gform_wrapper ul.gfield_radio li input[type=radio] {
 visibility: hidden;
 margin: 0;
 width: 0!important;
}
.gform_wrapper input[type=checkbox] + label,
.gform_wrapper input[type=radio] + label {
 font-size: 16px;
}
input[type=checkbox] + label:hover,
input[type=radio] + label:hover {
 cursor: pointer;
}
input[type=checkbox] + label:before,
input[type=radio] + label:before {
 font-family: "ETmodules" !important;
 font-size: 30px;
 position: relative;
 top: 0.3em;
 margin-right: 0.2em;
}
.gform_wrapper li.gf_list_inline ul.gfield_checkbox li,
.gform_wrapper li.gf_list_inline ul.gfield_radio li {
 display: -moz-inline;
 display: inline;
}
input[type=checkbox] + label:before {
 content: '\056';
}
input[type=checkbox] + label:hover:before {
 content: '\05a';
 filter: alpha(opacity=40);
 opacity: 0.4;
}
input[type=checkbox]:checked + label:before {
 content: '\05a';
 color: #A2D400;
}
input[type=checkbox]:checked + label:hover:before {
 color: #A2D400;
 filter: alpha(opacity=100);
 opacity: 1;
}
input[type=radio] + label:before {
 content: '\05b';
}
input[type=radio] + label:hover:before {
 content: '\05c';
 filter: alpha(opacity=40);
 opacity: 0.4;
}
input[type=radio]:checked + label:before {
 content: '\05c';
 color: #A2D400;
}
input[type=radio]:checked + label:hover:before {
 color: #A2D400;
 filter: alpha(opacity=100);
 opacity: 1;
}
.gform_wrapper ul.gfield_checkbox li input[type=checkbox]:checked+label,
.gform_wrapper ul.gfield_radio li input[type=radio]:checked+label {
 font-weight: normal;
}
/*** SUCCESS MESSAGE ***/
.gform_confirmation_wrapper {
 background: #fff;
 padding: 15px;
}

If you want to change the icon check out the Elegant Themes font reference post. Here’s a screenshot of the icons I chose and when you look at the CSS you will see how I entered the correct code.

In Closing

Well that’s all for this tutorial. I hope you now feel empowered to style your own website forms to truly stand out and help reflect the overall aesthetic you are trying to portray. Subscribe so you’re sure not to miss all the great resources we are consistently delivering. And if you have any questions about this tutorial please feel free to ask me in the comments below.