Gravity Support Forums Topic: How can I get the form fields/boxes side by side?

Gravity Support Forums Topic: How can I get the form fields/boxes side by side? https://legacy.forums.gravityhelp.com/topic/how-can-i-get-the-form-fieldsboxes-side-by-side Gravity Support Forums Topic: How can I get the form fields/boxes side by side? en-US Mon, 06 Apr 2026 23:43:33 +0000 http://bbpress.org/?v=1.0.1 <![CDATA[Search]]> q https://legacy.forums.gravityhelp.com/search.php Kevin Flahaut on "How can I get the form fields/boxes side by side?" https://legacy.forums.gravityhelp.com/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-30455 Tue, 19 Jul 2011 16:38:20 +0000 Kevin Flahaut 30455@https://legacy.forums.gravityhelp.com/ Actually, this example was based on a previous code snippet that created fieldsets. You can find that here. <a href="http://www.gravityhelp.com/forums/topic/fieldsets#post-17019" rel="nofollow">http://www.gravityhelp.com/forums/topic/fieldsets#post-17019</a> Carl Hancock on "How can I get the form fields/boxes side by side?" https://legacy.forums.gravityhelp.com/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-30422 Tue, 19 Jul 2011 14:55:14 +0000 Carl Hancock 30422@https://legacy.forums.gravityhelp.com/ It won't be filtered out. It's possible, if you really study the code and implement it correct, to implement Fieldsets using the HTML blocks positioned correctly and using the correct HTML to close and open tags properly. Jevgenijs on "How can I get the form fields/boxes side by side?" https://legacy.forums.gravityhelp.com/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-30416 Tue, 19 Jul 2011 12:52:50 +0000 Jevgenijs 30416@https://legacy.forums.gravityhelp.com/ Can I actually use the fieldset the same way by inserting it into HTML or it will be filtered off? Kevin Flahaut on "How can I get the form fields/boxes side by side?" https://legacy.forums.gravityhelp.com/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-29425 Thu, 07 Jul 2011 19:36:02 +0000 Kevin Flahaut 29425@https://legacy.forums.gravityhelp.com/ Yep, you'd basically remove the fieldset stuff from the previous example and use div elements like this.. First HTML block content <pre><code></li> </ul> <div id="field_column_1"> <ul class="gform_fields top_label description_above"></code></pre> ---- Put form fields for the first column here... Second HTML block content <pre><code></li> </ul> </div> <div id="field_column_2"> <ul class="gform_fields top_label description_above"></code></pre> ---- Put form fields for the second column here... Third HTML block content <pre><code></li> </ul> </div> <div id="field_column_3"> <ul class="gform_fields top_label description_above"></code></pre> ---- Put form fields for the third column here... Fourth HTML block content <pre><code></li> </ul> </div> <div id="field_column_4"> <ul class="gform_fields top_label description_above"></code></pre> ---- Put form fields for the fourth column here... Fifth HTML block content <pre><code></li> </ul> </div> <div id="field_column_5"> <ul class="gform_fields top_label description_above"></code></pre> ---- Put form fields for the fifth column here... Sixth (last) HTML block content <pre><code></li> </ul> </div></code></pre> Once you've done that, you would want to target those div elements and float them so they all work in columns.. here's a quick CSS example that you can tweak to get started.. place it at the end of your theme stylesheet and style away. <pre><code>[css] body .gform_wrapper div#field_column_1, body .gform_wrapper div#field_column_2, body .gform_wrapper div#field_column_3, body .gform_wrapper div#field_column_4, body .gform_wrapper div#field_column_5 { width:18%; height:400px } body .gform_wrapper div#field_column_1, body .gform_wrapper div#field_column_2, body .gform_wrapper div#field_column_3, body .gform_wrapper div#field_column_4 { margin-right:1%; float:left }</code></pre> Hope that points you in the right direction. Kathy on "How can I get the form fields/boxes side by side?" https://legacy.forums.gravityhelp.com/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-29423 Thu, 07 Jul 2011 19:21:39 +0000 Kathy 29423@https://legacy.forums.gravityhelp.com/ Thanks Kevin! Sadly a developer is not in his budget. :( So I'd replace "fieldset" with "div" in your example? Thanks again! Kevin Flahaut on "How can I get the form fields/boxes side by side?" https://legacy.forums.gravityhelp.com/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-29421 Thu, 07 Jul 2011 19:13:48 +0000 Kevin Flahaut 29421@https://legacy.forums.gravityhelp.com/ If it were just a few simple things, I'd say to try using the CSS ready classes but they may not be ideal for your form layout. <a href="http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes</a> There isn't a provision for 5 content columns though and with the amount of fields you have, they wouldn't end up working right or being grouped logically in your admin. I would suggest using the inline HTML fields to create div elements around the groups of fields, then using CSS to float the new div/groups into 5 columns. You have to be a little creative with the markup & placement but it's not difficult to do. Here's a post that details how I added fieldset containers to a form.. you should be able to modify that slightly for divs instead. <a href="http://www.gravityhelp.com/forums/topic/fieldsets#post-17019" rel="nofollow">http://www.gravityhelp.com/forums/topic/fieldsets#post-17019</a> Either way, it's going to take some work and a pretty good understanding of CSS to pull it off. If you're not really comfortable with it, you might consider contracting a developer to help you put it all together. Here's a good place to find one if you need. <a href="http://wpcandy.com/pros/experienced/with-gravity-forms" rel="nofollow">http://wpcandy.com/pros/experienced/with-gravity-forms</a> Kathy on "How can I get the form fields/boxes side by side?" https://legacy.forums.gravityhelp.com/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-29418 Thu, 07 Jul 2011 18:53:48 +0000 Kathy 29418@https://legacy.forums.gravityhelp.com/ Hello, I need to recreate this form ( <a href="http://www.statefundins.com/quote/life/" rel="nofollow">http://www.statefundins.com/quote/life/</a> ), and can't figure out how to get the form fields/boxes side by side. I'm sure it's a CSS issue, but I don't know CSS well enough to make this happen. The site is in Thesis: <a href="http://rckurpg.es/p4bY5y" rel="nofollow">http://rckurpg.es/p4bY5y</a>. Thanks for any and all help!