Managing Form Fields

Overview

When creating or editing a Form in Gutenforms, you’ll be presented with the following interface:
Gutenform Editor

From here, you can:

Here, we’re focusing on the first step: adding, editing and deleting Form Fields.

If you’re familiar with using the Gutenberg editor, you’ll find Gutenforms works in the same way; each field is a block, so you’ll manage fields as you would any other block based content.

Title

Gutenforms Title

It’s recommended to define a title for your Form.  Whilst this is not displayed on the form’s output on your web site, it’s a useful reference for you to differentiate between forms that you might have, or when managing Entries.

Type the title of your choice into the Add title field.

Adding a Field

To add a field:

  • Click the blue plus symbol towards the top left corner of the screen:
    Gutenforms: Add Field from Toolbar
  • Under the Gutenforms category, click the form field to add:
    Gutenforms Fields
  • It will be added to the form:
    Gutenform: Added Field

Alternatively:

  • Click the smaller black plus symbol towards the bottom of the screen:
    Gutenforms: Add Field Inline
  • In the Search for a block field, start typing the field type that you’d like to add:
    Gutenform: Added Field
  • Click the field, and it will be added to the form:

Editing a Field

To edit a field:

  • Click the field
    Gutenform: Added Field
  • Edit the field’s options, which will be displayed in the right hand sidebar:
    Gutenforms: Field Options

If the sidebar does not display as above, click the cog icon towards the top right of the screen:
Gutenform: Field Settings Icon

Attributes for each field are described below.

Text Field

The text field displays a single line text input

Gutenforms Text Field

Attribute Accepted Value Description
Name alphanumeric string, including underscores and dashes The programmatic name for the field. This must be unique from all other fields in this form.
Label string The field’s label.  If defined, will be displayed above the field. Recommended for accessibility. If blank, no description is displayed.
Description string The field’s description or instructions.  If defined, will be displayed below the field.  If blank, no description is displayed.
Placeholder string The field’s placeholder, or inline label.  If defined, will be displayed within the field when no value is present.  If blank, no placeholder is displayed.
Default Value string The field’s default value. If defined, will populate the field’s value. If blank, no default value is displayed.
Required true or false Whether a value is required for this field.  If enabled, an asterisk is displayed beside the label (if defined), and the form will not submit if the value is left blank.

Paragraph Field

The paragraph field (or textarea) displays a multiline text input

Gutenforms Paragraph Field

Attribute Accepted Value Description
Name alphanumeric string, including underscores and dashes The programmatic name for the field. This must be unique from all other fields in this form.
Label string The field’s label.  If defined, will be displayed above the field. Recommended for accessibility. If blank, no description is displayed.
Description string The field’s description or instructions.  If defined, will be displayed below the field.  If blank, no description is displayed.
Placeholder string The field’s placeholder, or inline label.  If defined, will be displayed within the field when no value is present.  If blank, no placeholder is displayed.
Default Value string The field’s default value. If defined, will populate the field’s value. If blank, no default value is displayed.
Required true or false Whether a value is required for this field.  If enabled, an asterisk is displayed beside the label (if defined), and the form will not submit if the value is left blank.

Number Field

The number field displays a single line numerical input field, which will only accept a numeric value.

Gutenforms Number Field

Attribute Accepted Value Description
Name alphanumeric string, including underscores and dashes The programmatic name for the field. This must be unique from all other fields in this form.
Label string The field’s label.  If defined, will be displayed above the field. Recommended for accessibility. If blank, no description is displayed.
Minimum Value integer The field’s minimum value.  If defined, form submissions will fail if the value provided by the user is less than this number.  If blank, no minimum value constraint is applied.
Maximum Value integer The field’s maximum value.  If defined, form submissions will fail if the value provided by the user is greater than this number.  If blank, no maximum value constraint is applied.
Step Value integer The increment between the minimum and maximum values.
Description string The field’s description or instructions.  If defined, will be displayed below the field.  If blank, no description is displayed.
Placeholder string The field’s placeholder, or inline label.  If defined, will be displayed within the field when no value is present.  If blank, no placeholder is displayed.
Default Value integer The field’s default value. If defined, will populate the field’s value. If blank, no default value is displayed.
Required true or false Whether a value is required for this field.  If enabled, an asterisk is displayed beside the label (if defined), and the form will not submit if the value is left blank.

Email Field

The email field displays a single line email input field, which will only accept a valid email address.

Gutenforms Email Field

Attribute Accepted Value Description
Name alphanumeric string, including underscores and dashes The programmatic name for the field. This must be unique from all other fields in this form.
Label string The field’s label.  If defined, will be displayed above the field. Recommended for accessibility. If blank, no description is displayed.
Description string The field’s description or instructions.  If defined, will be displayed below the field.  If blank, no description is displayed.
Placeholder string The field’s placeholder, or inline label.  If defined, will be displayed within the field when no value is present.  If blank, no placeholder is displayed.
Default Value string The field’s default value. If defined, will populate the field’s value. If blank, no default value is displayed.
Required true or false Whether a value is required for this field.  If enabled, an asterisk is displayed beside the label (if defined), and the form will not submit if the value is left blank.
Email Notifications: Use as Reply To Address true or false Whether this email address value should be used as the reply to address when an Email Notification is sent to the site owner.

The dropdown field (or select field) displays a dropdown list of options, of which the user can choose one value.

Gutenforms Dropdown Field

Attribute Accepted Value Description
Name alphanumeric string, including underscores and dashes The programmatic name for the field. This must be unique from all other fields in this form.
Label string The field’s label.  If defined, will be displayed above the field. Recommended for accessibility. If blank, no description is displayed.
Description string The field’s description or instructions.  If defined, will be displayed below the field.  If blank, no description is displayed.
Choices string The field’s available choices / values.

  • To add a choice, click the Add Choice button
  • To edit a choice, edit the text for the applicable choice
  • To remove a choice, click the Remove button beside the choice to remove
    Gutenforms Field Choices: Add and Remove
Default Value string The field’s default value. If defined, will pre-select the dropdown field with the given value. If blank, or the value does not match a choice specified above, no pre-selected value is chosen.
Required true or false Whether a value is required for this field.  If enabled, an asterisk is displayed beside the label (if defined), and the form will not submit if the value is left blank.

Checkbox Field

The checkbox field displays a list of options, of which the user can choose one or more values by ticking checkboxes.

Gutenforms Checkbox Field

Attribute Accepted Value Description
Name alphanumeric string, including underscores and dashes The programmatic name for the field. This must be unique from all other fields in this form.
Label string The field’s label.  If defined, will be displayed above the field. Recommended for accessibility. If blank, no description is displayed.
Description string The field’s description or instructions.  If defined, will be displayed below the field.  If blank, no description is displayed.
Choices string The field’s available choices / values.

  • To add a choice, click the Add Choice button
  • To edit a choice, edit the text for the applicable choice
  • To remove a choice, click the Remove button beside the choice to remove
    Gutenforms Field Choices: Add and Remove
Default Value string The field’s default value. If defined, will pre-select a checkbox field if the value specified matches a choice above. If blank, or the value does not match a choice specified above, no checkbox is pre-selected.
Required true or false Whether a value is required for this field.  If enabled, an asterisk is displayed beside the label (if defined), and the form will not submit if the value is left blank.

Radio Field

The radio field displays a list of options, of which the user can choose one value by clicking a radio button.

Gutenforms Radio Field

Attribute Accepted Value Description
Name alphanumeric string, including underscores and dashes The programmatic name for the field. This must be unique from all other fields in this form.
Label string The field’s label.  If defined, will be displayed above the field. Recommended for accessibility. If blank, no description is displayed.
Description string The field’s description or instructions.  If defined, will be displayed below the field.  If blank, no description is displayed.
Choices string The field’s available choices / values.

  • To add a choice, click the Add Choice button
  • To edit a choice, edit the text for the applicable choice
  • To remove a choice, click the Remove button beside the choice to remove
    Gutenforms Field Choices: Add and Remove
Default Value string The field’s default value. If defined, will pre-select a radio field if the value specified matches a choice above. If blank, or the value does not match a choice specified above, no checkbox is pre-selected.
Required true or false Whether a value is required for this field.  If enabled, an asterisk is displayed beside the label (if defined), and the form will not submit if the value is left blank.

File Field

The file field displays a file upload button, allowing the user to upload a single file.

Gutenforms File Upload Field

Attribute Accepted Value Description
Name alphanumeric string, including underscores and dashes The programmatic name for the field. This must be unique from all other fields in this form.
Label string The field’s label.  If defined, will be displayed above the field. Recommended for accessibility. If blank, no description is displayed.
Description string The field’s description or instructions.  If defined, will be displayed below the field.  If blank, no description is displayed.
Required true or false Whether a value is required for this field.  If enabled, an asterisk is displayed beside the label (if defined), and the form will not submit if the value is left blank.

Deleting a Field

To delete an existing field:

  • Click on the field in the editor
    Gutenform: Added Field
  • Click the three dots icon
    Gutenforms: More Options
  • Click the Remove Block option
    Gutenforms: Delete Block

Moving a Field

To move a field, changing the layout/order:

  • Click on the field in the editor
    Gutenforms: Move Field
  • Click on the up or down icon as applicable.