Overview
When creating or editing a Form in Gutenforms, you’ll be presented with the following interface:
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
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
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
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.
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.
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. |
Dropdown Field
The dropdown field (or select field) displays a dropdown list of options, of which the user can choose one value.
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.
|
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.
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.
|
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.
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.
|
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.
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.