Skip to main content

tips-scripts-banner


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

Hi there! Yes, this still works 🙂 You can see it on this page here:


http://unbouncepages.com/custom-flexible-form-fields/


However, I found that it works when I removed the “lp.” from the script. I hope that helps!


<script>

/**

    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 

    * TS:0002-08-042

*/

  jQuery(document).ready(function($) {

    

    //Change #lp-pom-box-01, etc. for the IDs of the boxes where you want the form fields to display.

    var boxes = s"#lp-pom-box-01",

                 "#lp-pom-box-02",           

                 "#lp-pom-box-03",

                 "#lp-pom-box-04"];

    

    $('.lp-pom-form .lp-pom-form-field')

      .each(function(i, field) {

        $(field)

          .offset($(boxesoi]).offset())

          $(this).children().width($(boxesoi]).width()-16)

      });    

  });

</script>

HI Vic,


Sorry to bring up an old post, but I’m working on the flexible form fields and I can get it to either show on mobile, or on desktop but not both. Do I need to use the mobile code you posted to enable this to work?


Thanks


Julz

Hi Vic


Wow, this is really amazing. Thank you soo much. This will give me and my team more possibilities in styling forms. Awesome 🙂


How do you manage to place 3 forms to your landingpage? Or is this just an example to illustrate your script? I’m searching a way to have two forms on one page.


Thank you already in advance for any help 🙂

For some reason, I cannot grab the individual ids for each form cell. Is this a new update?

OMG, Thank you! This worked!


Hi Vic, Same here, the if/else won’t work as expected.


Code here if anyone spot the issue.


if(jQuery(Window).width()) >=600 {

    jQuery.ready(function($) jQuery(document).ready(function($) {

    

    //Change #lp-pom-box-01, etc. for the IDs of the boxes where you want the form fields to display.

    var boxes = s"#lp-pom-box-319",

                 "#lp-pom-box-316",           

                 "#lp-pom-box-318",

                 "#lp-pom-box-321",

                 "#lp-pom-box-322",

                 "#lp-pom-box-323"];

    

    $('.lp-pom-form .lp-pom-form-field')

      .each(function(i, field) {

        $(field)

          .offset($(boxesoi]).offset())

          $(this).children().width($(boxesoi]).width()-16)

      });    

  });

  }

  else{}

@winnieko thank you for this. The original script wasn’t working for me but when i used your modification it worked!

Reply


Terms & ConditionsCookie settings