Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@jbensous jbensous commented Dec 12, 2016

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

This comment has been minimized.

Copy link

@Pmueller32 Pmueller32 commented Mar 9, 2017

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?

@ghost

This comment has been minimized.

Copy link

@ghost 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

This comment has been minimized.

Copy link

@jfrumar 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