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:
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.
Thank you! worked great.
couldn’t this just be accomplished much simpler by using the gf_simple_horizontal class on the entire form?
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.
See a gist I did showing how to accomplish this with flexbox without a gravity class:
https://gist.github.com/AnthonyKeller/3dd7edcc6bf12d382e6f59d41812dd10
Gravity Forms documentation is so poorly executed that I wasn’t aware of that class either, and found it just here, among the comments, almost done through implementing Ryan’s solution.
Thank you Ryan for the guide anyways!
@Gary gf_simple_horizontal derp derp derp, why is this not listed by GF docs, ty sir you saved me a lot of heart ache.
Thanks @Gary I just wasted my time before your comment. I tweeted Gravity’s account to tell them to reflect their doc with this precious class.
Hi Ryan! thanks for all this information. I found that it looks pretty great when on a laptop screen or a big screen, however, I am having issues with how the form stacks for responsive layouts. Do you have any suggestions for that? I noticed the forms on this article stack and look really nice!
Thanks!
Hi Juliana,
If you want to stack the fields, try tweaking the widths. Setting them to 100% might do the trick. Here’s an example:
@media only screen and (max-width: 768px) {
.your-forms-class input[type=email]{
width: 100%;
}
.your-forms-class input[type=submit]{
width: 100%;
}
}
Make sure to swap out “.your-forms-class” with the specific id or class of your form.
Thank you so much! I will definitely try that! 🙂
No problem, Hope it works!
Can you help me with the email form on the home page here:
steppingstonesinn.com
I think I have a few too many conflicting css rules and I’m guessing there’s an issue with the margins causing it not to align when I use the gf_inline class…
It looks aligned to me.
However there’s some issues with the height of the input due to this line of code:
.gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]){padding: 15px 14px;
}
You might want to change that to: padding: 5px 14px
Otherwise people will have a hard time seeing what they’re entering into your form.
Hey Ryan,
Thanks a lot!
I do have 1 x problem however, if you could help at all…
On the mobile version, the fields sit on top of each other however, the button still sits up next to the first field, at the top… not down the bottom where it theoretically ought to be…
Unfortunately my main developer is off sipping Mojitos at present (lucky duck) and I’m doing my best to mess everything up on him and pester everyone I can 😉
Thanks in advance,
Lucas
Hi Lucas,
You’ll want to add a media query that tells the submit button not to float and also make the widths stretch to the size of your mobile device.
Example:
@media all and (max-width: 499px) {#gform_2 .gform_body {
width: 100%;
}
#gform_2 > .gform_footer {
display: block;
width: 100%;
}
}
Let me know if that works.