Solved

[Tips & Scripts] Flexible Form Fields


Userlevel 3
  • Former Unbouncer
  • 23 replies

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:
http://unbouncepages.com/split-form-fields/

flexible form fields unbounce


How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Scripts Needed

Grab the javascript needed here:
https://gist.github.com/victorzen/9a0294e0e65c03e4b23183e0b58d2118

Instructions

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. Copy and paste the following snippet in the Javascript section with placement ‘Before Body End Tag’.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Add the script found here below the snippet 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!


Testing

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.

Conclusion

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! 🍾


Can’t see the instructions? Log in or Join the Community to get access immediately. 🚀


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

icon

Best answer by winnieko 9 March 2020, 18:39

View original

57 replies

Vic you da man, that’s a really  useful bit of script, we’ve been doing something similar but without the placeholder boxes to use as targets idea, which I think is a really neat way of positioning them as opposed to using JQuery to move them around in fieldsets.

This is a really good step towards the kind of flexible forms that would hold most people back…

Thanks for your efforts 🙂

Cheers

Stuart.

Userlevel 3

Hey Stuart - thanks so much for the feedback!

Glad you liked the idea of the boxes as placeholders. The idea came because I was trying to reposition the fields through javascript and wanted to see the end result in the editor before having to save and previewing. Having something to see in real time really helps with the design!

Cheers!  

  

This is a monster script… thank you. My design team has been asking for more form design flexibility, this is feckin’ amazin!

Userlevel 7
Badge +4

Thank you, Vic!

Userlevel 3

Cool! Can’t wait to see what your designers come up with!

Hope they like it and find it easy to use. Their feedback will be greatly appreciated 🙂   

Userlevel 3

My pleasure!

Genius!

Vic, If possible can you include a copy of the .unboucne page with this? For those of us who are very visual learners it makes figuring this stuff out so much faster.

Userlevel 7
Badge +4

Wow, this is awesome! Are there plans to eventually incorporate this into the default builder?

Userlevel 3

Hi Nicholas,

We are constantly working on making a better and more flexible product overall. There are a few things in the roster before this one, but through community input and voting it might gain traction!

Userlevel 3

Hi Nicholas, 

We are constantly working on making a better and more flexible product overall. There are a few things in the roster before this one, but through community input and voting it might gain traction!

This works fine for desktop, but it’s not mobile responsive. Even in the example, it wasn’t mobile responsive. Any advice working with this to make it responsive? Thanks.

This is AMAZING - I am having a hard time figuring out how to use this with some drop down menus, works great for text fields but the drop downs are in the same spot as the original form.  What code would I have to add to change that?

If I have to I know I can switch back to the Horizontal Script because my menu is just a simple two column deal but this is so easy…

Hi Vic,
Thanks for the script, I’ll use in some of my unbounce pages. I’ve a question, I use a lot of checkboxes in my forms. Does exist some way to use this script with checkboxes?

Thanks and best regards

Badge

I am also having a problem using this script with drop down menus Josh did you manage to find a solution?

Userlevel 3

Thank you very much for the feedback guys! - I changed the script a bit and now it should work with drop down menus!

You’ll find the updated script here: https://gist.github.com/victorzen/9a0294e0e65c03e4b23183e0b58d2118 

Userlevel 3

Hi there!

Yes! I just updated the script and now it should work with drop down menus, radio buttons and checkboxes too. You can find the updated script here: https://gist.github.com/victorzen/9a0294e0e65c03e4b23183e0b58d2118

Let me know if you have any questions. Cheers!

Userlevel 3

Hi there!

Yes! I just updated the script and now it should work with drop down menus, radio buttons and checkboxes too. You can find the updated script here: 
https://gist.github.com/victorzen/9a0294e0e65c03e4b23183e0b58d2118

Let me know if you have any questions. Cheers!

Badge

Great work Vic

One major problem I have been encountering with Unbounce is having nice tidy date of birth selectors and this script will make it possible.

I just want to ask one more thing, Does the script still work for you when you hide the labels on the form? It does not work for me.

Userlevel 3

Thanks for catching this issue Vincent!

I killed the bug and now the script works with hidden labels 🙂
Here’s the updated script:
https://gist.github.com/victorzen/9a0294e0e65c03e4b23183e0b58d2118 

Badge

Hi Vic I have been trying to use the script over the past few days and found a couple of bugs, The hide labels for some reason still does not work (Google Chrome) then also I cannot get it to work with more than 4 from fields 🙂

One issue I am experiencing with this script is that it creates horizontal scroll bars when using a form in a lightbox on mobile.  I double checked to make sure i didn’t have anything out of bounds. Upon removal of the script, the horizontal scroll bars are gone.

Hi,
I am getting these broken links for the images attached in each step of the instructions

Just stumbled upon this and can’t wait to start implementing this to our pages. Hopefully the image links will be updated soon.

Thanks Vic

This is great! One question though. For desktop I love the ability to position my form fields anywhere I like… however - this causes issues when viewing the mobile version. Is there a way this can be implemented just for desktop and disabled if someone is viewing from a mobile device? Thanks!

Reply