Gravity Forms is hands down the best forms plugin money can buy – it gets installed on every single website I build by default. The only thing I’ve never been happy with is how a form looks by default. It’s not necessarily ugly, just uninspiring. Some WordPress themes attempt to add a little pizzaz to a form but it rarely helps that much.
Below is a contact form built using all of Gravity Forms default settings. It’s functional but not very pretty. The form fields don’t extend the full width of the available space and the ‘Your Message’ field is awkwardly wider than all other form fields.
Gravity Form’s Default Settings
Using the basic customization settings within the Gravity Forms interface you can easily make some massive improvements to the look of the contact form.
Switch to the Appearance tab of each form field and change the Field Size to Large – this will even out the width of all columns. Placing the Email and Phone fields on the same line is simple too, just add gf_left_half into the left columns Custom CSS Class field and gf_right_half into the right column’s Custom CSS Class field. If you want three fields side by side, it’s exactly the same idea, just use gf_left_third, gf_middle_third & gf_right_third in the respective columns. There is a huge number of other super handy CSS customizations available on the Gravity Forms website – click here to learn more. I literally visit this page almost daily.
After these simple changes, the form looks significantly sleeker and sexier. See below.
Contact form with a few simple tweaks of Gravity Form’s default settings
I also like to change the Field Label Visibility to Hidden. This removes the field title above the form field, simplifying the look of the form and making it take up less vertical space. Just ensure that you add the field name into the Placeholder section so it will display on the form (otherwise you’ll have a bunch of blank form fields with no indication what they are for).
Of course when you do this, for some unknown reason, all hell breaks loose and spacing starts to get wonky. That’s an easy fix using a few lines of CSS. But while we’re add it I like to increase the padding of each form field so it’s a little roomier. I also add a border-radius to the form fields so they look a little less harsh.
Just copy and paste the code below into your WordPress theme’s custom CSS section and it will automatically apply to every Gravity Form on your website. If you only want to target a single form instead, this article explains how to achieve that with a simple tweak to the CSS code.
This CSS code is super basic and hasn’t been optimized in any way, I kept each element separate so it’s simple to see what does what.
.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
padding: 15px;
border-radius: 5px;
}
.gform_wrapper textarea.large {
height: 200px;
padding: 15px;
border-radius: 5px;
}
.gform_wrapper ul li.gfield {
margin-top: 0!important;
}
.gform_wrapper li.hidden_label input {
margin-top: 0;
}
.gform_wrapper .top_label li.gfield.gf_left_half {
padding-right: 25px;
}
The end result is a simple form that looks super modern and takes up significantly less vertical space. See below.
A much sexier Contact form with a few simple tweaks and some custom CSS
These simple techniques can be applied to any form field, even lists of Radio Buttons. With even basic CSS skills you’ll be able to make some killer forms in a matter of minutes.
