Five Columns inline? [RESOLVED]

Get Help
, , , ,
1

Hello

I am trying to achieve a 5 column inline layout for a form (the submit button would also be inline and would be the sixth element, after five fields). I was shown an example using Contact Form 7, which I would really prefer not to use.

In a previous, now closed and unresolved, support topic it was suggested that the class “gfield–width-one-sixth” be used. I have tried this and achieved the same result as the previous poster, i.e. it does not work.

I have tried with the first four fields placed side-by-side using drag and drop, and this ends up with the final field and the Submit button on a second line. I have tried it without placing the fields side-by-side using drag and drop and it simply creates a traditional style form, with nothing inline but the Submit button.

I do not have a site where I can show this work as it is a staging site that is locked down. I am using the Avada Wordpress theme, which I have used over 100 times with Gravity Forms, so I’m not suspecting a conflict, although I haven’t tested for one.

Can anyone help? Is this even possible using Gravity Forms?

2

Hello. Like this?

Download the form I created here: export.json - Droplr

Save that to your desktop, then Import the form from your WordPress dashboard Forms → Import/Export → Import Forms page.

Then embed the form in a page on your site and view it.

Each field gets a Custom CSS Class name on the Appearance tab of:

gfield--width-one-sixth

Note the two dashes between gfield and width. It looks like the forum software converted that to a long dash like this – when it was rendered in the other topic.

The other thing you need to do on the Form Settings for the form overall is give it a Custom CSS Class of gf_simple_horizontal to put the submit button inline.

If you have any other questions, please let us know.

1 Like
3

Chris, you are a lifesaver. That worked perfectly. Thank you very much!

1 Like