Solved

[Tips & Scripts] Flexible Form Fields

Vic
Userlevel 3
  • Vic
  • Former Unbouncer
  • 23 replies

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

icon

Best answer by winnieko 9 March 2020, 18:39

View original

57 replies

W
Userlevel 1

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 = ["#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($(boxes[i]).offset())
          $(this).children().width($(boxes[i]).width()-16)
      });    
  });
</script>
JulzJames

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

LuckyLuke

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 🙂

Matthew_Metros

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

Martin_Paskalev

OMG, Thank you! This worked!

Thomas_GOIRAND1

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 = ["#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($(boxes[i]).offset())
          $(this).children().width($(boxes[i]).width()-16)
      });    
  });
  }
  else{}
R

@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