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.
All fields have a standard collection of settings.
Attribute | Description |
---|---|
Label | The label that describes this field. |
Handle | How you’ll refer to this field in your templates. |
Required | Whether this field should be required when filling out the form. |
Error Message | When validating the form, show this message if an error occurs. |
Label Position | How the label for the field should be positioned. |
Instructions | Instructions to guide the user when filling out this form. |
Instructions Position | How the instructions for the field should be positioned. |
CSS Classes | Add classes to be outputted on this field’s container. |
Container Attributes | Add attributes to be outputted on this field’s container. |
Input Attributes | Add attributes to be outputted on this field’s input. |
Visibility | See below. |
You can set any field to be "Hidden" on the front-end. This will still be available in the source of the page, but hidden for general users. You can also set it to be "Disabled", where the field is never rendered on the front-end, but can still have its value set via Field Population. This can be beneficial if you're concerned with tampering of the HTML before submission.
See the full Field documentation for more.
In addition, some fields have some additional specific settings, described below.
For some fields (Text, Number, Password and Email) you can select whether to enforce validation where two fields need to have the same value. This is most commonly used for "confirm" fields, such as Email, or Password.
Formie provides 31 different fields for use in your forms.
A field for addresses. There are a number of sub-fields that can be enabled as required:
If you have any Address Providers configured, you can also enable an Auto-Complete setting. This allows the use of a single text input to type an address, and have it auto-completed.
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.
The description for the Agree field can also contain HTML via a WYSIWYG editor. You can control the available buttons and formatting via available buttons.
Setting | Description |
---|---|
Description | The description for the field. This will be shown next to the checkbox. |
Checked Value | The value of this field when it is checked. |
Unchecked Value | The value of this field when it is unchecked. |
Default Value | The default value for the field when it loads. |
A field for creating read-only content based on other fields' content. Supports arithmetic, bitwise, comparison, logic, string, array, numeric and ternary operators, and of course being able to reference other fields.
The underlying parsing logic is based off the Symfony Expression Syntax (opens new window).
+
(addition)-
(subtraction)*
(multiplication)/
(division)%
(modulus)**
(pow)10 + 10 + 22
&
(and)|
(or)^
(xor)==
(equal)===
(identical)!=
(not equal)!==
(not identical)<
(less than)>
(greater than)<=
(less than or equal to)>=
(greater than or equal to)matches
(regex match){field1} == {field2}
{field1} > {field2}
not
or !
and
or &&
or
or ||
{field1} < 10 or {field2} > 10
~
(concatenation){field1} ~ " " ~ {field2}
in
(contain)not in
(does not contain)..
(range)Setting | Description |
---|---|
Calculations Formula | Provide the formula used to calculate the result for this field. Use arithmetic operators (+, -, *, /, etc) and reference other fields. |
A field for users to select categories from.
Setting | Description |
---|---|
Display Type | What sort of field to show on the front-end for users. |
Placeholder | The option shown initially, when no option is selected. |
Source | Which source do you want to select categories from? |
Branch Limit | Limit the number of selectable category branches. |
Root Category | Only output the direct children of the chosen category. |
Show Structure | Whether to show the hierarchical structure of categories in the dropdown. |
A field for a collection of checkboxes for the user to pick one or many options, each with their own label and value.
Setting | Description |
---|---|
Options | Define the available options for users to select from. |
Layout | Select which layout to use for these fields. |
A field to select the date or time, or both. There are some different display types:
Setting | Description |
---|---|
Include Date | Whether this field should include the date. |
Include Time | Whether this field should include the time. |
Default Value | Entering a default value will place the value in the field when it loads. |
Display Type | Set different display layouts for this field. |
Min Date | Set a minimum date for dates to be picked from. |
Max Date | Set a maximum date for dates to be picked up to. |
Date Format | Set the format for dates, shown on the front-end. |
Time Format | Set the format for time, shown on the front-end. |
Use Date Picker | Whether this field should use the bundled cross-browser date picker (Flatpickr.js (opens new window) docs) when rendering this field. |
Date Picker Options | Add any additional options for the date picker to use. For available options, refer to the Flatpickr.js (opens new window) docs. |
A field for users select from a dropdown field. The field can also get to allow multiple options to be set.
Setting | Description |
---|---|
Allow Multiple | Whether this field should allow multiple options to be selected. |
Options | Define the available options for users to select from. |
A field for users to enter their email. This is <input type="email">
field.
Setting | Description |
---|---|
Placeholder | The text that will be shown if the field doesn’t have a value. |
Default Value | Entering a default value will place the value in the field when it loads. |
Unique Value | Whether to limit user input to unique values only. This will require that a value entered in this field does not already exist in a submission for this field and form. |
Validate Domain (DNS) | Whether to validate the domain name provided for the email via DNS record lookup. This can help ensure users enter valid email addresses. |
Blocked Domains | Define a list of domain names to block. Users entering email addresses containing these domains will be blocked from using them. |
A field for users to select entries from.
Setting | Description |
---|---|
Display Type | What sort of field to show on the front-end for users. |
Placeholder | The option shown initially, when no option is selected. |
Sources | Which sources do you want to select entries from? |
Limit | Limit the number of selectable entries. |
A field for users to upload images from their device. This is <input type="file">
field. It provides the following additional settings:
Setting | Description |
---|---|
Upload Location | |
Limit Number of Files | Limit the number of files a user can upload. |
Limit File Size | Limit the size of the files a user can upload. |
Restrict allowed file types |
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.
A field to show text in a heading.
Setting | Description |
---|---|
Heading Size | Choose the size for the heading. |
A field to create a hidden input. This is <input type="hidden">
field.
Setting | Description | |
---|---|---|
Default Value | Entering a default value will place the value in the field when it loads. |
A field to allow any HTML code to be shown on the form. Useful for <iframe>
embeds, or any arbitrary HTML.
Setting | Description |
---|---|
HTML Content | Enter HTML content to be rendered for this field. |
A field for text entry that runs over multiple lines. This is a <textarea>
input.
Setting | Description |
---|---|
Placeholder | The text that will be shown if the field doesn’t have a value. |
Default Value | Entering a default value will place the value in the field when it loads. |
Limit Field Content | Whether to limit the content of this field. |
Limit | Enter the number of characters or words to limit this field by. |
A field for users to enter the name. Can be used as a single <input type="text">
input, or split into several sub-fields:
Setting | Description |
---|---|
Use Multiple Name Fields | Whether this field should use multiple fields for users to enter their details. |
A field to enter a validated number. This is a <input type="number">
field.
Setting | Description |
---|---|
Placeholder | The text that will be shown if the field doesn’t have a value. |
Default Value | Entering a default value will place the value in the field when it loads. |
Limit Numbers | Whether to limit the numbers for this field. |
Decimal Points | Set the number of decimal points to format the field value. |
A field to enter a password. This is a <input type="password">
field. This stores its content as a hashed password, most commonly used for a user registration form.
A field to enter a phone number. This is a <input type="tel">
field.
Setting | Description |
---|---|
Show Country Code Dropdown | Whether to show an additional dropdown for selecting the country code. |
A field for users to select products from.
Setting | Description |
---|---|
Display Type | What sort of field to show on the front-end for users. |
Placeholder | The option shown initially, when no option is selected. |
Sources | Which sources do you want to select products from? |
Limit | Limit the number of selectable products. |
A field for radio button groups, for the user to pick a single option from.
Setting | Description |
---|---|
Options | Define the available options for users to select from. |
Layout | Select which layout to use for these fields. |
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.
Setting | Description |
---|---|
Add Label | The label for the button that adds another instance. |
Minimum instances | The minimum required number of instances of this repeater's fields that must be completed. |
Maximum instances | The maximum required number of instances of this repeater's fields that must be completed. |
A field to allow a dynamic recipient to be set for the submission, and used in email notifications. Any email addresses defined by this field are protected, preventing them from being scraped by bots or other parties.
Setting | Description |
---|---|
Display Type | What sort of field to show on the front-end for users. |
A UI element to split field content with a <hr>
element.
Setting | Description |
---|---|
Border | Add a border to this section. |
Border Width | Set the border width (in pixels). |
Border Color | Set the border color. |
A field for the user to sign with their mouse or finger, saving as an image.
Setting | Description |
---|---|
Background Color | Set the background color. |
Pen Color | Set the pen color. |
Pen Weight | Set the line thickness (weight) for the pen. |
A field for the user to enter text. This is a <input type="text">
field.
Setting | Description |
---|---|
Placeholder | The text that will be shown if the field doesn’t have a value. |
Default Value | Entering a default value will place the value in the field when it loads. |
Limit Field Content | Whether to limit the content of this field. |
Limit | Enter the number of characters or words to limit this field by. |
A field that shows a summary of all submission values to the user. Commonly used on the last page of a multi-page form.
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.
Setting | Description |
---|---|
Table Columns | Define the columns your table should have. |
Default Values | Define the default values for the field. |
Add Row Label | The label for the button that adds another row. |
Static | Whether this field should disallow adding more rows, showing only the default rows. |
Minimum instances | The minimum required number of rows in this table that must be completed. |
Maximum instances | The maximum required number of rows in this table that must be completed. |
A field for users to select or create tag elements.
Setting | Description |
---|---|
Display Type | What sort of field to show on the front-end for users. |
Placeholder | The option shown initially, when no option is selected. |
Source | Which source do you want to select tags from? |
A field for users to select users from.
Setting | Description |
---|---|
Display Type | What sort of field to show on the front-end for users. |
Placeholder | The option shown initially, when no option is selected. |
Sources | Which sources do you want to select users from? |
Limit | Limit the number of selectable users. |
A field for users to select variants from.
Setting | Description |
---|---|
Display Type | What sort of field to show on the front-end for users. |
Placeholder | The option shown initially, when no option is selected. |
Source | Which source do you want to select variants from? |
Limit | Limit the number of selectable variants. |
For Dropdown, Checkboxes and Radio Buttons, Formie provides a collection of preset options for common scenarios for you to pick from. This might be useful to quickly populate an entire Dropdown with a list of countries, states, languages, currencies and lots more.
You can also select what content to use for the Label and Value of each option. For instance, you might like to label the option as Australia, but have the value as the abbreviated "AU".
The below is a list of options Formie provides by default.
You can also register your own predefined options