CSS for 2 columns - 5 fields in first column, 2 fields in second column

Gravity Support Forums » Plugin Support » Gravity Forms

illuminea
Member

Hi, I would like to create a form like seen here: http://womenofthewall.org.il/solidarity/take-a-stand 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.

Posted 13 years ago on Sunday September 19, 2010 | Permalink
Kevin Flahaut
Administrator
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.

Here's a screenshot of my test

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.

http://dl.dropbox.com/u/688846/gravityhelp/gravityforms-export-2010-09-19-2-columns.xml

Once you've imported your form, you'll need to add the following to your theme style sheet to make the layout work.
```
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}
```
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.
Posted 13 years ago on Sunday September 19, 2010 | Permalink
illuminea
Member

Wow. Thank you so much!!!

Posted 13 years ago on Sunday September 19, 2010 | Permalink
IDS
Member

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.

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.

LOVE Gravity Forms so far... just putting in my two cents.

Thanks!

Posted 13 years ago on Saturday March 19, 2011 | Permalink
Kevin Flahaut
Administrator

@bolt22

The HTML block is simply another list item in the main form structure with an id and some class names - all perfectly valid markup.

screenshot: http://grab.by/9yZs

If you've got invalid markup there, it's most likely because the content you've added isn't valid.

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.

http://forum.gravityhelp.com/topic/fieldsets#post-17019

Posted 13 years ago on Saturday March 19, 2011 | Permalink
IDS
Member

Thanks Kevin for the quick reply.

I downloaded your test form and put it on my site on this test page:
http://www.sellwithcommvault.com/fieldset-test/

It works great but still doesn't validate:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sellwithcommvault.com%2Ffieldset-test%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2

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.

Please let me know if you have any other ideas.

Thanks!

Posted 13 years ago on Monday March 21, 2011 | Permalink
Kevin Flahaut
Administrator

As I mentioned before, the validation errors would be due to incorrect markup in the implementation, not from the default form output.

In reviewing the validation errors, it is because your markup is incorrect. For example: This is what you have that's not validating

<legend>Fieldset 1</legend><ul></li>

You'll notice that you're opening a list and then directly after that, trying to close a list item that was never opened.

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.

You'll need to tighten up your markup and it should validate just fine.

Posted 13 years ago on Monday March 21, 2011 | Permalink