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{}

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

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

Can anyone confirm that this still works?

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.

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!

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

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!

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.

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

😂

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

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.