Managing Layouts

Overview

Gutenforms uses the Gutenberg editor, and therefore also supports the following Gutenberg layout blocks within a form:

  • Columns
  • Spacers

These can be added, edited and deleted in the same way as a Field, allowing for a more bespoke form to meet specific needs.

Add Columns

To add columns

  • Click the blue plus symbol towards the top left corner of the screen:
    Gutenforms: Add Field from Toolbar
  • Under the Design category, click the Columns block
    Gutenforms: Design Blocks
  • Click the number of columns / column layout that you’d like
    Gutenforms: Columns: Select Variation

Add Fields to Columns

To add fields, or other blocks, inside a column:

  • Click the plus icon inside the applicable column
    Gutenforms: Columns: Add Inner Block
  • Search for the field or block to insert
    Gutenforms: Add Field Inline Search
  • Click the field or block to insert it into the column

Delete Columns

To delete existing columns:

  • Click on the columns block
    Gutenforms: Columns: Add Inner Block
  • Click the three dots icon
    Gutenforms: More Options
  • Click the Remove Block option
    Gutenforms: Delete Block

Moving Columns

To move columns, changing the layout/order:

  • Click on the columns in the editor
    Gutenforms: Columns: Add Inner Block
  • Click on the up or down icon as applicable.

Add Spacer

To add a spacer:

  • Click the blue plus symbol towards the top left corner of the screen:
    Gutenforms: Add Field from Toolbar
  • Under the Design category, click the Spacer block
    Gutenforms: Design Blocks
  • Drag the blue dot to adjust the height of the spacer as necessary
    Gutenforms: Spacer

Edit Spacer

To edit an existing spacer:

  • Click on the spacer block
    Gutenforms: Spacer
  • Drag the blue dot to adjust the height of the spacer as necessary

Delete Spacer

To delete an existing spacer:

  • Click on the spacer block
    Gutenforms: Spacer
  • Click the three dots icon
    Gutenforms: More Options
  • Click the Remove Block option
    Gutenforms: Delete Block

Moving Spacers

To move a spacer, changing the layout/order:

  • Click on the spacer in the editor
    Gutenforms: Spacer
  • Click on the up or down icon as applicable.