Comment modifier le texte "Aucun résultat trouvé" dans le champ déroulant moderne

Souhaitez-vous personnaliser le texte qui s'affiche lorsqu'aucun résultat n'est trouvé dans un champ de liste déroulante moderne ? Avec un simple extrait de code, vous pouvez modifier le message par défaut Aucun résultat trouvé et le rendre traduisible pour les sites multilingues. Cette fonctionnalité est particulièrement utile pour améliorer l'expérience utilisateur en fournissant un retour plus contextuel lorsque les résultats de recherche sont vides.

Par défaut, les visiteurs verront le message Aucun résultat trouvé lorsque leur recherche ne donnera aucun résultat dans votre liste déroulante.

Dans ce tutoriel, nous fournirons le code PHP dont vous avez besoin pour modifier ce texte et nous vous guiderons à travers chaque étape.

Configuration de votre formulaire

Tout d'abord, nous allons créer un nouveau formulaire et ajouter nos champs de formulaire, qui comprendront au moins un champ Liste déroulante.

Une fois que vous avez ajouté le champ de formulaire Liste déroulante à votre formulaire, cliquez sur l'onglet Avancé et sélectionnez Moderne dans la liste déroulante Style.

Personnalisation du texte « Aucun résultat trouvé »

Pour modifier le message par défaut, ajoutez ce code à votre site. Si vous n'êtes pas sûr de la manière d'ajouter du code personnalisé, veuillez consulter notre guide sur la façon d'ajouter des extraits de code.

Cet extrait ne sera appliqué qu'à l'ID de formulaire 1369 et modifiera le message par défaut noResultsText pour le remplacer par ce que nous avons ajouté.

Si vous avez besoin d'aide pour trouver l'ID de votre formulaire, consultez notre guide sur la façon de trouver les ID de formulaire et de champ.

Personnalisation du texte « Aucun résultat trouvé » et du texte de sélection

Vous pouvez également personnaliser le texte au survol « Appuyez pour sélectionner » en même temps :

/**
 * 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 );

Et c'est tout ce dont vous avez besoin ! Maintenant, au lieu de voir Aucun résultat trouvé, les utilisateurs verront votre message personnalisé.

Ensuite, souhaitez-vous afficher tous vos champs de formulaire complétés dans votre message de confirmation ? Jetez un œil à notre tutoriel sur Comment afficher tous les champs dans votre message de confirmation.

Filtre de référence

wpforms_field_select_choicesjs_config