A feature we get asked for a lot is the ability to create forms in more flexible and creative ways, like multi-column forms, horizontal forms, different sizes for input fields etc.
This solution tackles all of the above by allowing you to place the form fields anywhere you want on the page and choosing the width of each field individually. The only limit is your imagination!
Check out the final product built in Unbounce here:
How to Install in Unbounce
Click Here for Instructions
WARNING: YOU ARE ENTERING DEVELOPER TERRITORY
Step 1. Add a box for each form field and make your design. The width of the fields will adapt to the width of the boxes.
Step 2. Add the script found here and replace #lp-pom-box-01, #lp-pom-box-02, etc. with the IDs of your boxes.
Step 3. Change the opacity of the boxes to zero and select “border: none”. Make sure to send the boxes backwards so they don’t block your form fields.
Step 4. Save and republish to see it in action!
Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates.
We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.
This is an incredibly simple way to get your forms look the way you want them and opens a door for exciting design possibilities!
Give it a try and please let us know what you think. Happy converting!
Want to take your Unbounce landing pages + Convertables™ to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks