Fields

Fields are arguably the core of a form, providing users the means to input actual content into a form. With Formie's form builder interface, fields are organised into rows. Each row can have multiple fields (up to 4), allowing fields to be shown in a column layout, side-by-side.

Each field varies by its type, allowing for different functionality and behaviour depending on the field.

Looking for custom fields? Developers can create their own custom fields to extend the functionality of Formie. Read the Custom Field docs for more.

Settings

All fields have a standard collection of settings.

AttributeDescription
LabelThe label that describes this field.
HandleHow you’ll refer to this field in your templates.
RequiredWhether this field should be required when filling out the form.
Error MessageWhen validating the form, show this message if an error occurs.
Label PositionHow the label for the field should be positioned.
InstructionsInstructions to guide the user when filling out this form.
Instructions PositionHow the instructions for the field should be positioned.
CSS ClassesAdd classes to be outputted on this field’s container.
Container AttributesAdd attributes to be outputted on this field’s container.
Input AtributesAdd attributes to be outputted on this field’s input.

See the full Field documentation for more.

In addition some fields have some additional specific settings, described below.

Field Types

Formie provides 26 different fields for use in your forms.

Address #

A field for addresses. There are a number of sub-fields that can be enabled as required:

  • Address 1
  • Address 2
  • Address 3
  • City
  • State / Province
  • ZIP / Postcode
  • Country

Agree #

A field for a single checkbox. Its ideal purpose is to be an agreement checkbox for terms & conditions, or similar. It can be marked as required or not as well as have its checked and unchecked values set.

Settings #

SettingDescription
DescriptionThe description for the field. This will be shown next to the checkbox.
Checked ValueThe value of this field when it is checked.
Unchecked ValueThe value of this field when it is unchecked.
Default ValueThe default value for the field when it loads.

Categories #

A field for users to select categories from a dropdown field.

Settings #

SettingDescription
PlaceholderThe option shown initially, when no option is selected.
SourceWhich source do you want to select categories from?
Branch LimitLimit the number of selectable category branches.

Checkboxes #

A field for a collection of checkboxes for the user to pick one or many options, each with their own label and value.

Settings #

SettingDescription
OptionsDefine the available options for users to select from.
LayoutSelect which layout to use for these fields.

Date/Time #

A field to select the date or time, or both. There are some different display types:

  • Calendar
  • Dropdown fields (a field for year, month, etc)
  • Text input fields (a field for year, month, etc)

Settings #

SettingDescription
Include TimeWhether this field should include the time.
Default ValueEntering a default value will place the value in the field when it loads.
Display TypeSet different display layouts for this field.

Dropdown #

A field for users select from a dropdown field. The field can also get to to allow multiple options to be set.

Settings #

SettingDescription
PlaceholderThe option shown initially, when no option is selected.
Allow MultipleWhether this field should allow multiple options to be selected.
OptionsDefine the available options for users to select from.

Email Address #

A field for users to enter their email. This is <input type="email"> field.

Settings #

SettingDescription
PlaceholderThe text that will be shown if the field doesn’t have a value.
Default ValueEntering a default value will place the value in the field when it loads.

Entries #

A field for users to select entries from a dropdown field.

Settings #

SettingDescription
PlaceholderThe option shown initially, when no option is selected.
SourcesWhich sources do you want to select entries from?
LimitLimit the number of selectable entries.

File Upload #

A field for users to upload images from their device. This is <input type="file"> field. It provides the following additional settings:

Settings #

SettingDescription
Upload Location
Limit Number of FilesLimit the number of files a user can upload.
Limit File SizeLimit the size of the files a user can upload.
Restrict allowed file types

Group #

A field to allow grouping of additional fields, in much the same way a row is grouped, by placing fields into columns. Grouped fields can have up to 4 fields in columns.

Heading #

A field to show text in a heading.

Settings #

SettingDescription
Heading SizeChoose the size for the heading.

Hidden #

A field to create a hidden input. This is <input type="hidden"> field.

Settings #

SettingDescription
Default ValueEntering a default value will place the value in the field when it loads.

Html #

A field to allow any HTML code to be shown on the form. Useful for <iframe> embeds, or any arbitrary HTML.

Settings #

SettingDescription
HTML ContentEnter HTML content to be rendered for this field.

Multi-Line Text #

A field for text entry that runs over multiple lines. This is a <textarea> input.

Settings #

SettingDescription
PlaceholderThe text that will be shown if the field doesn’t have a value.
Default ValueEntering a default value will place the value in the field when it loads.
Limit Field ContentWhether to limit the content of this field.
LimitEnter the number of characters or words to limit this field by.

Name #

A field for users to enter the name. Can be used as a single <input type="text"> input, or split into several sub-fields:

  • Prefix
  • First Name
  • Middle Name
  • Last Name

Settings #

SettingDescription
Use Multiple Name FieldsWhether this field should use multiple fields for users to enter their details.

Number #

A field to enter a validated number. This is a <input type="number"> field.

Settings #

SettingDescription
PlaceholderThe text that will be shown if the field doesn’t have a value.
Default ValueEntering a default value will place the value in the field when it loads.
Limit NumbersWhether to limit the numbers for this field.
Decimal PointsSet the number of decimal points to format the field value.

Phone #

A field to enter a phone number. This is a <input type="tel"> field.

Settings #

SettingDescription
Show Country Code DropdownWhether to show an additional dropdown for selecting the country code.

Products #

A field for users to select products from a dropdown field.

Settings #

SettingDescription
PlaceholderThe option shown initially, when no option is selected.
SourcesWhich sources do you want to select products from?
LimitLimit the number of selectable products.

Radio #

A field for radio button groups, for the user to pick a single option from.

Settings #

SettingDescription
OptionsDefine the available options for users to select from.
LayoutSelect which layout to use for these fields.

Repeater #

A field to allow multiple sub-fields (similar to Group), but they are repeatable. Users can generate new rows of inputs as required. Sub-fields can be laid out in a similar fashion to rows, by placing fields into columns.

Settings #

SettingDescription
Add LabelThe label for the button that adds another instance.
Minimum instancesThe minimum required number of instances of this repeater's fields that must be completed.
Maximum instancesThe maximum required number of instances of this repeater's fields that must be completed.

Section #

A UI element to split field content with a <hr> element.

Settings #

SettingDescription
BorderAdd a border to this section.
Border WidthSet the border width (in pixels).
Border ColorSet the border color.

Single-Line Text #

A field for the user to enter text. This is a <input type="text"> field.

Settings #

SettingDescription
PlaceholderThe text that will be shown if the field doesn’t have a value.
Default ValueEntering a default value will place the value in the field when it loads.
Limit Field ContentWhether to limit the content of this field.
LimitEnter the number of characters or words to limit this field by.

Table #

A field showing values in a tabular format. Similar to a Repeater field, users can add more rows of content, but is more simplistic than a Repeater field.

Settings #

SettingDescription
Table ColumnsDefine the columns your table should have.
Default ValuesDefine the default values for the field.
Add Row LabelThe label for the button that adds another row.
StaticWhether this field should disallow adding more rows, showing only the default rows.
Minimum instancesThe minimum required number of rows in this table that must be completed.
Maximum instancesThe maximum required number of rows in this table that must be completed.

Tags #

A field for users to select or create tag elements.

Settings #

SettingDescription
PlaceholderThe option shown initially, when no option is selected.
SourceWhich source do you want to select tags from?

Users #

A field for users to select users from a dropdown field.

Settings #

SettingDescription
PlaceholderThe option shown initially, when no option is selected.
SourcesWhich sources do you want to select users from?
LimitLimit the number of selectable users.

Variants #

A field for users to select variants from a dropdown field.

Settings #

SettingDescription
PlaceholderThe option shown initially, when no option is selected.
SourceWhich source do you want to select variants from?
LimitLimit the number of selectable variants.

Get started with Formie

Available for Craft 3. Get it from the plugin store.