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
Sorry, how can i see the code?
The page showing 404 Error I cant find any Code can you help please
I cant find any Code for Multi Column can you help please
Excellent. Thank you!
+3
Hi @ReneeQuinn,
This is actually a pretty old thread.
Unbounce supports natively multi-column forms now.
You can read a bit more information about it here and also see an example on how to set it up on your own pages.
Best,
Hristian
I cannot see any code. All I see is Here is the code again, but there’s no code visible. I would like to have the code for 2 columns NOT including the Submit Button, as I’d like to center it under the 2 columns. If you would share that with me I’d appreciate it.
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.
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!
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;
}
}
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 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?
+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,
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 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
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?
Use this code to auto-hide the error message:
Use this code to auto-hide the error message:
I have 6 hidden fields and it is working fine for me.
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!
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 {
}
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!
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.
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.
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
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.
