[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