X

Comment créer un formulaire de recherche personnalisé dans WordPress (rapide et simple)

comment créer un formulaire de recherche personnalisé dans WordPress

Vous voulez créer facilement un formulaire de recherche personnalisé dans WordPress sans aucun codage ?

Un formulaire de recherche personnalisé permet aux visiteurs de rechercher et de filtrer facilement le contenu de votre site en quelques clics.

Lorsque les utilisateurs trouvent rapidement ce qu'ils cherchent, ils sont plus susceptibles de rester plus longtemps sur votre site. Ils sont également plus susceptibles d'agir pour acheter un produit, lire votre blog, s'inscrire à une newsletter, et plus encore.

Dans cet article, nous vous montrerons comment créer facilement un formulaire de recherche personnalisé dans WordPress pour améliorer l'expérience utilisateur et augmenter les conversions.

Avant cela, voyons si vous avez vraiment besoin de créer un formulaire de recherche personnalisé pour votre site.

Pourquoi créer un formulaire de recherche personnalisé ?

Un formulaire de recherche personnalisé est idéal pour les sites qui ont beaucoup de contenu, de produits, de documentation et de FAQ. C'est une fonctionnalité indispensable sur les boutiques e-commerce, les annuaires d'entreprises en ligne, les sites d'écoles/universités et les sites similaires.

L'option de recherche aidera les utilisateurs à trouver ce dont ils ont besoin sans passer des minutes, voire des heures, à le chercher.

Voici donc pourquoi vous devriez créer un formulaire de recherche personnalisé pour votre site WordPress :

  • Aide les utilisateurs à naviguer dans votre contenu
  • Gain de temps en trouvant les choses plus rapidement
  • Augmente les conversions et les ventes
  • Optimise votre site pour les utilisateurs mobiles
  • Réduit le taux de rebond

Maintenant, nous allons vous montrer comment créer un formulaire de recherche personnalisé dans WordPress à l'aide d'un plugin de création de formulaires.

Comment créer un formulaire de recherche personnalisé dans WordPress

Il existe 3 méthodes que vous pouvez utiliser :

Nous allons vous présenter les 3.

1. Ajouter du code à votre site WordPress

La première méthode que vous pouvez utiliser est l'option de recherche par défaut proposée par WordPress.org. Vous pouvez activer une recherche WordPress de base qui vous permet de rechercher des pages et des articles sur votre site.

Cette méthode est cependant un peu compliquée. Elle implique le codage et la modification de fichiers centraux de WordPress comme le fichier functions.php qui sont très sensibles. Vous devez être familier avec javascript, PHP et d'autres langages de codage pour que cela fonctionne. Une seule erreur et vous pourriez casser votre site web.

Vous devrez utiliser la fonction « get_search_form() » pour afficher le formulaire de recherche sur votre site. Cela vous aidera à obtenir le fichier searchform.php dans votre thème WordPress. S'il ne peut pas être trouvé, alors l'option de recherche par défaut du cœur de WordPress sera utilisée.

Mais, pour personnaliser la boîte de recherche WordPress, vous devrez ajouter plus de code au fichier.

Nous ne recommandons pas cette méthode, surtout si vous n'êtes pas à l'aise avec le codage. Il est plutôt préférable d'utiliser un plugin de recherche WordPress fiable pour activer la recherche sur le site. Et c'est exactement ce que nous allons faire ensuite.

Vous trouverez plusieurs plugins sur le marché qui vous permettent de personnaliser le formulaire de recherche WordPress. 

Assurez-vous de choisir un plugin WordPress qui vous permettra non seulement de créer une recherche personnalisée, mais aussi d'ajouter des filtres et d'afficher les bons résultats à vos visiteurs. 

Nous recommandons l'utilisation de SearchWP, le plugin de recherche n°1 pour WordPress qui vous permet de rechercher TOUT sur votre site. Vous pouvez également utiliser Formidable Forms pour créer un formulaire de recherche personnalisé. Ci-dessous, nous vous montrerons comment créer un formulaire de recherche personnalisé en utilisant ces 2 plugins.

Installer le plugin SearchWP (Recommandé)

searchwp

SearchWP est sans conteste le meilleur plugin de recherche personnalisée pour WordPress. Il est facile à utiliser, affiche des résultats précis et vous donne le contrôle de votre formulaire de recherche.

SearchWP est vraiment génial et possède des fonctionnalités premium incroyables, c'est donc un plugin premium. Vous pouvez vous inscrire à un forfait à partir de 99 $ par an. Et bien que vous ne soyez pas déçu, il y a une garantie de remboursement de 14 jours.

Cela vous permettra d'activer une recherche pour tout. Recherchez les détails de vos produits, le contenu des champs personnalisés, la sortie des shortcodes, le contenu des tables de base de données personnalisées, la recherche multisite inter-sites, et plus encore sur votre site.

Vous aurez accès à des fonctionnalités telles que :

  • Indexation des documents PDF et Office
  • Intégration automatique avec la recherche native de WP, sans codage !
  • Moteurs de recherche multiples
  • Racines de mots-clés
  • Support avancé des champs personnalisés
  • Intégration WooCommerce
  • Exclure ou attribuer des résultats
  • Statistiques et aperçus de recherche
  • Personnalisation facile de l'algorithme

Le plugin s'intègre également avec bbPress, WP Job Manager, Easy Digital Downloads, et plus encore. De plus, vous aurez accès à un support dédié et à une documentation détaillée.

Et tout ce que nous avons mentionné n'est que dans le forfait de base, donc le plugin vaut totalement son prix à seulement 8,25 $ par mois. Vous obtiendrez beaucoup plus de fonctionnalités dans les forfaits haut de gamme.

Une fois que vous aurez créé un compte, vous pourrez commencer avec le tutoriel étape par étape ci-dessous.

Étape 1 : Activation de SearchWP

Dans votre compte SearchWP, vous pouvez accéder à votre clé de licence, aux détails de votre compte et aux téléchargements. Vous devrez télécharger le fichier du plugin. Et vous voudrez également copier votre clé de licence car vous en aurez besoin dans un instant.

compte searchwp

Ensuite, rendez-vous sur votre panneau d'administration wp et naviguez vers Plugins » Ajouter un nouveau » Télécharger un plugin.

téléverser un plugin dans WordPress

Sélectionnez le fichier du plugin que vous avez téléchargé sur votre ordinateur et cliquez sur le bouton Installer maintenant.

Une fois que vous l'avez installé et activé, vous devez visiter la page Paramètres » SearchWP puis cliquer sur l'option de menu « Licence ».

ajouter une licence dans searchwp

Récupérez votre clé de licence depuis votre compte SearchWP et collez-la ici dans la boîte Licence.

Cliquez sur le bouton Activer et vous êtes prêt à configurer le moteur de recherche.

Étape 2 : Personnalisation du moteur de recherche

Dans l'onglet SearchWP de votre panneau wp-admin, sélectionnez l'option de menu « Moteurs ». Une fois à l'intérieur, cliquez sur le bouton « Ajouter nouveau » pour créer un nouveau moteur de recherche.

ajouter un nouveau moteur searchwp

Cela créera un nouveau moteur de recherche appelé « supplemental ». Pour changer le nom, vous devez cliquer sur le bouton « Sources et paramètres ».

moteur de recherche supplémentaire

Vous verrez maintenant une option pour choisir si vous souhaitez rechercher des articles, des pages, des fichiers multimédias, des commentaires et des utilisateurs. Les paramètres recommandés sont déjà ajoutés ici, vous pouvez donc les laisser tels quels.

Pour identifier le moteur de recherche plus tard, nommons-le « Personnalisé » sous le champ « Étiquette du moteur ».

modifier les paramètres du moteur supplémentaire

Ici, vous pouvez voir que l'option « Racines de mots » a été sélectionnée. Cela ignorera les terminaisons de mots lorsque vos utilisateurs effectueront une recherche afin que les résultats de recherche les plus pertinents soient affichés.

Lorsque vous êtes prêt, appuyez sur le bouton « Terminé » pour enregistrer vos modifications.

De retour sur la page du moteur, vous pouvez voir une section appelée « Pertinence des attributs applicables » sous chaque sous-titre. Cela vous permet de prioriser différents attributs de publication, ou d'inclure uniquement certaines catégories ou balises dans votre page de résultats de recherche.

Tout ce que vous avez à faire est d'utiliser les curseurs pour ajuster la « Pertinence des attributs ».

curseurs d'attributs dans searchwp

Cela aura un impact sur la façon dont les moteurs de recherche valorisent et classent le contenu de votre site. Ainsi, par exemple, si vous voulez que Google accorde plus d'attention au titre de la publication qu'au contenu, vous pouvez donner plus d'importance au titre ici.

Ensuite, SearchWP vous donne le contrôle sur l'inclusion ou l'exclusion de certains contenus des résultats de recherche. Pour cela, vous pouvez créer des règles.

Cela pourrait permettre aux clients de trouver rapidement des produits dans la même catégorie que celle qu'ils parcourent. Ou permettre aux visiteurs de rechercher du contenu sur le même sujet que celui qu'ils viennent de lire.

Pour définir des règles, il y a un bouton « Modifier les règles » dans chaque section.

Lorsque vous cliquez dessus, vous verrez une fenêtre contextuelle avec les paramètres des catégories, des balises, du format, de la date de publication et de l'ID de la publication.

SearchWP modifier les règles

Vous pouvez créer des règles comme vous le souhaitez ici pour contrôler le comportement de votre moteur de recherche.

Et une fois que vous avez terminé, assurez-vous de cliquer sur le bouton « Enregistrer les moteurs » en haut de la page pour créer votre moteur de recherche personnalisé.

Vous avez maintenant configuré votre moteur de recherche WordPress avec succès. Il est prêt à être ajouté à votre site Web.

Étape 3 : Ajout du formulaire de recherche avec un shortcode

Habituellement, l'ajout d'un moteur de recherche à votre site Web nécessite beaucoup de codage, mais SearchWP a réduit cela au minimum. Vous n'avez qu'à coller un shortcode pour intégrer votre moteur de recherche, et c'est si simple que c'est facile même si vous êtes débutant.

Visitez simplement l'extension SearchWP Shortcodes Extension, puis cliquez sur le bouton « Télécharger l'extension ».

Après cela, vous devez installer et activer l'extension sur votre site WordPress de la même manière que vous avez installé le plugin ci-dessus.

Une fois activé, vous pourrez ajouter un shortcode simple dans vos articles, pages et widgets.

Tout ce que vous avez à faire est d'éditer un article dans l'éditeur de blocs et d'ajouter un nouveau bloc appelé 'HTML personnalisé'.

À l'intérieur du bloc, vous pouvez copier et coller ce shortcode :

[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
   
<div class="search-results-wrapper">
 [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
   
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
   
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
</div>

Nous avons nommé notre moteur 'custom'. Si vous avez choisi un nom différent, vous devrez changer engine=“custom” pour le nom de votre propre moteur à quatre endroits dans cet extrait de code.

Dans ce code, le texte du bouton sera 'Custom Search'. Si vous souhaitez changer le texte du bouton de recherche pour quelque chose de plus créatif, vous pouvez le modifier dans la première ligne button_text=“Custom Search”.

Ce code ajoutera le moteur de recherche personnalisé à votre article WordPress. Il créera également une section pour afficher les résultats de recherche, affichera un message 'aucun résultat' si nécessaire, et ajoutera une pagination si les résultats s'étendent sur plusieurs pages.

Vous pouvez prévisualiser l'article et vous verrez le moteur de recherche apparaître. Vous verrez un champ de recherche ainsi que le bouton CTA dans votre article.

Ensuite, **publiez ou mettez à jour** et mettez en ligne le formulaire de recherche personnalisé. Si vous avez besoin d'aide, suivez notre guide simple sur comment ajouter un shortcode dans WordPress.

Vous pouvez tester votre formulaire personnalisé en saisissant quelques termes de recherche pour voir les résultats que l'outil renvoie.

Avec cela, vous avez appris comment ajouter des barres de recherche à votre site WordPress. SearchWP est un plugin de recherche avancé qui mérite d'explorer davantage ses fonctionnalités. Ensuite, nous vous montrerons comment améliorer la fonction de recherche de votre site.

Étape 4 : Configuration des paramètres avancés

Il y a 2 options avancées que nous aimerions couvrir pour améliorer votre formulaire de recherche WordPress personnalisé.

  • Ajout de la recherche Ajax en direct : Ceci ajoute automatiquement des résultats de recherche déroulants pendant que l'utilisateur tape. Cela aide l'utilisateur à trouver sa requête plus rapidement. SearchWP propose un plugin gratuit Live Ajax Lite Search plugin dans le répertoire WordPress pour cela.
  • Utilisation des paramètres avancés pour SearchWP : Sous l'onglet Paramètres » SearchWP de votre menu WordPress, il y a un onglet Avancé. Sur cette page, vous pouvez activer des paramètres qui faciliteront la recherche de ce que vos utilisateurs recherchent.
paramètres avancés de SearchWP

Cela vous donne un contrôle total sur le fonctionnement de votre moteur de recherche. Ensuite, nous vous montrerons comment personnaliser l'apparence de votre moteur de recherche.

Étape 5 : Mise en forme du formulaire de recherche et de la page de résultats

Si vous n’êtes pas satisfait de l’apparence de votre nouvelle barre de recherche, vous pouvez la modifier.

Ce que vous devez savoir, c’est que le thème de votre site contrôle l’apparence de votre page d’accueil, de votre en-tête, de votre barre latérale, de vos articles, de votre formulaire de recherche et de vos résultats de recherche. Les formats et les styles de votre thème WordPress sont stockés dans une feuille de style CSS.

Il vous suffit d’ajouter votre propre CSS personnalisé pour modifier l’apparence de votre barre de recherche et de votre page de résultats.

Si vous n’avez jamais fait cela auparavant, nous vous recommandons de faire une sauvegarde de votre site web. Il est important de pouvoir restaurer votre site au cas où les choses ne se passeraient pas comme prévu. Vous pouvez ensuite utiliser un site de staging (un clone de votre site web) pour essayer cela d’abord.

Vous trouverez ci-dessous un extrait de CSS personnalisé qui fonctionnera avec la plupart des thèmes WordPress. La première section modifie le style du formulaire de recherche par défaut et la seconde section personnalise les résultats de recherche.

Vous pouvez copier-coller le code suivant pour styliser votre fonction de recherche de site :


.searchform {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#ffffff;
border:1px solid #61c3c0;
padding:10px;
height:90px;
width:600px;
}
 
.search-results {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}

Vous souhaitez en savoir plus à ce sujet ? WPBeginner propose le meilleur guide : Comment ajouter facilement du CSS personnalisé à votre site WordPress.

C’est tout ! Vous avez créé un formulaire de recherche entièrement personnalisable en utilisant SearchWP.

Ensuite, nous vous montrerons une autre façon de créer un formulaire de recherche WordPress personnalisé.

Créer un formulaire de recherche personnalisé avec Formidable Forms

formidable-forms

Formidable Forms est le seul plugin de création de formulaires WordPress qui intègre une fonctionnalité de vues complète. Vous pouvez ainsi non seulement collecter les données des formulaires, mais aussi les afficher sur le front-end de votre site.

Avec Views, vous pouvez facilement créer une page web pour afficher magnifiquement les données soumises par les utilisateurs directement depuis votre tableau de bord WordPress. Vous pouvez l'utiliser pour afficher des annuaires d'entreprises, des annuaires de membres, des listes, et plus encore.

Vous pouvez également connecter vos vues à un formulaire de recherche et permettre aux visiteurs de votre site de rechercher du contenu spécifique.

Pour voir si c'est le bon choix pour vous, vous pouvez consulter cet article pour comparer Formidable Forms avec WPForms.

Cela dit, commençons le tutoriel. 

Étape 1 : Installer et activer le plugin Formidable Forms

Tout d'abord, vous devrez vous inscrire à un compte Formidable Forms. Assurez-vous d'obtenir le plan qui inclut la fonctionnalité Views. 

Après votre inscription, rendez-vous sur votre tableau de bord d'administration WordPress et ouvrez l'onglet Plugins » Ajouter. Recherchez le plugin Formidable Forms et cliquez sur le bouton Installer.

installer le plugin Formidable Forms

Si vous avez besoin d'aide supplémentaire, vous pouvez consulter notre guide sur comment installer un plugin WordPress

Une fois que vous avez installé et activé le plugin, vous verrez une page de bienvenue. Cliquez sur le bouton Connecter un compte pour vous connecter à votre compte et accéder à toutes les fonctionnalités premium. 

Si vous n'êtes pas déjà connecté à votre compte Formidable Forms, vous devrez vous reconnecter.

connectez votre compte

Ensuite, vous devez installer le module complémentaire Formidable Forms Pro et Visual Views sur votre site. 

Vous pouvez les installer directement depuis l'onglet Formidable sur votre tableau de bord WordPress ou télécharger le fichier du plugin depuis votre compte. 

Maintenant, vous êtes prêt à créer un formulaire de recherche personnalisé dans WordPress avec Formidable Forms. 

Étape 2 : Ajouter des données pour votre formulaire de recherche

Avant de créer un formulaire de recherche, vous devez collecter les données pour vos résultats de recherche. 

Pour créer un nouveau formulaire, accédez à Formidable » Forms et cliquez sur le bouton + Add New

créer un nouveau formulaire de données de recherche

Vous verrez une fenêtre contextuelle où vous pourrez choisir un modèle pour votre formulaire. Nous utiliserons le modèle de formulaire vierge pour ce tutoriel. 

choisir un modèle Formidable Forms

Ensuite, vous devez ajouter le nom et la description de votre formulaire.

Une fois que vous avez terminé de nommer votre formulaire, cliquez sur le bouton Create pour lancer le constructeur de formulaires par glisser-déposer. 

formulaire de collecte de données

Dans le constructeur de formulaires, vous pouvez voir les champs du formulaire sur le côté gauche et l'aperçu du formulaire sur le côté droit de la page.

constructeur de formulaires Formidable Forms

Pour insérer des champs de formulaire, vous pouvez simplement les faire glisser depuis le menu des champs vers l'aperçu du formulaire. 

Ici, nous ajoutons ces champs : Prénom, Nom, Email et Pays. Vous pouvez ajouter n'importe lequel des champs selon vos besoins.

glisser-déposer Formidable

Pour personnaliser un champ, il vous suffit de cliquer dessus et vous verrez les paramètres du formulaire. Il existe de nombreuses options telles que l'étiquette, l'option obligatoire, le CSS personnalisé, et plus encore. 

Vous pouvez même utiliser l'option de logique conditionnelle pour afficher ou masquer les champs du formulaire en fonction des entrées de l'utilisateur.

modifier les paramètres de champ créer un formulaire de recherche personnalisé dans WordPress

Lorsque vous avez terminé d'ajouter des champs, cliquez sur le bouton Mettre à jour dans le coin supérieur droit du constructeur de formulaires. 

Maintenant, tout ce que vous avez à faire est de publier ce formulaire sur votre site pour collecter des données auprès de vos utilisateurs ou membres du site. 

Ou, vous pouvez également importer un fichier de données depuis votre ordinateur. Pour cela, ouvrez l'onglet Entrées en haut du constructeur et cliquez sur le bouton Importer.

importer des entrées

Ensuite, vous verrez une fenêtre où vous pouvez télécharger n'importe quel fichier CSV ou XML pour importer des données dans votre formulaire. Vous pouvez mapper les champs aux données du fichier pour importer des enregistrements. 

télécharger des fichiers

Après avoir collecté les données, vous devrez créer un formulaire de recherche personnalisé dans WordPress pour permettre aux utilisateurs de rechercher sur votre site.

Étape 3 : Créez votre formulaire de recherche personnalisé

Pour créer un formulaire de recherche, vous devez suivre les mêmes instructions que dans l'étape 2. 

Allez dans Formidable » Formulaires » Ajouter un nouveau et sélectionnez un modèle vierge. Ensuite, donnez un nom et une description à votre formulaire de recherche personnalisé.

créer un nouveau formulaire de recherche

Dans ce formulaire, nous allons ajouter 3 champs pour permettre aux utilisateurs de rechercher des données sur votre site. Les champs sont Prénom, Nom et Pays.  

Vous pouvez utiliser le champ de formulaire texte pour les noms et un champ de liste déroulante de recherche pour la recherche de pays.

champs de formulaire de recherche créer un formulaire de recherche personnalisé dans WordPress

Dans les paramètres du champ Prénom, vous devez ajouter la valeur par défaut pour connecter votre formulaire de recherche à une vue de résultats ultérieurement. 

Pour cela, ajoutez ce shortcode dans l'option Valeur par défaut des paramètres du champ :

[get param=fname] 

Ici, « fname » est le texte que nous utilisons pour le champ du prénom afin de nous connecter à la vue. 

modifier le prénom

Dans les paramètres du champ Nom de famille, nous allons ajouter le même shortcode :

[get param=lname] 

Ici, « lname » est le texte que nous utilisons pour le champ du nom de famille afin de nous connecter à la vue. 

modifier le nom de famille

Dans les paramètres du champ Pays, nous devons ajouter les noms de pays dans l'option déroulante. Assurez-vous de laisser la première option vide.

champ pays

Si vous faites défiler vers le bas, vous pouvez voir l'option pour ajouter un texte d'espace réservé. Et comme pour les deux autres champs de formulaire, vous devez ajouter une valeur par défaut ici. Insérez le shortcode :

[get param=country] 

Ici, « country » est le texte que nous utilisons pour le champ du pays afin de nous connecter à la vue. 

modifier le champ pays

Une fois que vous avez terminé d'ajouter les types d'entrée, vous pouvez modifier la disposition des champs du formulaire. 

Pour qu'ils s'affichent sur une seule ligne horizontale, accédez à l'option Classes de mise en page CSS pour chaque champ et sélectionnez l'option 1/4. 

changer le format

Si vous souhaitez personnaliser le bouton, accédez à l'onglet Paramètres » Style et boutons et allez dans les paramètres du bouton. 

Ici, vous pouvez changer le texte du bouton de soumission en Rechercher et choisir l'alignement du bouton sur En ligne. Cela fera apparaître votre bouton de recherche dans la même ligne que vos champs de formulaire. 

nom et alignement du bouton

Maintenant que vous avez appris à créer un formulaire de recherche personnalisé dans WordPress, insérons ce formulaire et les résultats sur une page web.

Étape 4 : Créer une vue des résultats de recherche

Vous devez créer une vue pour afficher les résultats de recherche et le formulaire de recherche sur la même page.

Pour créer une nouvelle vue, ouvrez la page Formidable » Vues et cliquez sur le bouton + Ajouter.

créer une nouvelle vue

Ensuite, vous verrez la fenêtre contextuelle qui vous permet de choisir entre les types de vues Grille, Tableau, Calendrier et Classique. 

Pour ce tutoriel, nous allons choisir la vue grille pour les résultats du formulaire de recherche.

sélectionner la vue grille

Après cela, vous verrez les options pour sélectionner un formulaire pour les entrées et ajouter le nom de votre vue de résultats. Assurez-vous de sélectionner le formulaire de collecte de données que vous avez créé à l'étape 2. 

Cliquez sur le bouton Créer une vue lorsque vous avez terminé.

nommez votre vue

Dans le constructeur de vues, vous verrez les options de style sur le côté gauche et le constructeur de mise en page de la vue sur le côté droit. Cliquez sur le lien commencer à ajouter du contenu pour ajouter vos entrées. 

paramètres de la vue

Cliquez sur l'icône « + » pour commencer à ajouter votre liste aux vues. Cela ouvrira l'éditeur de contenu des listes.

ajouter des données de vue

Dans l'éditeur de contenu de la page de liste, vous pouvez ajouter les champs du formulaire depuis l'option Personnalisation sur le côté droit de la page. Cliquez simplement sur les champs du formulaire là-bas pour les insérer dans votre vue de résultats. 

Ensuite, vous pouvez styliser les clés de champ pour afficher les champs du formulaire dans la mise en page souhaitée.

insérer des champs

Lorsque vous avez terminé, cliquez sur le bouton Mettre à jour la vue. Vous pouvez maintenant voir toutes les entrées sur la page des vues.

Vous devez ajouter le formulaire de recherche sur cette page. Pour cela, cliquez sur l'option Ajouter avant le contenu

ajouter avant le contenu

Cela ouvrira l'éditeur de contenu où vous pourrez insérer le formulaire de recherche personnalisé que vous avez créé à l'étape 3.

Tout ce que vous avez à faire est de cliquer sur le bouton Formidable et de sélectionner votre formulaire de recherche pour insérer le shortcode du formulaire. 

ajouter un formulaire de recherche dans la vue

Cliquez sur le bouton Mettre à jour la vue pour ajouter votre formulaire de recherche personnalisé à la vue.

vue grille

À l'étape suivante, nous vous montrerons comment publier la vue des résultats sur votre site WordPress. 

Étape 5 : Publier la vue des résultats de recherche

Pour ajouter la vue des résultats de recherche sur votre site, vous devez créer une nouvelle page et rechercher le bloc Formidable Views. 

bloc vues formidable

Une fois que vous avez ajouté la vue, vous pouvez publier la page sur votre site. Votre page ressemblera à ceci. 

page de recherche utilisateur

Attendez ! Vous n'avez pas encore terminé. Vous devez connecter votre formulaire de recherche personnalisé et la vue des résultats pour permettre aux utilisateurs de rechercher du contenu sur votre site.

Étape 6 : Connecter le formulaire de recherche personnalisé à la vue

Pour connecter votre formulaire de recherche, allez dans Formidable » Formulaires et ouvrez l'option Paramètres du formulaire de recherche.

connecter le formulaire de recherche

Ici, vous pouvez aller dans l'option Lors de la soumission et sélectionner l'option Rediriger vers l'URL. Ensuite, vous devez ajouter le lien vers la page de vues que vous avez créée à l'étape 5. 

Pour cela, copiez l'URL de la page et ajoutez cette partie : “?fname[21]&lname=[19]&country=[22]”. 

Vous pouvez insérer le texte et les clés des champs pour que l'URL de redirection ressemble à ceci :

http://votrenomsite.com/annuaire-utilisateurs/?fname[21]&lname=[19]&country=[22]

connecter la page de recherche

N'oubliez pas d'activer l'option Ne pas stocker les entrées soumises à partir de ce formulaire pour ce formulaire. 

Maintenant, vous devez ajouter des filtres à vos vues de résultats afin que les utilisateurs puissent rechercher la liste par les champs du formulaire que vous avez ajoutés. 

Pour ce faire, ouvrez la vue que vous avez créée précédemment et cliquez sur l'option des filtres en haut de la page.

ajouter un filtre

Ensuite, vous devez ajouter les filtres pour le prénom, le nom de famille et le pays, et entrer le shortcode comme valeur par défaut pour chaque champ. 

connecter les vues aux champs du formulaire de recherche

La dernière chose à faire est d'insérer le shortcode de votre formulaire de recherche dans l'option Message sans résultat du menu de gauche. Cela permettra aux utilisateurs de rechercher plus de contenu après chaque recherche. 

afficher le formulaire de recherche personnalisé dans la page

N'oubliez pas de mettre à jour la vue une fois que vous avez terminé les réglages. 

Testez votre formulaire de recherche personnalisé 

Pour vérifier si votre formulaire de recherche fonctionne correctement, rechargez votre page de recherche et utilisez les filtres pour rechercher des annonces.

résultats du formulaire de recherche personnalisé

Avec cela, vous connaissez 3 façons d'ajouter un formulaire de recherche à votre site. Bien que l'option de recherche par défaut de WordPress soit gratuite, nous ne la recommandons pas si vous ne savez pas ce que vous faites avec le code. Le plugin SearchWP est de loin notre méthode préférée. Il est facile à utiliser et ajoute une fonction de recherche beaucoup plus avancée à votre site.

Nous espérons que cet article vous a aidé à créer facilement un formulaire de recherche personnalisé dans WordPress avec l'aide du plugin Formidable Forms.

Pour vos prochaines étapes, vous pouvez consulter ces ressources :

Ces articles vous aideront à ajouter plus de fonctionnalités à votre site WordPress à l'aide des meilleurs constructeurs de formulaires WordPress.

Commentaires   Laisser une réponse

  1. J'ai besoin d'ajouter un formulaire de recherche sur mon site web, en particulier j'ai besoin de 3 sélecteurs pour catégorie+sous-catégorie1+sous-catégorie2, d'autres sélecteurs pour des taxonomies personnalisées, des cases à cocher pour les tags, 2 champs numériques pour la "distance de la mer" (min.-max), pour commencer - Quelle est la meilleure solution ?

  2. excellent article de blog très utile

Ajouter un commentaire

Nous sommes ravis que vous ayez choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés conformément à notre politique de confidentialité, et tous les liens sont nofollow. N'utilisez PAS de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.

Liste de contrôle de lancement WordPress

La checklist ultime pour lancer un WordPress

Nous avons compilé tous les éléments essentiels de la liste de contrôle pour le lancement de votre prochain site Web WordPress dans un ebook pratique.
Oui, envoyez-moi l'eBook gratuit !