In this post, I’ll show you how to create a horizontal form (that looks good) on WordPress, with gravity forms.
P.S. I used gravity forms because they have the most options and are very stable (for email notifications). It costs $199.00 a year.
What the form will look like at the end
First, do your research – you can read all about what gravity forms offers to developers here on gravity forms.
Let’s Get Started
By default, Gravity Forms outputs it’s forms in a vertical (or column) format. This just means that the form fields are stacked on top of one another all the way down the form. This is ideal for most forms but there are some cases where you may want to display your form horizontally instead. This means the form fields are displayed side by side, in a row, like to collect emails for a homepage.
Gravity Forms can actually get you a decent way towards this goal using the powerful CSS Ready Classes.
- Add “gf_simple_horizontal” to the Form’s CSS Class Name Setting
- Add “gf_inline” to each Field’s CSS Class Name Setting
- Add placeholders for titles to the Form’s Appearance
1. Add “gf_simple_horizontal” to the Form’s CSS Class Name Setting
To get started, visit the Form Settings for the form you want to convert and add the “gf_simple_horizontal” class to the CSS Class Name setting.
2. Add “gf_inline” to each Field’s CSS Class Name Setting
Next, visit the Appearance tab of each field in the form and add the “gf_inline” class to the Custom CSS Class field.
At this point your Gravity Form is now a horizontal form!
3. Add wording inside of the fields to show wording
Next, visit the Appearance tab of each field in the form and add First, Last and Email to the placeholders.
You are now finished! Enjoy!