How to Install in Unbounce

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.

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!

Thank you, Vic!

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 🙂   

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.

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

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!

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

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

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 

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!

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!

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.

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 

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!