PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

How to split form into two columns? (Single Line Entries left / Text Area right)

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Daniel McClure
    Member

    As described in the title I am trying to split a form into two columns. On the left hand side there will be a Name/Email/Phone/ input and on the right a large text area.

    I have tried setting percentages on the inidividual inputs but I could only get the small inputs to line up. Following this I tried adding a couple of HTML boxes above and below to create a right and left div but HTML boxes are placed inside list items.

    I know this should be possible but I just can't seem to get my head around the CSS logic for it at the moment. Has anyone done this before or knows how it's possible?

    The site is not live yet so I can't share the URL but I'm comfortable with CSS so I'm OK converting whatever you come up with to my specific classes and IDs.

    Thanks in advance!

    Posted 13 years ago on Thursday January 27, 2011 | Permalink

  2. David Smith
    Member

    Hi Daniel,

    This post on the Gravity Forms blog will probably be helpful:

    http://www.gravityhelp.com/css-ready-classes-for-gravity-forms/

    Posted 13 years ago on Thursday January 27, 2011 | Permalink

  3. Daniel McClure
    Member

    Thanks for the response. I have just tried that but it doesn't seem to work as that appaears to be designed for the likes of first and last name rather than three small boxes lined against one large text area.

    Posted 13 years ago on Thursday January 27, 2011 | Permalink

  4. Kevin Flahaut
    Administrator

    You should be able to put "gf_left_half" classes on the first three text fields, then a "gf_right_half" class on the textarea so it floats to the right of the 3 fields you just floated left.

    I'll do a quick test and let you know for sure

    Posted 13 years ago on Thursday January 27, 2011 | Permalink

  5. Kevin Flahaut
    Administrator

    Actually, apply the classes as I described, but put the textarea field before the single text inputs. That way the floats work properly and you get the look you want.

    form editor screenshot: http://grab.by/8CUD

    preview screenshot: http://grab.by/8CUw

    Posted 13 years ago on Thursday January 27, 2011 | Permalink

  6. Daniel McClure
    Member

    That's still not working on this site for some reason even though I followed your instruction. At least I know it's possible though so I will see if I can have another shot in the morning. Thanks!

    Posted 13 years ago on Friday January 28, 2011 | Permalink

  7. Kevin Flahaut
    Administrator

    Okay, let me know how it goes. If need be, we can take a fresh look at it when you have a live URL I can see later.

    Posted 13 years ago on Friday January 28, 2011 | Permalink

This topic has been resolved and has been closed to new replies.