[Tips & Scripts] Flexible Form Fields

forms
design

#1

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//unbouncepagescom/split-form-fields

flexible form fields unbounce


How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
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. 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!


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! :chart_with_upwards_trend: :champagne:


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


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


The Ultimate List of Unbounce Tips, Scripts & Hacks
Underlined form fields
Mobile Responsive Form Fields
#2

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 :slight_smile:

Cheers

Stuart.


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

  


#4

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


#5

Thank you, Vic!


#6

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 :slight_smile:   


#7

My pleasure!


#8

Genius!


#9

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.


#10

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


#12

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!


#13

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!


#14

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.


#15

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…


#16

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


#17

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


#18

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 


#19

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!


#20

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!


#21

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.