Creating A Horizontal Gravity Form Using CSS

Why Horizontal Forms Are Awesome

Gravity Forms is widely recognized as the best contact form plugin on the WordPress market, and it’s easy to see why. I use it on all of my sites, and here’s how and why you should do the same for yours!

Gravity Forms’ highly capable and easy-to-use interface sets it apart from similar plugins, and with so many features, it’s not surprising that they’ve included CSS Ready Classes to use when customizing your form to match the design of your website.

To create a custom form, you must first, well, customize the form! In order to create a simple horizontal form like the one shown below, some modifications will have to be made to the CSS. Typically you will see horizontal forms used for newsletter signups integrated with third parties like Mailchimp, or you will see them used as simple giveaways people fill out to receive a PDF or other freeby. I love the idea of horizontal forms because they use limited space and are unintrusive, giving you a lot of real estate left on your website to work with while not being overly distracting. For an example of what I mean, here is a form that was modified with only a few lines of CSS:

  • Name
  • Email

How to Create Your Own Custom Gravity Form Using CSS

Before diving into the stylesheet, make sure you set each field label with the appropriate column class. Exp: Using gf_left_half and gf_right half for two columns and using gf_left_third gf_middle_third and gf_right_third if you are using three columns.

Now, you’ll need to set the footer to display inline-block, and have the form’s body float left in order to have the submit button next to the field labels. You are going to need to tweak the width and padding, and these values will vary depending on the layout specifications of your site. Make sure you clarify the id of the form to ensure you’re not breaking any other forms on your site. Here’s what the CSS will look like:

#gform_2 > .gform_footer {
    display: inline-block;
    padding: 0.85em 0 0.625em;
    width: 20%;
}
 
#gform_2 .gform_body {
    display: inline-block;
    float: left;
    width: 80%;
}
 

Simple, Right?

After going under the hood with Gravity Forms, I quickly realized a few modifications can go a long way and help you create exactly what you’re looking for. There is so much extended functionality and so many built-in features that I assume I’ll never have to touch the CSS, but if I do, at least I know it will be simple just like everything else about the plugin!

If you’re not already using Gravity Forms for your contact forms, I suggest you make the transition. They offer three different pricing plans including a developer license for $199 a year. 

Comments

  1. Post
    Author
    sasha

    couldn’t this just be accomplished much simpler by using the gf_simple_horizontal class on the entire form?

    1. Post
      Author
      sasha

      You’re absolutely right. You can use that class in the form’s settings section to achieve a similar result. I was unaware of that class when I wrote the article.

      The one downside I found is that it automatically hides the field labels, forcing you to use the placeholders to label your fields.

      You could probably override that easily in CSS; I haven’t looked into it too much.

Leave a Reply

Your email address will not be published.