Please note:
Legacy forms are deprecated and are being replaced by Conversion forms which offer multi-step options and can trigger overlays, as well has having a new drag and drop form builder.

2 column forms can be created in Conversion forms by selecting a 2 column template or grid.

Legacy forms

Styling forms to display in a two column format is a common requirement and here is some basic CSS for splitting the form into 2 columns.

If you add any other fields, you’ll also need to change the number in “nth-child()”. The number will be the number of fields you have plus one.

The styles you add are applied directly to the form and these are the selectors you need to apply CSS to basic form elements within the ‘Styles’ tab:

/* Sample CSS

* This works with a form with multiple elements,
then the fifth element is displayed full width,
which is handy for a larger message text area.

/* These elements are displayed half width */
.form-group {
  width: 48%;
  padding-left: 1%;
  padding-right: 1%;
  display: inline-block;
  float: left;

/* This element is displayed full width */
form div:nth-child(5) {
  width: 96%;
  padding-left: 2%;
  padding-right: 2%;

input[type="submit"] {
    clear: both;

Did this answer your question?