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 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!
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 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.
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,
How do I tweak the width of the form using this code?
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.
im having the same problem and i don’t now what to do. can you paste a new version of the code without the button
Hi Matt. Are you using the script I posted above? (https://gist.github.com/markwainwrigh…). If so, you can change where it says ‘inline’ at the bottom to ‘manual’. As the comment above indicates, this will let you place the button wherever you like in the page builder, and the script won’t move it at all.
Hi everyone,
I managed to use Justin from Unbounce and Mark Wain Wright in this thread to align the fields and allow the user to position the submit button and would like to share my code with you:
https://gist.github.com/gab1982/b12dc…
It only does two columns for now, feel free to create multiple columns of aligned fields.
Hi everyone,
I managed to use Justin from Unbounce and Mark Wain Wright in this thread to align the fields and allow the user to position the submit button and would like to share my code with you:
https://gist.github.com/gab1982/b12dc…
It only does two columns for now, feel free to create multiple columns of aligned fields.
Thank you for this!
I have a form with a few large check box fields and I really need to be able to make 3 columns or control where it breaks but I have no idea how.
Right now it looks uneven because of the large check box fields.
Please help!
Is there a way you could help me edit the button part so it’s inline also?
// Put button on new line
thisTop = top + tallest + spacing;
left = 0;
} else {
}
Hi Gary and Tami,
Please take a look at my comment above (click here).
The script has three options for the submit button:
So, unless I’m missing something, these options should cover what both of you want to achieve. Gary, I think you’re looking for ‘manual’, and Tami, ‘inline’.
Please let me know if I’m missing anything!
I have 6 hidden fields and it is working fine for me.
Use this code to auto-hide the error message:
Use this code to auto-hide the error message:
Is there a way to modify the tab index order of the form fields after breaking it into 2 columns? The default setting is to go down the left side and then down the right side, but I want to have it alternate from left to right then back to left #2, then right #2, etc.
Is there a way to do this through a custom script?
+1
Hi Mary - The second script Mark posted in this thread (you can go directly to that comment by clicking here) should work for that.
That script lays out the form entirely horizontally, breaking to a new line when it runs into either the side of the page or the side of another element. If you place your form in a box, you can set the box width to be wide enough for two columns, but skinnier than three columns and the will force the form to alternate, but still be two columns like you’re describing. Boxes have a border by default, but you can turn that off in the box’s settings. You’ll also likely need to adjust your button’s placement a bit after publishing and checking how the form looks after the script does its thing.
Here’s a quick video showing what I mean: http://screencast.com/t/DahEfeIEpBG
Hi,
This is something I asked about way back. I am no code expert but have saved the code in javascript but am struggling as it isnt working.
Is this not an option for you guys to include by simply ticking a box in the form builder? Just the point of Unbounce being you dont need tech dept, coder etc.
Seems odd when you have articles about how form length directly affects conversion rates but provide no simple solution to make the form appear in one line???
+1
Hi Dez - this may be something that we add down the road, but there are some bigger projects that are higher up on your road map right now.
If you’re having trouble getting it working, can you shoot us an email with the page you’re working on to support@unbounce.com and someone can take a look at what might be causing the issue.
Usually, when we (and other CRO peeps) talk about form length and conversions it’s about the actual volume of information that’s being requested and not the layout. So, a form that’s just first name, last name, email address will usually convert better than a form on an otherwise identical page that has those fields, plus a bunch of extra ones, regardless of how they’re laid out.
Hi I am using the above code by Justin and it works great for what I need on a PC however on a mobile version of the unbounce page it still splits it, is it possible I can tell it to stack them normally on the mobile version but stack them side by side like in Justin’s code?
Hi Graham,
Have you checked out Mark’s code by chance? This is the updated way to accomplish what your’e looking for, so the updated code should work. Let me know!
Hi Justin,
Unfortunately that didn’t do what I wanted as I only needed 2 rows of input fields on the pc but for them to be stacked on top of each other on a mobile, however I managed to figure it out and solve it in CSS using this code:
@media only screen and (max-width: 500px) {
.lp-pom-form-field{
left: 0px !important;
top: 10px !important;
position: relative !important;
}
}
I jumped into your account to see what you were referring to, and after checking it out I completely understand now. Great job at finding the solution, Graham!
Graham,
The code you added to remove the split on mobile - did you add that as a separate JavaScript or did you add that to Justin’s original code that splits the form? I tried adding it as a separate Javascript code, but no luck.
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.
