Solved

[Tips & Scripts] Flexible Form Fields

Show first post

57 replies

W
Userlevel 1

Hi there! Yes, this still works 🙂 You can see it on this page here:

http://unbouncepages.com/custom-flexible-form-fields/

However, I found that it works when I removed the “lp.” from the script. I hope that helps!

<script>
/**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
    * TS:0002-08-042
*/
  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-01",
                 "#lp-pom-box-02",           
                 "#lp-pom-box-03",
                 "#lp-pom-box-04"];
    
    $('.lp-pom-form .lp-pom-form-field')
      .each(function(i, field) {
        $(field)
          .offset($(boxes[i]).offset())
          $(this).children().width($(boxes[i]).width()-16)
      });    
  });
</script>
JulzJames

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

LuckyLuke

Hi Vic

Wow, this is really amazing. Thank you soo much. This will give me and my team more possibilities in styling forms. Awesome 🙂

How do you manage to place 3 forms to your landingpage? Or is this just an example to illustrate your script? I’m searching a way to have two forms on one page.

Thank you already in advance for any help 🙂

Matthew_Metros

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

Martin_Paskalev

OMG, Thank you! This worked!

Thomas_GOIRAND1

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

@winnieko thank you for this. The original script wasn’t working for me but when i used your modification it worked!

Reply


Terms & ConditionsCookie settings