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. Our form will contain just a few fields such as Name, Email, Dropdown and Paraagraph Text.

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

Create your form and add a Dropdown field to it

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

Set your dropdown style to modern

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-send-the-entry-id-through-webhooks
 */

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( 519, $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 six top results.

Now you can easily customize the modern dropdown search 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.

Filter Reference: wpforms_field_select_choicesjs_config