Connect with us

UI Design

Creating a Horizontal Gravity Form Using CSS

Published

, on

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!

Go to Gravity Forms Website

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.

Why Horizontal Forms Are Awesome

To create a custom form, frontend developer 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
Name Email Horizontal Forms sample

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 $159 a year. 

pricing

Gravity Forms Design Examples

Gravity Forms is a premium WordPress plugin designed to make it easy, efficient and cost-effective to create and manage any type of form online. You can create a contact form, subscription form, donation form or any other type of form that you can imagine.

The plugin has been built from the ground up with the needs of WordPress users in mind. It’s not just a simple “add-on” that you have to learn how to use from scratch. Gravity Forms is an all-in-one solution for creating and managing forms for your website or blog in WordPress.

  • Material Design
  • Checkbox & Radio Styler
  • Bootstrap Design
  • Tooltips
  • Field Icons

What makes Gravity Forms so powerful?

The toolkit features everything you need to build a professional looking contact page with multiple types of forms: contact forms, subscription forms, donation forms and more.

2 Comments
0 0 votes
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

Trending

2
0
Would love your thoughts, please comment.x
()
x