How to Place Form Fields Anywhere on a Classic Builder Page

By default, a Classic Builder form stacks its fields in a single column. This script lets you position each form field independently and set each field's width, which you can use to build multi-column layouts, horizontal forms, or fields of different sizes.

This is community code, not an official Unbounce feature. It relies on third-party code that Unbounce Support can't troubleshoot. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.

See the demo page built in Unbounce.

Before you start

The script is hosted on GitHub as Place form fields anywhere on the page. You need it in step 3.

Add the script to your page

1. Add a box element for each form field and arrange the boxes where you want the fields to appear. Each field takes the width of its box.
2. In the JavaScripts section, add the following snippet with placement set to Before Body End Tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

3. Add the script from the GitHub gist below the snippet, then replace #lp-pom-box-01, #lp-pom-box-02, and so on with the IDs of your boxes. You can find each box ID under Element Metadata in the Properties panel.

4. Set each box's opacity to 0 and its border to None, then send the boxes backward so they sit behind the form fields.

5. Save and republish the page. The new layout appears in Preview and on the published page, not in the builder.

If the script doesn't run

Some users found that the script only works with jQuery instead of lp.jQuery. The following version uses jQuery. Replace the box IDs in the boxes list with your own.

<script>
/**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption.
    * TS:0002-08-042
*/
  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>

Test the change

Run an A/B test with a small share of traffic to confirm the new layout doesn't lower your conversion rate.