Splitting lead forms into two columns?


#1

Can you split the lead form into two columns, so it doesn’t get so long? I am making a form for our sales reps to use at exhibitions to collect leads on thier Ipads, so it will be a little longer than usual.


Horizontal Forms
#2

Unfortunately this currently isn’t possible with the editor however it is possible to do something with some custom Javascript. The done side of this approach is that you will only see the form with two columns in preview or the published page so it makes it a little harder to design your page.

Here is a Javascript that takes any form on the page and tries to split it into two columns. You could tweak it to your needs.


#3

Sorry that last post got broken… Here is the code again.


#4

Also you might want to consider that longer forms typically achieve poorer conversion than shorter forms due to the effort required by the user to fill them in. I expect this might be particularly relevant on a device such as the iPad that requires touch screen entry. If possible you might want to try A/B testing different form length and see if you notice any difference in performance.

Justin


#5

Does not work


#6

Hi Maxime, I just tried the script Justin posted above in a test page and it worked fine. You can see the results here: http://unbouncepages.com/two-column-f…

Can you share the page that you’re having trouble with?


#7

What about 3 or 4 columns ? Is it as easy to do ?


#8

I’d love to have the option to do forms in several columns as well- and I am only requesting first name and email- it just looks nicer on some layouts- so add another tally to having that feature added.


#9

thanks. Can you please post a version of this script that leaves the submit button out of it - so that it can be positioned manually?


#10

The code isn’t working for me…

Trying to embed custom code by dragging the box into the correct position then copy/pasting the column code… when I hit preview nothing happens…

Thoughts??


#11

Hey Alex - you’ve still got to embed/position a normal form on your page then add Justin’s code using the javascript widget.

Justin’s code should split the original form into two columns.

Is that what you tried doing already?


#12

If you have many hidden fields (10 on my page), the script does not seem to work – any tips?


#13

is there code somewhere for creating 3 columns? I have two fields and a submit button. I want them all to fit in a horizontal. The two is working fine, but the submit is below the second field. any insight?


#14

Hey Casey - the submit button can be moved where ever you like. You should be able to just click and drag it to the right of your form.


#15

Is it possible to divide just the first row of the lead form into two columns? A lot of websites have the First Name and Last Name form fields on the same line (split in to two columns), while other form fields remain in a single column.

An example of this is facebook’s landing page: https://www.facebook.com/

Is it possible to do this via javascript on unbounce?

Thanks so much!!


#16

Hello and thanks for this useful script. But I’ve notticed a small trouble when trying to click on a field of the 2nd column in order to fill it. It is not posible to click with the mouse and write on a 2d column field, I need to click in a 1st column field and then use the TAB button of the keyboard to arrive to the 2nd. Is it expected to happen? Is there any solution? Thanks in advance!


#17

Hey Rafael - There shouldn’t be any problem with selecting the field using this script. There might be another factor in play. I’ve gone ahead and started a support ticket for you so we can get a better idea what’s going on. Lookout for my email!


#18

Have you tried 3 columns with this? What needs to change in the code for 3 columns?


#19

Finally!
Thank you Mark.


#20

Hello,
Thanks but the Error message is now on the 2nd box and I can’t move it… Can you help me?