Skip to content

Instantly share code, notes, and snippets.

@victorzen
Last active April 22, 2021 14:05
Show Gist options
  • Save victorzen/9a0294e0e65c03e4b23183e0b58d2118 to your computer and use it in GitHub Desktop.
Save victorzen/9a0294e0e65c03e4b23183e0b58d2118 to your computer and use it in GitHub Desktop.
Allows you to place form fields anywhere on the page
<script>
/**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
    * TS:0002-08-042
*/
  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-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>
@jbensous
Copy link

This is great! One thing I have found, I am trying to use where label is hidden and there is more than four fields. The fields display, but you cannot type or select any values for them ... Any ideas how I can fix this?

@Pmueller32
Copy link

Hello,
I don't understand, why the responsive design in mobile mode doesn't change the positions? Is there anything I need to take care of?

Copy link

ghost commented Jul 11, 2017

Here's my proposed change so it changes the width and height and is responsive.

<script>
  /**
      * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
      * TS:0002-08-042
  */
  //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-x",
    "#lp-pom-box-x",           
    "#lp-pom-box-x",
    "#lp-pom-box-x"
  ];
  function setFlexibleFormFieldSize() {
    $('.lp-pom-form .lp-pom-form-field')
      .each(function(i, field) {
      $(field)
        .offset($(boxes[i]).offset())
      $(this).children().outerWidth($(boxes[i]).outerWidth());
      $(this).children().outerHeight($(boxes[i]).outerHeight());
    });
  };
  lp.jQuery(document).ready(function($) {
	setFlexibleFormFieldSize();
  });
  window.addEventListener("resize", setFlexibleFormFieldSize);
</script>

@jfrumar
Copy link

jfrumar commented Apr 18, 2019

I like to be able to see the box in the editor, so I am moving it to the back and making it invisible when rendered:

<script>
  /**
      * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
      * TS:0002-08-042
  */
  // Add the IDs of the boxes where you want the form fields to display in order of the form fields.
  var boxes = [
      172,
      173,
      180,
      181,
      188,
      189,
      191,
      192
    ].map(id => `#lp-pom-box-${id}`);
  function setFlexibleFormFieldSize() {
    $('.lp-pom-form .lp-pom-form-field')
      .each(function(i, field) {
      $(field)
        .offset($(boxes[i]).offset())
      $(this).children().outerWidth($(boxes[i]).outerWidth());
      $(this).children().outerHeight($(boxes[i]).outerHeight());
      // Hide box
      $(boxes[i]).css('zIndex', -1);
      $(boxes[i]).css('visibility', 'hidden');
    });
  };
  lp.jQuery(document).ready(function($) {
	setFlexibleFormFieldSize();
  });
  window.addEventListener("resize", setFlexibleFormFieldSize);
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment