Working with contact fields, form elements, and field groups

Contact fields, form elements, and field groups are used to build your forms. Read below to learn how to work with these design elements:

Adding contact fields, form elements, and field groups

Forms are built by adding contact fields, form elements, and field groups to the canvas.

To add a contact field, form element, or field group:

  1. With your form open, drag a contact field, form element, or field group to your form.

A gif of adding contact fields to the form canvas.

Important: Once a field group (for example, Basic Contact Info) is added to a form, the fields are no longer grouped together. They are treated separately, like contact fields and form elements.

Moving contact fields and form elements

You can move contact fields and form elements horizontally or vertically into empty cells. You can also move each row of your form vertically.

To move a contact field or form element into an empty cell:

  1. With your form open, click the contact field or form element you want to move.
  2. Click An image of the drag handle icon and drag it to the new location.

A gif of moving contact fields and form elements on the canvas.

To move a form row:

  1. With your form open, click the canvas area to the left or right of the row you want to move.
  2. Click and drag it to the new location.

A gif of moving a form row.

Deleting contact fields and form elements

To delete a contact field or form element:

  1. With your form open, click the contact field, form element, or field group you want to delete.
  2. Click An image of the trash icon.

If a field is deleted from a row that contains other fields, an empty cell remains. You can add a new field or move an existing field into that cell. You can also expand an existing field by resizing the columns to fill the empty cell space.

Resizing and adding columns

To resize or add columns:

  1. With your form open, click the canvas area to the left or right of the row that contains the columns you want to resize or add.
  2. Click on or to decrease or increase the size of the columns. Click to add a column, up to a maximum of 3 columns.

An image of arrows used to resize columns.

Learn more

Forms

Contact fields, form elements, and field groups