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.
Best answer by Mark_Wainwright
View original
Hi Joel! Sorry for the delay in getting back to you. You can adjust the width by just changing the width of the entire form in the Unbounce page builder. Each field will be exactly as wide as the form is.
Hi,
How do I tweak the width of the form using this code?
Hi Katherine. Sorry for the delay in replying.
Are you using the script I posted above? (https://gist.github.com/markwainwrigh…) If so, you could probably tweak the script a bit to give the form a manual width, instead of it just going across the whole page. See line 25? (it starts ’ var maxWidth ')
You could replace that with var maxWidth = 500; , if you wanted your form to be 500 pixels across.
It’s a tweak and I haven’t tested it, but you could always give it a try.
Hi Joel - good question! Unfortunately neither Unbounce’s native forms nor my script above have the functionality for you to manually position certain fields. The only workaround I can think of is to tweak the width of your form (i.e. make it wider) so only those first three fields fit on a line. This will push the checkbox field onto a new line. You could then change the submitPlacement variable right at the the top to ‘manual’, which would allow you to place the Submit button wherever you like.
Would it be possible to have the horizontal form with one checkbox below the form? Essentially to have 3 form inputs, and a button side by side, with a checkbox horizontally below them for a privacy policy? Trying to fix the attached image.
Hi Gil - probably the easiest way to do this is to change the submitPlacement variable right at the the top to ‘manual’. This means the script won’t touch the submit button, and you can manually position it however you like in the Page Builder. Thanks!
How should I tweak the code in order to change the position of the button?
Let’s say I’d like to move the button 100 pixels to the left?
Thanks
Hi - can we force where we want the form to break into the second column?
Were you able to figure this out?
Hi Pierre - Unfortunately, if you’re using form error validation, you may find it doesn’t play nicely with horizontal forms. As horizontal forms are not a built in feature (yet) it’s super tough to troubleshoot this. We’re looking at exploring workarounds so both can be compatible together.
Thanks but the Error message is now above the 2nd box and I can’t move it… Can you help me?
Hello,
Thanks but the Error message is now on the 2nd box and I can’t move it… Can you help me?
Finally!
Thank you Mark.
Hi everyone,
We’ve had a few customers wondering how to make a form that flows entirely horizontally Ð i.e. not just in two columns like the example above. Like this:
I’ve written a script that’ll let you achieve just this. If the fields reach the edge of the page they’ll then break and keep going on a new line. It plays nicely with fields of varying heights, such as long checkbox/radio lists.
It also has options for placing the submit button inline with the fields, on a new line, or remaining wherever you manually placed it in the page builder.
Here’s the script:
https://gist.github.com/markwainwright/9338233
Enjoy!
Have you tried 3 columns with this? What needs to change in the code for 3 columns?
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!
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!
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!!
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.
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?
If you have many hidden fields (10 on my page), the script does not seem to work – any tips?
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?
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??
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?
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.
No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.
