Skip to content

Instantly share code, notes, and snippets.

@victorzen
Last active April 22, 2021 14:05
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • 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>
@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