Most WordPress developers are familiar with Gravity Forms. It’s a contact form plugin that allows you to easily build and publish your forms in just minutes, with the minimum of hassle. No mess, just quick and easy form-building. Select your fields, configure your options and easily embed forms on your WordPress powered site using the built-in tools.
Where people often run into problems however is with styling these forms. I’ll address a few of the more common issues.
Gravity Forms Fields in Columns
What many people don’t realise is that Gravity Forms comes with a number of built in CSS declarations to style the way your form looks, and getting it to look nicely laid out in columns is one of the first things people will ask.
Doing this is relatively simple. Take the image on the right for example. In this instance I would like the Email and Phone fields to be side by side, rather than one under the other.
To do this simply click on the first field you want to edit and select the Advanced tab. There you will find a CSS Class Name option which is where the magic happens. By adding ‘gf_left_half’ to the CSS Class Name option for the Email field, and ‘gf_right_half’ to the respective option in the Phone field, you then have two nicely laid out fields, side by side.
Gravity Forms Three Column Layout
If two columns isn’t enough for you, how about adding another? In this case, we apply the same logic, but use the following options for our three fields: gf_left_third, gf_middle_third and gf_right_third.
Note: Don’t worry if you think these styles will overwrite your own ones. Each of these classes work in combination with your own, as long as you are not using conflicting position declarations in your custom CSS.
Space at the Bottom of my Form
Another issue people often ask me about is that Gravity Forms seems to leave a lot of white space under the form in certain themes. In this instance, try wrapping your Gravity Forms shortcodes in [raw] tags.