Allows you to place form fields anywhere on the page

Flexible Form Fields.md

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

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?

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?

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>

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>