https://legacy.forums.gravityhelp.com/topic/css-for-2-columns-5-fields-in-first-column-2-fields-in-second-column Gravity Support Forums Topic: CSS for 2 columns - 5 fields in first column, 2 fields in second column en-US Wed, 08 Apr 2026 14:16:20 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/css-for-2-columns-5-fields-in-first-column-2-fields-in-second-column#post-20986 Mon, 21 Mar 2011 15:13:29 +0000 Kevin Flahaut 20986@https://legacy.forums.gravityhelp.com/ <p>As I mentioned before, the validation errors would be due to incorrect markup in the implementation, not from the default form output.</p> <p>In reviewing the validation errors, it is because your markup is incorrect. For example: This is what you have that's not validating</p> <p><code>&lt;legend&gt;Fieldset 1&lt;/legend&gt;&lt;ul&gt;&lt;!-- reopen the list --&gt;&lt;/li&gt;</code></p> <p>You'll notice that you're opening a list and then directly after that, trying to close a list item that was never opened.</p> <p>In my example, there are form fields that would go in between there.. list items that open, close, etc. You'll have to just take that as inspiration and make sure the markup is correct for your particular implementation.</p> <p>You'll need to tighten up your markup and it should validate just fine. </p> https://legacy.forums.gravityhelp.com/topic/css-for-2-columns-5-fields-in-first-column-2-fields-in-second-column#post-20967 Mon, 21 Mar 2011 12:49:17 +0000 IDS 20967@https://legacy.forums.gravityhelp.com/ <p>Thanks Kevin for the quick reply.</p> <p>I downloaded your test form and put it on my site on this test page:<br /> <a href="http://www.sellwithcommvault.com/fieldset-test/" rel="nofollow">http://www.sellwithcommvault.com/fieldset-test/</a></p> <p>It works great but still doesn't validate:</p> <p><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sellwithcommvault.com%2Ffieldset-test%2F&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2" rel="nofollow">http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sellwithcommvault.com%2Ffieldset-test%2F&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2</a></p> <p>I will continue to work with it and see if I can get it to validate. In the end it probably isn't the end of the world if we use code that doesn't validate for this project, but again it would be nice if you could wrap the UL tags with elements.</p> <p>Please let me know if you have any other ideas.</p> <p>Thanks! </p> https://legacy.forums.gravityhelp.com/topic/css-for-2-columns-5-fields-in-first-column-2-fields-in-second-column#post-20849 Sat, 19 Mar 2011 10:17:34 +0000 Kevin Flahaut 20849@https://legacy.forums.gravityhelp.com/ <p>@bolt22</p> <p>The HTML block is simply another list item in the main form structure with an id and some class names - all perfectly valid markup.</p> <p>screenshot: <a href="http://grab.by/9yZs" rel="nofollow">http://grab.by/9yZs</a></p> <p>If you've got invalid markup there, it's most likely because the content you've added isn't valid.</p> <p>If you want to break up the form and add containers such as fieldsets or other div elements you can take advantage of the inline HTML blocks to do just that. Here's an example of using the HTML blocks to create fieldset groupings in your forms. You could apply the same technique to wrap pieces of the forms in divs as well.</p> <p><a href="http://forum.gravityhelp.com/topic/fieldsets#post-17019" rel="nofollow">http://forum.gravityhelp.com/topic/fieldsets#post-17019</a> </p> https://legacy.forums.gravityhelp.com/topic/css-for-2-columns-5-fields-in-first-column-2-fields-in-second-column#post-20838 Fri, 18 Mar 2011 20:40:09 +0000 IDS 20838@https://legacy.forums.gravityhelp.com/ <p>I was looking for the same kind of solution. I have a layout with three columns plus a footer column below. However, when I added the HTML block, it puts out invalid markup. I know this is somewhat a 'code snob' kind of deal, but we do pay attention to this at our firm.</p> <p>If the section breaks could be setup as divs or if there was a way to wrap the fields, this would be so easy and so versatile. I guess I am suggesting that this would be an awesome update.</p> <p>LOVE Gravity Forms so far... just putting in my two cents.</p> <p>Thanks! </p> https://legacy.forums.gravityhelp.com/topic/css-for-2-columns-5-fields-in-first-column-2-fields-in-second-column#post-10072 Sun, 19 Sep 2010 13:17:51 +0000 illuminea 10072@https://legacy.forums.gravityhelp.com/ <p>Wow. Thank you so much!!! </p> https://legacy.forums.gravityhelp.com/topic/css-for-2-columns-5-fields-in-first-column-2-fields-in-second-column#post-10062 Sun, 19 Sep 2010 10:57:31 +0000 Kevin Flahaut 10062@https://legacy.forums.gravityhelp.com/ <p>You can do this if you get creative with the inline HTML fields. Basically you use those to add some additional markup to the form, to close and then reopen the containing UL, add some divs for columns, etc.</p> <p>Here's a <a href="http://grab.by/grabs/b1f555e28040b61f56f33ec822f65ce9.png" rel="nofollow">screenshot of my test</a></p> <p>It's easier to see than try to explain all the steps. I exported the test form so you can grab it, import it and see how it's done. You can download the file at the link below then import it in with your forms.</p> <p><a href="http://dl.dropbox.com/u/688846/gravityhelp/gravityforms-export-2010-09-19-2-columns.xml" rel="nofollow">http://dl.dropbox.com/u/688846/gravityhelp/gravityforms-export-2010-09-19-2-columns.xml</a></p> <p>Once you've imported your form, you'll need to add the following to your theme style sheet to make the layout work.</p> <pre><code>div.gf_form_column_wrapper {overflow:hidden;} div.gf_form_column1, div.gf_form_column2 {padding:10px; border:1px solid #ccc; background:#eee;} div.gf_form_column1 {width:35%; float:left;} div.gf_form_column2 {margin-left:40%;} div.gf_form_column1 input, div.gf_form_column1 select, div.gf_form_column1 textarea, div.gf_form_column2 input, div.gf_form_column2 select, div.gf_form_column2 textarea {width:95%!important}</code></pre> <p>That should get you 90% of the way there, you'll most likely want to tweak styles to suit your preference. Hope that helps out. </p> https://legacy.forums.gravityhelp.com/topic/css-for-2-columns-5-fields-in-first-column-2-fields-in-second-column#post-10058 Sun, 19 Sep 2010 09:01:51 +0000 illuminea 10058@https://legacy.forums.gravityhelp.com/ <p>Hi, I would like to create a form like seen here: <a href="http://womenofthewall.org.il/solidarity/take-a-stand" rel="nofollow">http://womenofthewall.org.il/solidarity/take-a-stand</a> where you have 5 or more fields wrapped in a div in the left column, and 2 fields wrapped in a div in the right column. I read through the forum and understand how to get fields to float next to each, but I want 2 vertical columns. Looking forward to your response. </p>