Would you like to customize the text that appears when no results are found in a Modern Dropdown field? With a simple code snippet, you can modify the default No results found message and make it translatable for multi-language sites. This feature is particularly useful for improving user experience by providing more contextual feedback when search results are empty.
By default, visitors will see the No results found message when their search yields no results in your dropdown.
In this tutorial, we’ll provide the PHP code you need to change this text and guide you through each step.
Setting Up Your Form
First, we’re going to create a new form and add our form fields which will include at least one Dropdown field.
Once you’ve added the Dropdown form field to your form, click on the Advanced tab and select Modern from the Style dropdown.
Customizing the No Results Text
To change the default message, add this code to your site. If you’re not sure how to add custom code, please see our guide on how to add code snippets.
This snippet will only be applied to the form ID 1369 and will change the default noResultsText message and replace it with what we’ve added.
If you need help finding your form ID, check out our guide on how to find form and field IDs.
Customizing Both No Results and Selection Text
You can also customize the “Press to select” hover text at the same time:
/**
* Change both No Results Found and Press to select text
*
* @link https://wpforms.com/developers/how-to-change-the-no-results-found-text-in-the-modern-dropdown/
*/
function wpf_dev_change_modern_dropdown_noresults_text( $config, $forms ) {
// Change 1369 to an ID of your actual form
if ( array_key_exists( 1369, $forms ) ) {
$config[ 'noResultsText' ] = __( 'Apologies, your search term was not found', 'your-text-domain' );
$config[ 'itemSelectText' ] = __( 'Choose this option.', 'your-text-domain' );
}
return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_change_modern_dropdown_noresults_text', 10, 2 );
And that’s all you need! Now instead of seeing No Results Found, users will see your personalized message.
Next, would you like to show all of your completed form fields inside your confirmation message? Take a look at our tutorial on How to Show All Fields in Your Confirmation Message.