How can we split the form in multiple columns?

How do I split a form like on this page

http://earcandy.com/product/sovereign-1x12-b/

Thanks!

Looking on your website I see that the form is split in 2 columns, which is what I presume that you are after?

If that so, then what you should use is the Shrink and Move to a New Line options.

Basically what you do is to add all of the fields that you will need to your form.

Now once you do that, you click on each of them and apply the Shrink option on them one at the time. This is possible by clicking on the field, then on the gear icon and then selecting Shrink:

Now as you go through the fields, you will quickly see that they are following each other causing sometimes to have 2 in one row, the other time 3, while sometimes even 4.

Now to make sure that we always have 2 fields per row, we click on the every second field (the last one that should be shown in each row) and click on the gear icon, followed by a click on the Move to a new line option:

As you do this, you will see them all fall in line, one after another.

Now the only thing that is left to do is to apply the following CSS to your form:

li.form-line.form-line-column.form-col-1, li.form-line.form-line-column.form-col-2 {
    width: 50%;
    box-sizing: border-box;
   
}

This will set them to have the each field on your form with the 50% of the width of the available space on your form.

* That was for the plain form fields. If you want to do the same for the payment processing tool then the steps a bit different.

To do it on the payment processing tool, you should add the products to it and once you are finished, you simply apply the following CSS to your form:

.form-product-item.hover-product-item {
    box-sizing: border-box;
    float: left;
    width: 50%;
}

As you do, you will see the products being set in 2 columns.

If you want 3, then the width is simply changed from 50% (100 / 2) to 33% (100/3) and in similar fashion for all other numbers ( 100% of the width available / number of columns desired)

Now next to this you might need to make more width available, but we would be happy to assist with that if needed, so just let us know.

Thanks Ben!! Great answer. This works great. I haven't ran into any space problems yet.

Thank you again for your help.