Use Formidable's field options and icons to customize your forms and make form building easier. This article covers the field options and field icons that can make your work easier.
Upgrade your WordPress site with powerful, flexible forms.
Field icons
Formidable's field action icons allow you to duplicate, delete, and move fields. The default value options give you control over the default values in your fields.
Field action icons
These icons are found in the upper-right corner of each field on your form builder page and can be used to duplicate, delete, or move fields.
- Move field: Re-order fields within your form.
- More options: Click this icon to show more options.
- Delete: Delete a field. A message asks you to confirm, so click Confirm.
- Duplicate: Duplicate a field and its options.
- Field Settings: Open the field settings on the left sidebar.
Layout field action icons
Fields can be multi-selected using the Command (Mac), Control (Windows), and Shift keys. These selected field groups can then be merged into rows or deleted in batches.
- Shift key: Select one field and then select another field farther apart, and all of the fields in between will also multi-select.
- Command key (Mac) or Control key (Windows): Individually select multiple fields.
Sections can be part of a multiselection too. Hold the Shift, Command, or Control key and click the section's heading to add the whole section. Fields inside a section can still be selected one by one.
The layout field action icons allow you to select a row or custom layout, multiselect delete, and merge and break fields into rows.
- Delete Group: Delete a group of fields. Click Confirm in the message that opens.
- Duplicate Group: Duplicate a group of fields and its options.
- Multiselect Delete: Bulk deletes selected fields. When you multiselect fields, a trash icon appears next to Merge into row in the bottom right corner. Click it. Then click Confirm in the message that opens.
- Merge into row (1): Merge six or fewer selected fields into a row. Note: This is not available for Page breaks and hidden fields as they don't support layout classes.
- Row layout (2): Select from the preset row layouts.
- Custom Layout (3): Create your row layout by entering the number of columns for each field (based on a 12-column grid).
- Set Row Layout: Fields can be dragged beside each other, and grid layouts will be automatically applied. Use this icon to assign layouts to a row of fields at once.
- Break into rows: Split the merged fields back into separate rows. Hover over the row, click its Set Row Layout icon (1), and choose Break into rows (2).
Click Update to save the form after you change a layout. Layout changes are not kept until the form is saved.
From Idea to Reality in Minutes. Build Powerful Forms, Dashboards, Apps and More.
Formidable Forms makes advanced site building simple. Launch forms, directories, dashboards, and custom WordPress apps faster than ever before.
Free field options
Click a field in the form builder to open its settings on the Field Options tab. Field Label, Required, and CSS Layout Classes show at the top. Most other options are in the collapsed Advanced section: click Advanced to expand it. Default Value, Placeholder Text, Field Description, Field Size, Label Position, Field Key, and Field Type are there. So are the Visibility, Calculations, and Before Input options.
Field Label
Add a name to the field. By default, it uses the field type label. You can change it to any other text or character.
The field label can be used to display values from other fields. When the value is in the same form, there must be a page break between each field. The value on the field label has to be on a page after the field whose content you want to show. Display the value by inserting the field ID on the field label.
This value will be included when the [default-message] shortcode is used to send email notifications.
Required
Set a field to required so users must fill in the field before they can submit the form. It applies to all boxes in a field even if the field contains multiple boxes, such as an address field. By default, a required field is indicated with an asterisk (*). This can be changed to any other symbol or text. When the Required box is checked, a box labeled Required is added to the Validation Messages section. Click Validation Messages to expand it. If a user leaves a required field blank, the text in this Validation Messages → Required box is used to alert users that the field cannot be blank.
CSS layout classes
Add CSS classes to a field. Use your own class or a Formidable layout class to customize your form layout. You can add multiple classes by inserting a space between each class.
Default Value
Use this option when you want a field to automatically populate. You can put a default value or shortcode in a field's Default Value box:
Placeholder text
Use placeholder text to guide users through the process of submitting their information and ensure that every field is filled out correctly. When users start typing in a field, the placeholder text disappears and is not included when the form is submitted.
Field Description
A field description can be used to include additional information that explains what is required from the user. By default, it appears directly below the field input.
Field Size
Set the width of your field and the maximum number of characters that can be entered. A Dropdown field has no Field Size. Instead, check Automatic width in its Dropdown Options section to make the dropdown as wide as its longest option. To change the default field width for a style, go to Formidable → Styles. Click Show advanced settings at the bottom of Quick Settings, and open Field Settings. The default is the Width setting there.
Field Type
Displays the current field type and allows you to switch the field to a different field type.
Field Key
A field key can be used to reference a specific field. By default, the key is a random combination of letters and numbers. You can change the key, but it must be unique. If it is not unique, Formidable adds a number to the end of it. The key can be used interchangeably with the field ID. Note: a field key may not work correctly if it starts with 'if'.
Label Position
Set the label position of a field to default, top, left, right, inline, none, hidden, or placeholder inside the field. Section headings also include an option to center the heading, but they don't offer the left, right, inline, or placeholder positions. The default label position is the Position setting in Formidable → Styles → Field Labels. Click Show advanced settings at the bottom of Quick Settings to see the Field Labels section.
The inline option puts the label on the same line as your field as long as the field is not too wide. If you set the label position to none, the label will not be displayed. If you set the label position to hidden, the label will not be displayed, but it will leave a space.
Floating labels
The option Placeholder inside the field uses animated floating labels that are similar to Google's Material Design. It displays the label as placeholder text inside the field until text is entered in the field, and then the label moves to the top.
To only have a placeholder, without the label moving above the field when a user types, use these instructions instead.
Pro field options
Unique
Prevents submission of a duplicate field value.
When you select this option, an error message appears when the user clicks Submit if there has already been a submission with the same field value. You can customize this error message in the Validation Messages → Unique box.
If using a Date field, previously submitted dates are greyed out so they can't be selected again. For example, after entries are submitted for the 21st, 22nd, and 23rd, those days are greyed out.
Read Only
Prevents users from editing a field value on the front end of your site.
Visibility
Determine who can see a field. Select each option that should see it:
- Everyone: all visitors. This is the default.
- A user role, such as Editor: only users with that role. Select several roles to show the field to each of them. Higher roles aren't included: if you select only Contributor, Administrators and Editors don't see the field.
- Logged-in Users: anyone who is logged in.
- Logged-out Users: only visitors who aren't logged in.
The list shows your site's user roles, so it can include others, such as Pending from the User Registration add-on.
Visibility controls who sees a field on the form. It isn't a way to keep a value private or locked.
For users who can't see the field, the form includes it as a hidden field with its value. That's the default value on a new entry, or the saved value when the user edits an entry.
The value shows in the page source. When the form is submitted, Formidable saves the value sent for that field.
To keep a value private or unchanged for these users:
- Don't put information they shouldn't see in the field's default value.
- Use a Virtual field for a value the form sets for every entry. It isn't part of the form on the page. Formidable ignores any value sent for it.
- For a value an administrator sets later, check or set it when the entry is saved, with the frm_validate_field_entry, frm_pre_create_entry, or frm_pre_update_entry hook.
Calculations
Perform both numerical and text calculations with values entered in your form. To add one, turn on Calculate Value under Default Value in the Advanced section.
To choose how many decimal places show, set the field's Format to Custom in a Number field, or Number in a Text field. Then enter the number in Decimals. The Currency format also has a Decimals setting. If you choose 0, then there will be no decimals and it will round to the nearest whole number. See Field Calculations for more information about calculations.
Validation
Customize the error messages for each field in this section.
- Required: Customize the error message when a user submits an entry but must still fill out the required field.
- Unique: Customize the error message when a user submits an entry with the same field value.
- Invalid Format: Customize the error message when a user submits an entry with an invalid format. Email, Website/URL, Phone, and Number fields start with their own message that tells the user what to enter, such as "Enter a valid email address, like name@example.com".
To customize the default validation messages, go to Formidable → Global Settings → Message Defaults.
Conditional Logic
Conditionally show or hide fields in your form based on values entered in previous fields.
Use Section Headings to conditionally show or hide large sections of your form. See the Conditional Logic page for more information.
Before & After Input
This setting allows you to prepend or append your fields with a symbol or text. It is especially helpful when dealing with values that you want formatted as a currency.
This setting can be found on field types with a text field or dropdown.
When you view your form, your modified field will look something like this:
The boxes before and after the input use your style's read-only field background, and their text uses the form description color. To change the background:
- Open your form in the form builder and click the Style tab.
- Click Edit style at the bottom of the form preview. This opens the style your form uses.
- Click Show advanced settings at the bottom of Quick Settings.
- Open the Field Colors section (1) and click the Read Only tab (2).
- Change the Background color (3). This color is also the background of read-only fields.
- Click Update to save your changes.
To change the text color in the boxes, change the Color in the Form Description section.
Prepend unicode icons
In addition to prepending keyboard characters, you can also prepend unicode characters. Here's an example of what you can create by appending unicode characters:
To add a unicode character to a field:
- Open a unicode character chart that shows the text version of each character. For example, the Emoji section of the Dingbats Unicode block on Wikipedia has an Emoji variation sequences table. Copy the character you want from the base+VS15 (text) row.
- Go to edit your form.
- Click the field you want to modify. Its settings open on the Field Options tab. Click Advanced to expand that section.
- Paste the unicode character you chose in the Before Input setting, and click Update to save the form.
- Preview your form. If the unicode character you chose appears as a box, that character is not compatible with your browser. Best practice is to select unicode characters that are cross-browser compatible (the simpler the better). A text symbol often looks smaller than the letters around it, which is normal. If the character shows as a colored emoji, go back to step 1 and copy the base+VS15 (text) version of the character.
Field-specific options
Most fields have additional options that can add to the functionality of your form. Click on a field type below to learn about its field-specific options.
