Use Formidable's field options and icons to customize your forms and make form building easier than ever. This article will help you learn about the field options and field icons that can make your work easier.
Formidable's field action icons allow you to duplicate, delete, and move fields. The default text icons 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.
- Duplicate field: duplicate a field and its options (the duplicated field is added to the bottom of the form).
- Delete field: delete a field.
- Move field: re-order fields within your form.
Default text icons
The default text icons appear to the right of a field input box when you add default text in the form builder page. These icons can be used to set placeholders and control field validation.
- Prevents the default value from passing validation. If this field is marked required, the user must change the default field value prior to submitting the form.
- Allows the default value to pass validation, even when marked as required.
- Clears the default text when a user begins typing in the field. This turns the default value into placeholder text.
- Does not clear the default text when a user begins typing in the field.
Displays the current field type and allows you to switch the field to a different field type.
Set a field to required so users must fill in the field before they can submit the form. 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 new validation message box labeled 'Required' appears. If a user leaves a required field blank, the text in this 'Validation' → 'Required' box will be used to alert users that the field cannot be blank.
A field key can be used to reference a specific field. By default, the key will be a random combination of letters and numbers. You can change the key if you would like, but it must be unique. If it is not unique, Formidable will add 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'.
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.
Set the label position of a field to default, top, left, right, inline, none, or hidden. The default label position is defined in your Formidable 'Styles' → 'Field Labels' settings.
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.
Set the width of your field and the maximum number of characters that can be entered. In a Dropdown field, you can select 'automatic width', which sets the field size to the width of your longest option. You can change the default field size in your Formidable 'Styles' → 'Field Labels' settings.
Click this button to add a new option to checkboxes, dropdowns, and radio button fields.
Bulk Edit Options
Checkboxes, dropdowns, and radio buttons have a Bulk Edit option which allows you to add, edit, or remove a lot of options quickly.
You can use this to easily add a large number of choices to your field by typing them into the box that appears when you select 'Bulk Edit Options'. You can also use this option to populate your field choices with a ready-made list of Countries, U.S. States, U.S. State abbreviations, age ranges, levels of satisfaction, importance, or agreement.
Prevents submission of a duplicate field value.
When you select this option, an error message will appear when the user hits 'Submit' if there has already been a submission with the same field value. You can customize this error message in the 'Validation' → 'Unique' box.
Prevents user from editing a field value on the front-end of your site.
Determine who can see a field. If you select a particular user role, all user roles above that option will be able to see the field as well. For example, if you select Contributor, all user types from Administrator to Contributor will be able to see the field. The only exception is logged-out users. If you select this user type, only logged-out users will be able to see the field.
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.
Dynamic Default Value
Use this option when you would like a field to automatically populate. You can put a default value or shortcode in a field's Dynamic Default Value box:
You can also use dynamic default values for other fields that do not have this field option. For example, if you have a date field, you can make it populate automatically with the current date by putting [date] directly into the field.
You can perform both numerical and text calculations with values entered in your form.
Choose how many decimal places you would like to show. If you choose 0, then there will be no decimals and it will round to the nearest whole number.
Customize the error messages for each field in this section. When 'Required' and/or 'Unique' are selected then the 'Required' and/or 'Unique' validation messages can be customized here.
If you would like to customize the default validation messages, go to 'Formidable' → 'Global Settings' → 'Default Messages'.
Most fields have additional options that can add to the functionality of your form. Check out the options below to learn more about what you can build with Formidable Forms.
Checkboxes, Radio Buttons, and Dropdown
- Add Other: Let the user input a different option than what is in the field options. Click the 'Add Other' box to add this option.
- Use separate values: Check this box if you would like to store an entry as a value distinct from the selected value. For example, if your user selects 'black t-shirt', you can store the value as 'black t-shirt $25.00'.
Each saved value must be unique. If you would like to show the saved value in an email, custom display, post, etc. use [125 show="value"]. Replace 125 with your field ID. You may use separate values for checkboxes, dropdowns, and radio buttons.
Checkboxes and Radio Buttons
- Alignment: By default, alignment is set to 'Multiple Rows' for checkboxes and radio buttons. If you would like all the options on one line, change Alignment to 'Single Row'.
- Multiple select: Check 'enable multi-select' to allow users to select multiple options from a dropdown. The user needs to hold down command or control to select more than one option. Check 'enable autocomplete' if you would like your dropdown to look like this. Autocomplete allows the user to begin typing what they are looking for in order to find it more easily. If you select both 'enable multi-select' and 'enable autocomplete', the user does not have to hold down command or control to select multiple options.
- Choose to make the section heading either 'Collapsible' or 'Repeatable'.
- Repeat Layout: Choose to have a repeatable section display as 'Default', 'Inline', or 'Grid'.
This field will always be the last field in a Repeatable Section.
- Repeat Links: Choose to show an icon, text, or both. Change the icon by going to Custom Forms 'Styles' → 'Section Fields' → 'Repeatable'.
- Add New Label: Choose the text that will be seen in the 'Add' button.
- Remove Label: Choose the text that will be seen in the 'Remove' button.
- Number range: This option is for browsers that support the HTML 5 number field (i.e. Chrome). Select where you want the number range to start and end.
- Format: Determine the number format that will be accepted in this field. If you want your users to type a phone number in format 99-9999-999, type this into the format option. You can also use this format option to customize your phone number validation. Enter a regular expression beginning with ^ in the 'Format' box. If you enter a set format, an input mask will also be applied automatically so your users know what format is required.
- Calendar localization: Choose which language you would like your calendar to display.
- Year range: Pick a start and end year for your calendar.
- Clock settings: Choose between a 12 and 24 hour clock and set the start and end time for your clock.
- Range: Set the range for your scale, which can go up to twenty.
- Stars: Display options as stars instead of circles.
- Import Options From: Data can be imported from any other form or a category/taxonomy.
- Entries: You may limit the entries for this particular field to those values submitted by the current user filling out the form.
- Display as: You can choose how to display the Dynamic field by going to 'Display as' and choosing 'dropdown', 'radio buttons', 'checkboxes', or 'list'.
- Insert form: Select a form to embed inside of the current form.