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>
- Apple
- Orange
- 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).
- Apple
- Orange
- 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="http://www.google.com/images?q={}">{}</a></li>']</ol>
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.
e.g.<ol>[145 pattern='<li><a href="http://www.google.com/images?q={}">{}</a></li>' sep='<li>---------</li>']</ol> will add a separator item between options on the list.
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'] ) ) {
if($replace_with){
$pattern = $atts['pattern'];
if(is_array($replace_with)){
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;
}
Thanks Sujeevan, this works perfectly.
We are using this code to set a different link on each option, that passes a parameter to a filtered view.
Very many thanks for sharing.
Awesome. Thanks, Phil for asking the question which made me write this blog post.
Thank you Sujeevan for writing such a helpful tutorial on this topic; which I’ve been searching for.
Is there a way for the options to be listed vertically without bulleted numbers (I don’t want anything there)?
Also, when I enter in any of these pattern short codes in Views, it reads correctly when I’m editing the View, but when I want to see the published view, it shows the coding. Do you know why this is and how to correct it?
Kind regards
Hi Margaret,
If you’d like to display without bullets points, you could make each point a paragraph with the following code
[x pattern='<p>{}</p>']
it is hard for me to see the issue without seeing it. If you could share the link about your page, I can have a look or alternatively contact me via the Contact form
Thank you Sujeevan for the code!
Thank you so much! That is exactly what I needed.
Is it possible to display all (!) checkbox options wheather tey are checked or not?
I have 4 checkbox options and the user checks for example the second and the fourth.
Form A:
[] Apple
[x] Orange
[] Cherry
[x]banana
In the view it should be displayed the same.
View A:
[] Apple
[x] Orange
[] Cherry
[x]banana
Thanks in advance!