Multi-Field, Multi-Step Form 🔥

Hey, we had some issues on mobile devices because the fields were too wide so we added a quick fix to make the width different on mobile devices. Take a look:

First we create a variable fieldWidth

  var fieldWidth = '400px'; //Default width value for desktop
  
  if ($(window).width() < 600) {
   fieldWidth = '280px'; //Special width for mobile devices
}

Now replace the fixed width the new variable like this:

  jQuery('fieldset.step:last-of-type div.lp-pom-form-field').css('width', fieldWidth);

  jQuery('fieldset.step:last-of-type div.lp-pom-form-field input').css('width', fieldWidth);

  jQuery('fieldset.step:last-of-type div.lp-pom-form-field select').css('width', fieldWidth);

  jQuery('fieldset.step:last-of-type div.lp-pom-form-field:last-of-type select').css('width', fieldWidth);

I hope this helped! :slight_smile:

1 Like

@happyagencies Out of curiosity, can you not just change the form width in mobile mode within the Unbounce editor?

Not with that code because it was overwritting it with inline css.

Fair enough… our multistep script although based on this has diverged significantly from it :slight_smile:

Hello!
I’m having an issue with the form: when I try to put 2 fields on the last step they are not put one above the other but next. Is there a way to easily solve this? Here how it looks:

I’d really love to have these 2 together as the second one really doesnt’t make much sense on its own but it’s mandatory.
Thank you!

@s.bacci, drop us a link to your landing page, should be able to send you some CSS!

1 Like

Here it is! :wink:
LP Multistep test

Hey @s.bacci,

Your problem was caused by your “container_email” element being set to by the script to 140px.

Hopefully you can just change this in the editor (hard to debug without access!), but if not, the following CSS will fix it:

div#container_email {
width: 100% !Important
}

input#email {
width: 100% !Important
}

fieldset.step{
width: 100% !important
}

I also noticed the same thing happened to your checkbox, so this can be overridden as follows:

input[name="privacy_consent"] {
width: 20px !Important;
}

Here’s what I ended up with -

All the best,

1 Like

Thank you very much Harvey! It works and looks exactly how I wanted. :wink:

Any updates on this?

1 Like

s there by any chance a way to automatically jump to next question without clicking “next” button on drop-down selections?

1 Like

Hi,

Can any one give .unbounce page where this script is implemented?

Can you share .unbounce page of this to download? It will be great for this community and help us all.

Hi @adimpression,

Would you be able to share your resolution with the script not syncing with the form. I’m having the same issue and am not able to resolve it.

Thanks!

@Caroline!

Hi, would you know why I get the fields side by side instead of underneath each other? I’ve tried various things.

screenshot_4519|636x354

Thanks

Does anyone have a video of this process? I followed the instructions but can’t get it to work.