Change form layout in gravity forms

HTML & CSS
1

Hi,
On my site we have a registration form that is very long (using Gravity Forms) I am trying to split the form so it’s more horizontal rather than vertical. [URL=“http://pmcommunity.org/form_sample.jpg”]Here’s a link to a sample of what I’m trying to achieve. I tried changing the gform_body and thought I could create another body class that would float the business section to the right but it didn’t work. I can add classes to the input areas but I cannot get into the html to wrap the business section in a div so I have to try to over ride the existing css.
Any help would be appreciated.
Thanks

2

Can you edit the HTML? If so, duplicate the gform_body div and float them both.

3

No, I can’t get into the html - that’s the problem. The only thing I can do is use css to try to modify the layout.

4

That makes things pretty difficult, as everything is locked into one div and one UL.

You could remove the width on the div

.gform_body {
  width: 460px !important;
}

and remove all the current styles on the LIs and start from scratch, changing widths, removing some floats and adding others, but really it will be a big mess and very hard to work with, if it can be done at all. It’s easy if you can change the HTML, so that’s what you should be looking at. It’s not really feasible to do web design without HTML access.

5

@kevin,

I agree with Ralph, it really isn’t feasible to try and change the layout of that Gravity form given the markup they used and lack of access to that markup.

From the search I did of Gravity forms, I see that it is a WordPress plugin. Do you have access to the wordpress installation of your site at all such as via FTP? If you do, then I would think that if Gravity Forms is like any other WordPress plugin, it’s installed into the plugins directory of your WordPress installation on your host server. I would find the appropriate file(s) in that plugin’s specific directory and modify the html output.

That of course all depends on whether you actually can get access to those files, and whether you have the knowledge/experience to edit WordPress plugin files. This solution may or may not be feasible at all, but just a thought.

On another note, the markup used for that form really isn’t ideal either, not sure why they’d use a list for something like that. Just doesn’t seem completely justifiable.

-Alex

6

I thoughtof going into the plugin directory (I do have access) but there are other GF forms and altering that might mess up the other forms.

7

True, I figured as much. Hmmm… unfortunately all you have to do is break the groups of fields into at least two or three separate <ul> lists, though divs or fieldsets would be better. I’m still thinking though…

8

after a lot of research I found a solution. I was able to wrap the two sections in divs and gave them separate classes (first_half, second_half (pretty semantic ;)). However, I cannot get the second_half class to float next to the first_half. I’m sure it’s something very obvious but I’m not seeing it.(maybe I’m too tired) Here’s what I’m using for the divs:

.first_half {float: left; width: 450px;}
.second_half {float: left; width: 450px; background-color: #CCCCCC;}
.clear {clear: both;}

Here’s a link to the new test page I just need to move the business info to the right of the personal info

Thanks for any help

9

I think I got it with a negative margin - don’t know why but that works.
However, it doesn’t work in chrome - the second half stays under the first half
Am I missing something??

10

Yes. The left and right divs are contained in the .gform_body div which is set to width 460px. So remove that rule:

.gform_body {
  position: relative;
  [COLOR="Red"]width: 460px !important;[/COLOR]
}

and also remove this:

.gform_wrapper {
  [COLOR="Red"]max-width: 900px;[/COLOR]
}

and of course remove the negative margin on the right column.

11