Comment créer votre propre formulaire de recherche personnalisé dans WordPress (3 façons)

Publié: 2022-08-11
how to create a custom search form in 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 Web en quelques clics.

Lorsque les utilisateurs trouvent rapidement ce qu'ils recherchent, 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, etc.

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. Il s'agit d'une fonctionnalité indispensable dans les magasins de commerce électronique, les annuaires d'entreprises en ligne, les sites d'écoles/collèges et les sites similaires.

L'option de recherche aidera les utilisateurs à trouver ce dont ils ont besoin sans passer des minutes ou même 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

Nous allons maintenant vous montrer comment créer un formulaire de recherche personnalisé dans WordPress à l'aide d'un plugin de création de formulaire.

Comment créer un formulaire de recherche personnalisé dans 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 publications sur votre site.

Cette méthode est cependant un peu compliquée. Cela implique de coder et d'éditer des fichiers comme le functions.php qui sont très sensibles. Un faux pas 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 le fichier searchform.php dans votre thème WordPress. S'il est introuvable, l'option de recherche principale par défaut de WordPress sera utilisée.

Mais, pour personnaliser le champ de recherche WordPress, vous devrez ajouter du code supplémentaire au fichier.

Si vous n'êtes pas à l'aise avec le codage, il est préférable d'utiliser un plugin de recherche WordPress fiable pour permettre une recherche sur le site. Et c'est exactement ce que nous allons faire pour ce tutoriel.

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 également d'ajouter des filtres et d'afficher les bons résultats à vos visiteurs.

Nous vous recommandons d'utiliser 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é à l'aide de ces 2 plugins.

Créer un formulaire de recherche personnalisé à l'aide de SearchWP

searchwp

SearchWP est sans conteste le meilleur plugin de recherche personnalisé pour WordPress. Il est facile à utiliser, affiche des résultats précis et vous permet de contrôler 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 plan à partir de 99 $ par an. Et même si vous ne serez 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 votre produit, le contenu des champs personnalisés, la sortie de code court, le contenu de la table de base de données personnalisée, la recherche multisite intersite, et plus encore sur votre site.

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

  • Indexation de documents PDF et Office
  • Intégration automatique avec Native WP Search, pas de codage !
  • Plusieurs moteurs de recherche
  • Mot-clé dérivé
  • Prise en charge avancée des champs personnalisés
  • Intégration WooCommerce
  • Exclure ou attribuer des résultats
  • Statistiques de recherche et insights
  • Personnalisation facile de l'algorithme

Le plug-in s'intègre également à bbPress, WP Job Manager, Easy Digital Downloads, etc. De plus, vous aurez accès à une assistance dédiée et à une documentation détaillée.

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

Une fois que vous avez créé un compte, vous pouvez commencer avec le didacticiel ci-dessous.

Étape 1 : Activer 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 peu de temps.

searchwp account

Ensuite, rendez-vous sur votre panneau wp-admin et accédez à Plugins »Ajouter un nouveau» Plugin de téléchargement.

upload plugin in 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 ».

add license in searchwp

Récupérez votre clé de licence à partir de votre compte SearchWP et collez-la ici dans la zone Licence.

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

Étape 2 : Personnaliser le 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 un nouveau" pour créer un nouveau moteur de recherche.

add new engine searchwp

Cela créera un nouveau moteur de recherche appelé 'supplémentaire'. Pour changer le nom, vous devez cliquer sur le bouton "Sources et paramètres".

supplemental search engine

Vous verrez maintenant une option pour choisir de rechercher des publications, 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 ultérieurement, nommons-le "Personnalisé" dans le champ "Étiquette du moteur".

edit settings in supplemental engine

Ici, vous pouvez voir que l'option 'Keyword Stems' a été sélectionnée. Cela ne tiendra pas compte des fins 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 ici, appuyez sur le bouton "Terminé" pour enregistrer vos modifications.

De retour sur la page du moteur, vous pouvez voir une section intitulée "Pertinence des attributs applicables" sous chaque sous-titre. Cela vous permet de hiérarchiser 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".

attribute sliders in searchwp

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

Ensuite, SearchWP vous permet de contrôler si certains contenus sont inclus ou exclus des résultats de la recherche. Pour cela, vous pouvez créer des règles.

Cela pourrait être de permettre aux clients de trouver rapidement des produits dans la même catégorie qu'ils parcourent. Ou permettez aux visiteurs de rechercher du contenu sur le même sujet que celui qu'ils venaient 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 publication.

searchwp edit rules

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 : Ajouter le 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. Il vous suffit de 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, 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 simple shortcode dans vos publications, pages et widgets.

Tout ce que vous avez à faire est de modifier 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 "personnalisé", si vous avez choisi un nom différent, vous devrez alors remplacer engine=“custom” par votre propre nom de moteur à quatre endroits dans cet extrait de code.

Dans ce code, le texte du bouton indiquera "Recherche personnalisée". Si vous souhaitez modifier le texte du bouton de recherche pour quelque chose de plus créatif, vous pouvez effectuer la modification dans la première ligne button_text=“Custom Search” .

Ce code ajoutera le moteur de recherche personnalisé à votre publication WordPress. Il créera également une section pour afficher les résultats de la recherche, affichera un message d'absence de résultats si nécessaire et ajoutera une pagination si les résultats vont sur plusieurs pages.

Vous pouvez prévisualiser la publication et vous verrez apparaître le moteur de recherche. Vous verrez un champ de recherche avec le bouton CTA dans votre message.

Ensuite, publiez-le ou mettez-le à jour et activez le formulaire de recherche personnalisé. Si vous avez besoin d'aide pour cela, suivez notre guide simple sur la façon d'ajouter un shortcode dans WordPress.

Vous pouvez tester votre formulaire personnalisé en entrant quelques termes de recherche pour voir les résultats renvoyés par l'outil.

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

É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 : cela ajoute automatiquement les résultats de la recherche déroulante au fur et à mesure que l'utilisateur tape. Cela aide l'utilisateur à trouver sa requête plus rapidement. SearchWP propose un plugin gratuit Live Ajax Lite Search dans le référentiel 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 les paramètres qui permettront à vos utilisateurs de trouver plus facilement ce qu'ils recherchent.
searchwp advanced settings

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 : styliser le formulaire de recherche et la page de résultats

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

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 publications, 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 ne l'avez pas encore fait, 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 dérouleraient pas comme prévu. Vous pouvez ensuite utiliser un site intermédiaire (un clone de votre site Web) pour l'essayer en premier.

Vous trouverez ci-dessous un extrait 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 deuxième section personnalise les résultats de la recherche.

Vous pouvez copier-coller le code suivant pour styliser la fonction de recherche de votre 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 voulez en savoir plus à ce sujet ? WPBeginner a le meilleur guide : Comment ajouter facilement du CSS personnalisé à votre site WordPress.

C'est tout ce qu'on peut en dire! Vous avez créé un formulaire de recherche entièrement personnalisable à l'aide de 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é à l'aide de formulaires formidables

formidable-forms

Formidable Forms est le seul plugin de création de formulaires WordPress qui est livré avec une fonctionnalité de vues entièrement intégrée. Ainsi, vous pouvez non seulement collecter des données de formulaire, mais également 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 l'utilisateur directement à partir de votre tableau de bord WordPress. Vous pouvez l'utiliser pour afficher des répertoires d'entreprises, des répertoires de membres, des listes, etc.

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

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é Vues.

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

install formidable forms plugin

Si vous avez besoin de plus d'aide à ce sujet, vous pouvez consulter notre guide sur la façon d'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.

connect your account

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 de votre tableau de bord WordPress ou télécharger le fichier du plugin depuis votre compte.

Vous êtes maintenant 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 des données pour vos résultats de recherche.

Pour créer un nouveau formulaire, accédez à Formidable »Formulaires et cliquez sur le bouton + Ajouter un nouveau .

create new search data form

Vous verrez une fenêtre contextuelle dans laquelle vous pourrez choisir un modèle pour votre formulaire. Nous allons utiliser le modèle de formulaire vierge pour ce didacticiel.

choose a template formidable forms

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

Une fois que vous avez fini de nommer votre formulaire, cliquez sur le bouton Créer pour lancer le générateur de formulaires par glisser-déposer.

data collection form

Dans le générateur 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.

form builder formidable forms

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

Ici, nous ajoutons ces champs : Prénom, Nom, E-mail et Pays. Vous pouvez ajouter n'importe lequel des champs en fonction de vos besoins.

drag and drop formidable

Pour personnaliser n'importe quel champ, il vous suffit de cliquer dessus et vous pouvez voir les paramètres du formulaire. Il existe de nombreuses options telles que l'étiquette, l'option requise, le CSS personnalisé, etc.

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

edit field settings create a custom search form in wordpress

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

Il ne vous reste plus qu'à publier ce formulaire sur votre site pour collecter les données de vos utilisateurs ou membres du site.

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

import entries

Ensuite, vous verrez une fenêtre dans laquelle vous pourrez 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.

upload files

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 à l'étape 2.

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

create new search form

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

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

search form fields create a custom search form in wordpress

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

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

[get param=fname]

Ici, "fname" est le texte que nous utilisons pour le champ prénom pour se connecter à la vue.

first name edit

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

[get param=lnom]

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

last name edit

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.

country field

Si vous faites défiler vers le bas, vous pouvez voir l'option d'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=pays]

Ici, "pays" est le texte que nous utilisons pour le champ pays pour se connecter à la vue.

country field edit

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

Pour les faire apparaître sur une seule ligne horizontale, accédez à l'option CSS Layout Classes pour chaque champ et sélectionnez l'option 1/4.

change format

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

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

button name and alignment

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 la 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 nouveau .

create new view

Ensuite, vous pouvez voir la fenêtre contextuelle qui vous permet de choisir entre les types d'affichage Grille, Tableau, Calendrier et Classique.

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

select grid view

Après cela, vous pouvez voir 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é.

name your view

Dans le générateur de vues, vous pouvez voir les options de style sur le côté gauche et le générateur de disposition de vue sur le côté droit. Cliquez sur le lien commencer à ajouter du contenu pour ajouter vos entrées.

view settings

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

add view data

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

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

insert fields

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

add before content

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

Il vous suffit de cliquer sur le bouton Formidable et de sélectionner votre formulaire de recherche pour insérer le shortcode du formulaire.

add search form in view

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

grid view

Dans 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 la recherche

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

formidable views block

Après avoir ajouté la vue, vous pouvez publier la page sur votre site. Votre page ressemblera à ceci.

user search page

Attendre! 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.

connect search form

Ici, vous pouvez accéder à 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 du texte de champ et des clés pour que l'URL de redirection ressemble à ceci :

http://nomdevotresite/répertoire-utilisateur/?fname[21]&lname=[19]&country=[22]

connect search page

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 en fonction des champs de formulaire que vous avez ajoutés.

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

add filter

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

connect views with search form fields

Une dernière chose que vous devez faire est d'insérer le shortcode de votre formulaire de recherche dans l'option No Entries Message du menu de gauche. Cela permettra aux utilisateurs de rechercher plus de contenu après chaque recherche.

show custom search form in page

N'oubliez pas de mettre à jour la vue une fois que vous avez terminé avec les paramètres.

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.

custom search form results

Avec cela, vous connaissez 3 façons d'ajouter un formulaire de recherche à votre site. Bien que l'option de recherche WordPress par défaut 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 à l'aide du plugin Formidable Forms.

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

  • Comment ajouter un formulaire de réservation personnalisé à votre site WordPress
  • Les meilleurs constructeurs de formulaires comparés (gratuits et payants)
  • Comment créer un formulaire d'inscription avec les paiements PayPal dans WordPress

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