Hi @Jenna_Bensoussan!

Here’s a script you can use to fire any code on mobile or desktop only:

<script>
  if ( lp.jQuery(window).width() <= 600 ) {

    // Your mobile code goes here

  }else{

    // Your desktop code goes here

  }      
</script>

All you need to do is remove the opening <script> and closing </script> tags in the Flexible Form Fields script and add it to the ‘Your desktop code goes here’ area on the script above. That will prevent it from firing on the mobile version of the page.

Hope you find this workaround useful. Have a great day!

I tried this and it kinda worked. I have form validation going on to show State and Province fields only if the US or Canada are selected respectively. In order for those fields to show up in the right place I had to add CSS code to place them on the form in the right place in the desktop version. How can I compensate for these two fields on mobile? Can I do conditional CSS for mobile for these two fields?

Hi Max,

You have to do both. Your form has to contain the fields you are collecting data for. The boxes are for placement purposes only. Think of it as a front end and a back end. The form is the backend - it holds the data you want to collect. The boxes are the frontend - they are strategically placed where you want the form fields to appear. You will also need to make sure you send the form “to front” and the boxes “to back” otherwise visitors will not be able to enter data. Also - make sure you view how the form looks on your mobile version because you will need to move the boxes to fit a smaller screen if you have them positioned horizontally on the desktop version.

Jenna,

Thank you very much!. I could finally resolve it.

Cheers,

Max

Vic,

I applied the code as you mentioned but for some reason Unbounce is showing me the script on Orange, meaning something is wrong. The form does works as intended, script to work on desktop but not on mobile. Here is the code. What could be wrong?. Could you let me know?. Thanks.

I implemented the flexible form fields. The error message div is overlapping with the form how can I change the position of the box.

OMG Vic!

I freaked out cause I thought the github link was created specially for me since it has my name on the url hahahahahaha

😂

Hello!

Thank you for this script. I’m using it on several pages and it’s working great.
I generated a new page based on an old one, and can’t seem to get the form fields to display.
Could you please check it out?
http://unbouncepages.com/november-enewsletter-1/

The second set of three boxes should also have checkboxes at the top.

Does this add any extra space to the right side of the page for anyone else?
When I remove the script the space is no longer there. Can anyone assist… @Vic ?

In addition to this I have found a work around for the desktop/mobile issue. (Mine was only working properly on load and if i resized the window, it would not work - which I realize that a user will usually just see one version, but a client will most likely view mobile on a desktop)

It is a bit wonky… but it works.

Just copy the fields on the mobile editor, hide the old ones, and place the corresponding fields in the script.

<script>
  
  $(document).ready(function() {

    var windowType;
    var $wind = $(window);

    var mobileCheck = function() {
        var window_w = $wind.width();
        var currType = window_w < 940 ? 'mobile' :'desktop';

        if (windowType == currType) {
            
            return;
        } else {
            windowType = currType;
        }

        if (windowType == 'mobile') {                
                          lp.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-175",
                 "#lp-pom-box-176",           
                 "#lp-pom-box-177",
                 "#lp-pom-box-178",
                 "#lp-pom-box-179",
                 "#lp-pom-box-180",
                 "#lp-pom-box-181"];
    
    $('.lp-pom-form .lp-pom-form-field')
      .each(function(i, field) {
        $(field)
          .offset($(boxes[i]).offset())
          $(this).children().width($(boxes[i]).width()-16)
      });    
  });
        } else {
              lp.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-151",
                 "#lp-pom-box-152",           
                 "#lp-pom-box-146",
                 "#lp-pom-box-147",
                 "#lp-pom-box-148",
                 "#lp-pom-box-149",
                 "#lp-pom-box-150"];
    
    $('.lp-pom-form .lp-pom-form-field')
      .each(function(i, field) {
        $(field)
          .offset($(boxes[i]).offset())
          $(this).children().width($(boxes[i]).width()-16)
      });    
  });
        }
    }

    mobileCheck();
    var resizeTimer;

    $wind.resize(function() {
        if (resizeTimer) {
            clearTimeout(resizeTimer);
        }

        resizeTimer = setTimeout(mobileCheck, 300)
    });

});
  
</script>

If anyone has an alternative to this, please share!!

Thanks!

Thanks for the Great Script People… it definitely saved me solid time… One question however, can i make multiple submission buttons on the page ?

Hi,
I´ve been reading the thread but apparently no one went into this issue before.
These forms (in the gif attached) seem to work nicely.
But the cursor only allows the user to type something in the lower part of the field.
From the middle part up, the cursor becomes an arrow and prevents the user from typing.

Any ideas why this might be happening?

Desktop version live at: https://test.baisargentina.com/2-fields-test/
Thanks!

I can’t seem to get this to work on any of my forms. Is this script out of date? I’ve copied it word for word, step-by-step, and it doesn’t do anything.

Can anyone confirm that this still works?