Creating Columns in the Form Editor

Introduction

In this article, we’ll demonstrate how to work with columns in the Form Editor in the Gravity Forms 2.5. With this new streamlined release of the form editor, you create rows and columns of fields simply by dragging and dropping fields into the form editor:

Drag And drop

Fields can be placed on your form using drag and drop actions. Where you drag and drop determines how the columns will be created. We call the destination area that you release at the end of a drag action a “drop zone”.

Demonstrates dragging fields from the Field Select List into the Form Editor

Drag and Drop Not Working?

Drag and drop column control is only available to forms using Gravity Forms 2.5 standard markup. If you are using legacy markup, or using an older Gravity Forms version, then features like drag and drop will not be available.

If you wish to change to using the standard markup, you will need to disabling the Enable legacy markup toggle, found within the Form Settings → Form Options

Column Drop Zones

To create multiple columns of fields, drag fields into the Column Drop Zones to the left or right of existing fields in the editor.

Demonstrates dragging fields from the Field Selector to the left and right of existing fields in their Column Drop Zones

Row Drop Zones

To create multiple rows of fields, drag fields into the Row Drop Zones to the top and bottom of an existing row of fields in the editor.

Demonstrates adding fields in a row above or below existing row of fields by dragging and dropping fields into the Row Drop Zones in the editor

Dragging Fields to Create Columns

To create columns in the editor, drag and drop fields directly into a column drop zone and the editor will automatically add the column and re-size existing fields.

Demonstrates creating columns by dragging a field by the field handle and dropping it into a Column Zone to automatically add a column
  1. Select the Field in the editor
  2. Grab the Field Handle
  3. Drag the Field over the Column Drop Zone
  4. Drop the Field and the Columns will automatically adjust

Resize Columns using Column Handles

To resize existing columns in the editor, use Column Handles to shrink or enlarge the width of a column.

Demonstrates resizing columns in the form editor by dragging the Column Handle to the left to shrink or to the right to enlarge the width of the column
  1. Select the Field in the editor
  2. Grab the Column Handle to the right of the field, the Active Column Handle
  3. Drag left to shrink the column width
  4. Drag right to enlarge the column width

Known Issues or Limitations

  • There is a maximum of 4 resizable columns. You cannot create a fifth.
  • Columns are not supported on forms with legacy markup enabled.
  • The field types of Page Break, Section Break, & Hidden cannot be placed in columns.