Formatting your Gravity Forms can provide a better user experience

Did you know you can add custom CSS to your fields to put them within 2 or 3 columns for examples instead of being one on top of the other?

It’s actually very easy, you don’t need to be a web developer to achieve this:

1. If you don’t have Gravity Forms yet, you can get it here. We’ve been using it for years and it’s incredibly powerful to help you achieve virtually anything you’ve imagined a form could do.
2. Once setup, create a simple “Contact” form
3. Let’s say you’re adding “First Name”, “Last Name” (those are actually part of a single field called “Name”) then you’d like to add “Email” and “Phone” but you’d like the form to save valuable space on your page and look better so you’d like to put them side-by-side, essentially in 2 columns.
4. Go to https://www.gravityforms.com/css-ready-classes/ to get the CSS code to use to create 2 columns
5. Open your “Email” field > click the “Appearance” tab > paste the following code “gf_left_half” into the field “Custom CSS Class”
6. Do the same for your “Phone” field, except that the code will then be “gf_right_half” so your “Phone” field can be in a column on the right of your “Email” field.
7. Save or Update your form and check it out on the page you’ve inserted it. Tada! Your “Email” and “Phone” fields are now on the same row, aligned beautifully, one on a left column, the other on the right.

There are so many customizations and add-ons that can help you enhance your Gravity Forms to make your life and the one of your customers easier.

Should you need a team of experts to help you achieve your objectives with WordPress and Gravity Forms, contact us today!

Questions? Suggestions? Leave a comment below!