Allows you to place form fields anywhere on the page

Flexible Form Fields.md

// https://community.unbounce.com/t/tips-scripts-flexible-form-fields/3043

<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-1",
               "#lp-pom-box-2",
	      "#lp-pom-box-3",
	      "#lp-pom-box-4",];
  
  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>

<script> $(document).ready(function() { var windowType; var $wind = $(window); var mobileCheck = function() { var window_w = $wind.width(); var currType = window_w < 940 ? 'mobile' :'desktop'; if (windowType == currType) { return; } else { windowType = currType; } if (windowType == 'mobile') { 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-175", "#lp-pom-box-176", "#lp-pom-box-177", "#lp-pom-box-178", "#lp-pom-box-179", "#lp-pom-box-180", "#lp-pom-box-181"]; $('.lp-pom-form .lp-pom-form-field') .each(function(i, field) { $(field) .offset($(boxes[i]).offset()) $(this).children().width($(boxes[i]).width()-16) }); }); } else { 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-151", "#lp-pom-box-152", "#lp-pom-box-146", "#lp-pom-box-147", "#lp-pom-box-148", "#lp-pom-box-149", "#lp-pom-box-150"]; $('.lp-pom-form .lp-pom-form-field') .each(function(i, field) { $(field) .offset($(boxes[i]).offset()) $(this).children().width($(boxes[i]).width()-16) }); }); } } mobileCheck(); var resizeTimer; $wind.resize(function() { if (resizeTimer) { clearTimeout(resizeTimer); } resizeTimer = setTimeout(mobileCheck, 300) }); }); </script>