Managing Form Fields - WP Gutenforms

Overview

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

From here, you can:

Add, edit and delete the Form Fields to display on the Form,
Manage Form Options, such as the Submit Button’s text and on screen success notification
Edit Email Notification Options

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:
Under the Gutenforms category, click the form field to add:
It will be added to the form:

Alternatively:

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

Editing a Field

To edit a field:

Click the field
Edit the field’s options, which will be displayed in the right hand sidebar:

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

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
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
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
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
Click the three dots icon
Click the Remove Block option

Moving a Field

To move a field, changing the layout/order:

Click on the field in the editor
Click on the up or down icon as applicable.