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?