• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Align Gravity Forms Fields Side by Side In 2 Columns

This post includes the best solution if you want to align Gravity Forms Fields next to each other in 2 columns.

In addition to using CSS code to customize Gravity Forms, you can also add classes to the Gravity forms builder to customize your form.

Standard Contact Form

Firstly, here’s what a standard contact form will look like:

Gravity Forms

Align Form Fields In 2 Columns

Lets align the email & website url fields so they are side by side and look like this:

align fields

All you need to do is add 2 classes.

Go to Forms > Edit > Edit Field > Advanced > CSS Class Name and add gf_left_half to the Website field and gf_right_half to the Email field.

align gravity form fields in 2 columns

Here’s what it looks like when adding the new class.

edit form fields

Style Gravity Forms In Genesis

StudioPress themes include CSS code for styling Gravity Forms.

Here’s the code included in the Genesis Sample theme:

Register for full access

More Gravity Forms Tips

  • Calling Gravity Forms Efficiently
  • How To Integrate Gravity Forms Mailchimp Addon With WordPress
  • How To Setup Gravity Forms Paypal Addon & Accept eCommerce Payments
  • Add Country Specific Address State Code to Gravity Forms Address Fields for Non U.S Types
  • Gravity Forms Make Great Contact Forms in WordPress

Reader Interactions

Comments

  1. jay says

    November 28, 2014 at 4:41 am

    Super nice

    Log in to Reply
  2. Suzana says

    July 31, 2014 at 1:08 am

    Thank you!! This is a great tip 🙂

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.