Select Page

Display multi-select option values in Formidable

In Formidable Forms, dropdown and checkbox fields allow selecting multiple options. If you’d like to display selected values in a view, you’d normally use [x] shortcode just like any other field where x is your field id or key. This will by default display values separated by a comma.
e.g. Apple, Orange, Cherry

A different separator can be specified using the sep attribute. For example, [x sep=" | "] will display Apple | Orange | Cherry

This opens up many possibilities. For example, options can be displayed as a list using
<ol><li>[x sep='</li><li>']</li></ol>

  1. Apple
  2. Orange
  3. Cherry

However, this approach has its limitations because we can only control what is in between two options using sep attribute. What if we want to format option values individually without any limitations. This is the question Phil asked in the Formidable’s community Slack group.

With a little custom code, we are going to extend the functionality to the next level.
The new pattern attribute can be used to specify a pattern to display an option value. The pattern can be any text where all occurrences of {} will be replaced by the option value.
e.g. <ol>[x pattern='<li>{}</li>']</ol> will display the options as a list (same as before but more easy to write and understand).

  1. Apple
  2. Orange
  3. Cherry

Not only that, it can now do what is not possible before. For example, the following shortcode displays the option values as a list with a link to Google image search. Notice that the pattern uses {} twice, one for search query inside the link URL and another one as the link text.
<ol>[x pattern='<li><a href="{}">{}</a></li>']</ol>

  1. Apple
  2. Orange
  3. Cherry

When the pattern attribute is used, the default comma separator is ignored. However, if a separator is required, it can be specified using the same sep attribute.
<ol>[145 pattern='<li><a href="{}">{}</a></li>' sep='<li>---------</li>']</ol> will add a separator item between options on the list.

  1. Apple
  2. ———
  3. Orange
  4. ———
  5. Cherry

Add the following code to your functions.php or use Code Snippet plugin to enable this functionality.

add_filter('frmpro_fields_replace_shortcodes', 'frm_city_display_option_values_with_pattern', 10, 4);
function frm_city_display_option_values_with_pattern( $replace_with, $tag, $atts, $field ) {
    if ( isset ( $atts['pattern'] ) ) {
			$pattern = $atts['pattern'];
				foreach($replace_with as $key => $value) {
					$replace_with[$key] = str_replace('{}', $value, $pattern);
				$replace_with = implode($atts['sep'], $replace_with);
			} else {
				$replace_with = str_replace('{}', $replace_with, $pattern);
    return $replace_with;

Formidable checkbox field Cheat sheet

Learn all about Formidable Forms checkbox field in this Cheat sheet.

Field Type – Checkbox
Simple Checkboxes
Required Checkboxes *
This checkbox requires a value. If no value provided, there will be a validation error message (customizable). The default “required field indicator” is * (customizable).
Read-only Checkboxes
This is a read-only checkbox. User can’t choose any options here. However, options can be set indirectly using “Default Value” in field settings or programmatically.
Checkboxes with “Other” option
The “Other” option allows the users to provide an option which is not listed in a checkbox. Upon selecting the “Other” option, a text field shows up where the user can type the new option.
Checkboxes with limited selection
This checkbox allows a maximum of 2 options
Checkboxes with two columns layout
Formidable supports One column (default), Two columns, Three columns, Four columns, and Inline Options.
Checkboxes with “Inline Options” layout
Checkboxes with default options
Checkboxes with default “Other” option
Note: When “Other” option is set as the default value, another option can’t be selected
Checkboxes with scroll box
The scroll box is useful when there are many options in the checkbox. Use “frm_scroll_box” class in the “CSS Layout Classes” settings to enable scroll box.
This is checkbox field label *
This is used to request the user to confirm something before submitting the form. E.g. Accepting terms and conditions during registration.
Enabling “Use separate values” is recommended since the single option label could be large and styled. A separate value like “yes” will avoid storing the option label in the entry.
Checkbox field with inline field label and single no label option and separate value
This is another way of implementing confirmation checkbox except checkbox comes after the text. Since the option label is empty, the separate value must be set, otherwise, it will be auto-selected.