How To Customize the Modern Dropdown Field

Introduction

Would you like to customize the Modern Dropdown field in WPForms? When using this field, you allow your users to type into a search box and display results based on the characters entered and with a small PHP snippet, you can control the number of results that display as keys are entered. In this tutorial, we’ll walk you through each step to customize the number of results that display.

Creating your form

First, you’ll need to create your form and add your fields with at least one Dropdown form field included in the form.

If you need any help creating your form, please review this documentation.

Once you’ve added your Dropdown field, click the Advanced tab and select Modern for the Style of the dropdown.

Adding the snippet

Now it’s time to add the code snippet to customize the Modern Dropdown field.

If you need any help adding snippets to your site, please see this tutorial.

/**
 * Customize modern dropdown search results
 *
 * @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
 */

function wpf_dev_modern_dropdown_search_results( $config, $forms ) {
	
	// Change 519 to an ID of your actual form or remove this condition to apply to all forms.
	if ( ! array_key_exists( 3241, $forms ) ) {
        return $config;
	}
	
	// Change 6 to a large number to show all the matching results for every search (might impact performance).
	$config[ 'searchResultLimit' ] = 6;
	
	return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_search_results', 10, 2 );

Remember to change the 519 to match your own form ID.

If you’re not sure how to find your form ID, please visit this tutorial.

Once you’ve added the snippet and updated the form ID, the last step is to set the searchResultLimit to the number you want to show as your users type into the search box. In our example, we only want to show the 6 top results.

And that’s all you need! Would you also like to change the text that displays when no results are found? Take a look at our tutorial on How to Change the No Results Found Text in the Modern Dropdown Field.

Related

Filter Reference: wpforms_field_select_choicesjs_config

FAQ

Q: Can I limit the dropdown to only select 2 items?

A: Absolutely! First, you’ll have to edit the Modern Dropdown field and on the Advanced tab and toggle to option to enable Multiple Options Selection.

Once you’ve enabled this option, you can add this snippet to your site.

/**
 * Customize modern dropdown search results
 *
 * @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
 */

function wpf_dev_modern_dropdown_select_limit( $config, $forms ) {
     
    // Change 519 to an ID of your actual form or remove this condition to apply to all forms.
    if ( ! array_key_exists( 519, $forms ) ) {
        return $config;
    }
     
    // Change 2 to a large number to show all the matching results for every search (might impact performance).
    $config[ 'maxItemCount' ] = 2;
     
    return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_select_limit', 10, 2 );

Q: How can I make my search return more of an exact match?

A: You can change the threshold value to be more specific with your search. Just add this snippet to your site.

/**
 * Return more specific results
 *
 * @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
 */

function wpf_dev_modern_dropdown_select_search( $config, $forms ) {
     
    // Providing more specific search results 
    // This will be added to all WPForms Modern Dropdown field for the search bar
    $config[ 'fuseOptions' ] = array(
		'threshold' =>  0.1
	);
      
    return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_select_search', 10, 2 );