https://legacy.forums.gravityhelp.com/topic/how-to-split-form-into-two-columns-single-line-entries-left-text-area-right Gravity Support Forums Topic: How to split form into two columns? (Single Line Entries left / Text Area right) en-US Tue, 21 Apr 2026 02:09:13 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/how-to-split-form-into-two-columns-single-line-entries-left-text-area-right#post-17165 Thu, 27 Jan 2011 21:07:37 +0000 Kevin Flahaut 17165@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/how-to-split-form-into-two-columns-single-line-entries-left-text-area-right#post-17164 Thu, 27 Jan 2011 21:02:41 +0000 Daniel McClure 17164@https://legacy.forums.gravityhelp.com/ <p>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! </p> https://legacy.forums.gravityhelp.com/topic/how-to-split-form-into-two-columns-single-line-entries-left-text-area-right#post-17151 Thu, 27 Jan 2011 18:02:47 +0000 Kevin Flahaut 17151@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>form editor screenshot: <a href="http://grab.by/8CUD" rel="nofollow">http://grab.by/8CUD</a></p> <p>preview screenshot: <a href="http://grab.by/8CUw" rel="nofollow">http://grab.by/8CUw</a> </p> https://legacy.forums.gravityhelp.com/topic/how-to-split-form-into-two-columns-single-line-entries-left-text-area-right#post-17150 Thu, 27 Jan 2011 17:58:03 +0000 Kevin Flahaut 17150@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>I'll do a quick test and let you know for sure </p> https://legacy.forums.gravityhelp.com/topic/how-to-split-form-into-two-columns-single-line-entries-left-text-area-right#post-17147 Thu, 27 Jan 2011 17:04:41 +0000 Daniel McClure 17147@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/how-to-split-form-into-two-columns-single-line-entries-left-text-area-right#post-17132 Thu, 27 Jan 2011 16:31:55 +0000 David Smith 17132@https://legacy.forums.gravityhelp.com/ <p>Hi Daniel,</p> <p>This post on the Gravity Forms blog will probably be helpful:</p> <p><a href="http://www.gravityhelp.com/css-ready-classes-for-gravity-forms/" rel="nofollow">http://www.gravityhelp.com/css-ready-classes-for-gravity-forms/</a> </p> https://legacy.forums.gravityhelp.com/topic/how-to-split-form-into-two-columns-single-line-entries-left-text-area-right#post-17116 Thu, 27 Jan 2011 15:40:43 +0000 Daniel McClure 17116@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>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.</p> <p>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? </p> <p>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.</p> <p>Thanks in advance! </p>