[Tips & Scripts] Flexible Form Fields

design
forms

#48

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.


#50

Wow @JasonRoach, love your page! How did you get those checkboxes with images done?


#51

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!


#52

I don’t remember what I did, but I’m having the same trouble again. I add form items, add the appropriate boxes, add the box #IDs to the script, but it won’t add the new ones.

http://unbouncepages.com/August-enewsletter-2

I’m inspecting the code of the page and it’s just not plugging the form information in.
Any ideas?


#53

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


#54

Hi @Vic,
I’m currently trying to make these flexible fields work but I have pain doing it Is it possible to make a video call so that you can help me make it work ?
Shouldn’t be long !
Thanks in advance for your help
Best,
Arnaud


#55

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!
com-video-to-gif%20(1)