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 dropdown field Cheat sheet

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

Field Type – Dropdown
This dropdown field requires a value. If no value provided, there will be a validation error message (customizable). The default “required field indicator” is * (customizable).
This is a read-only dropdown. User can’t select any options. However, an option can be set indirectly using “Default Value” in field settings or programmatically.
Any of the options can be selected as the default option
When there is no default option selected, dropdown auto-selects the first option by default. Usually, the first option is an empty option, so we don’t really see it. But if the first option is a non-empty option, we can see it in action.
Placeholder is used to add message/instruction to a dropdown. When the first option is an empty option, placeholder text replaces its label. However, its value is still empty. That means, when the user saves the form without making a selection, the dropdown value will be stored as empty. Since placeholder value is empty, it will fail “required” validation.
When the first option is not an empty option, placeholder text is added as the new first option pushing existing options below. This field looks exactly the same as the previous one but the difference is previous dropdown has 4 options “” (empty), “Apple”, “Orange” and “Banana” while this dropdown has only 3 options “Apple”, “Orange” and “Banana”. The first option was added by placeholder text.
Label position “Placeholder inside the field” is another way of adding placeholder where field label becomes the placeholder. It also replaces the empty option label.
When “Automatic width” enabled, dropdown size is automatically adjusted to the size of its option labels.
Autocompletes is useful when there is a large number of options in a dropdown field where searching for an option is faster than scrolling the list.
The “Other” option allows the users to provide an option which is not listed in a dropdown. Upon selecting the “Other” option, a text field shows up where the user can type the new option.
The “Other” option can be the default option. The value set in “Default Value” settings will become the default value of the “Other” option
The multi-select dropdown allows the user to select more than one options.
In this dropdown, “Apple” and “Banana” are selected as default options.