Gravity Forms Create Optgroups to Separate Select Options


About The Author
Cabe Nolan is the founder of WP Cover where he shares his insight into WordPress, development, & entrepreneurship. Outside of WPCover, Cabe continues to run a successful WordPress development firm, Bold City Design as well as a couple high profile websites, Two Way Resume, Dock Skipper, and a successful outdoors brand, DolfinPack.







Gravity Forms Create Optgroups to Separate Select Options

Gravity Forms is another plugin that I leverage on the majority of sites I develop.  It’s well developed, well maintained, and has all the necessary features you would expect from a form builder.  While I was building a Gravity Form the other day, I had the need to create Optgroups within the default Drop Down field.  After doing a bit of searching, I stumbled across this great filter on Github.

/**
 * Filter Gravity Forms select field display to wrap optgroups where defined
 * USE:
 * set the value of the select option to `optgroup` within the form editor. The 
 * filter will then automagically wrap the options following until the start of 
 * the next option group
 */

add_filter( 'gform_field_content', 'filter_gf_select_optgroup', 10, 2 );
function filter_gf_select_optgroup( $input, $field ) {
    if ( $field->type == 'select' ) {
        $opt_placeholder_regex = strpos($input,'gf_placeholder') === false ? '' : "<\s*?option.*?class='gf_placeholder'>[^<>]+<\/option\b[^>]*>";
        $opt_regex = "/<\s*?select\b[^>]*>" . $opt_placeholder_regex . "(.*?)<\/select\b[^>]*>/i";
        $opt_group_regex = "/<\s*?option\s*?value='optgroup\b[^>]*>([^<>]+)<\/option\b[^>]*>/i";

        preg_match($opt_regex, $input, $opt_values);
        $split_options = preg_split($opt_group_regex, $opt_values[1]);
        $optgroup_found = count($split_options) > 1;

        // sometimes first item in the split is blank
        if( strlen($split_options[0]) < 1 ){
            unset($split_options[0]);
            $split_options = array_values( $split_options );
        }

        if( $optgroup_found ){
            $fixed_options = '';
            preg_match_all($opt_group_regex, $opt_values[1], $opt_group_match);
            if( count($opt_group_match) > 1 ){
                foreach( $split_options as $index => $option ){
                    $fixed_options .= "<optgroup label='" . $opt_group_match[1][$index] . "'>" . $option . '</optgroup>';
                }
            }
            $input = str_replace($opt_values[1], $fixed_options, $input);
        }
    }

    return $input;
}

 

How do you use it? First, copy and paste the above code into your active themes function.php file.

From there, you will want to create a Drop Down field within your Gravity Form and make sure the checkbox that states ‘Show Values’ is ticked. Next, add the value ‘optgroup’ wherever you want to create a new options group.

The result is a beautiful and more importantly, organized select drop down:

 


Share Your Thoughts

Leave a Reply

Your email address will not be published. Required fields are marked *


Related Stuff You Might Like







WordPress News, Tips, & Code Snippets

Join the WP Cover mailing list and get wordpress news, tips, code snippets, security warnings, and more delivered right to your inbox.  We won't flood your inbox, newsletters typically go out every 1-2 weeks unless it involves an important security release.

You have Successfully Subscribed!