Avez-vous déjà perdu des prospects parce que votre formulaire de contact était lent ou nécessitait le rechargement de toute la page ? C'est une histoire que nous entendons trop souvent.
Nous avons également constaté par nous-mêmes à quel point les formulaires WordPress traditionnels peuvent être frustrants, tant pour les propriétaires de sites que pour leurs visiteurs. Les formulaires AJAX résolvent ce problème, et ils peuvent faire de même pour le vôtre.
Ces formulaires modernes soumettent les données instantanément sans actualiser la page. Ils créent une expérience plus fluide qui aide à maintenir l'engagement des visiteurs.
Nous avons implémenté ces formulaires à de nombreuses reprises sur les sites Web de clients et de partenaires, et les résultats parlent d'eux-mêmes.
Dans ce guide, nous partagerons un processus simple en 4 étapes pour créer un formulaire AJAX WordPress. Nous utiliserons un plugin convivial qui simplifie le travail technique afin que vous puissiez suivre facilement. 🙌
Qu'est-ce que l'AJAX et pourquoi l'utiliser pour vos formulaires ?
AJAX, abréviation de Asynchronous JavaScript and XML, est une technique de programmation qui permet aux pages Web d'envoyer et de recevoir des données sans rechargement.
Il est couramment utilisé dans les formulaires Web, permettant aux utilisateurs de soumettre les données du formulaire sans recharger la page. Cela rend la soumission de formulaire facile et rapide, ce qui améliore l'expérience utilisateur globale.
Les applications Web comme Gmail et Facebook utilisent également cette technique de manière intensive pour maintenir l'engagement des utilisateurs pendant que les tâches en arrière-plan s'exécutent de manière transparente.
Vous pouvez utiliser AJAX pour les formulaires sur votre site WordPress afin d'éviter les rechargements de page inutiles et de maintenir l'engagement des utilisateurs sur la page qu'ils consultent actuellement.
C'est particulièrement utile si vous gérez une boutique en ligne et que vous souhaitez recueillir les commentaires des utilisateurs sans interrompre l'expérience d'achat.
Vous pouvez également utiliser la même fonctionnalité AJAX pour d'autres formulaires personnalisés sur votre site Web. Par exemple, un formulaire de connexion utilisateur personnalisé peut permettre aux utilisateurs de se connecter sans chargement de page supplémentaire.
Dans cette optique, nous allons vous montrer comment créer un formulaire de contact AJAX WordPress en 4 étapes simples.
- Étape 1 : Installer le plugin WPForms
- Étape 2 : Créez votre premier formulaire
- Étape 3 : Activez la fonctionnalité de soumission de formulaire AJAX
- Étape 4 : Ajoutez votre formulaire activé pour AJAX dans WordPress
- Astuce bonus : Exportez les entrées du formulaire en CSV ou Excel 📄
- FAQ : Formulaires AJAX WordPress
- Ressources bonus : Plus de guides sur les formulaires WordPress
Commençons.
Étape 1 : Installer le plugin WPForms
La première étape consiste à installer et activer un plugin de création de formulaires.
Pour ce tutoriel, nous utiliserons le plugin WPForms. C'est le meilleur créateur de formulaires de contact WordPress du marché, et il vous permet de créer facilement des formulaires alimentés par Ajax.
Chez WPBeginner, nous utilisons WPForms pour afficher notre formulaire de contact, mener des enquêtes annuelles auprès de nos lecteurs et gérer les demandes de service de migration, entre autres choses.
Cela a été une excellente expérience, et vous pouvez consulter notre avis complet sur WPForms pour plus d'informations.
Pour commencer, vous voudrez peut-être créer un compte WPForms. Sur le site Web WPForms, cliquez sur le bouton « Obtenir WPForms maintenant », choisissez un plan et terminez le processus de paiement.
📝 Note : Pour créer un formulaire AJAX, vous pouvez utiliser la version gratuite de WPForms. Mais si vous avez besoin de fonctionnalités plus avancées comme la logique conditionnelle, les téléversements de fichiers ou les intégrations d'outils Google, vous aurez besoin de WPForms Pro.
Une fois cela fait, vous devriez avoir votre propre tableau de bord de compte WPForms, où vous pouvez télécharger votre fichier zip WPForms Pro et copier votre clé de licence.
Ensuite, installons et activons le plugin WPForms.
Dans votre zone d'administration WordPress, vous pouvez aller dans Extensions » Ajouter une nouvelle extension.
Ensuite, vous pouvez utiliser la barre de recherche pour trouver rapidement l'extension.
Lorsque vous la voyez, cliquez sur « Installer maintenant », puis une fois de plus sur « Activer ».
Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Après l'activation, allez à la page WPForms » Paramètres pour entrer votre clé de licence.
Une fois vérifié, vous pourrez recevoir des mises à jour automatiques et installer des modules complémentaires. Vous êtes maintenant prêt à commencer à créer des formulaires AJAX dans WordPress.
Étape 2 : Créez votre premier formulaire
Passons maintenant à la création de votre premier formulaire WordPress.
Visitez simplement la page WPForms » Ajouter un nouveau dans la zone d'administration de WordPress.
Sur l'écran suivant, vous pouvez d'abord nommer votre nouveau formulaire, par exemple, « Formulaire de contact ».
Après cela, vous choisirez comment vous allez créer vos formulaires.
Avec WPForms, vous pouvez créer vos formulaires à partir de zéro, utiliser le générateur de formulaire IA, ou choisir parmi plus de 2 000 modèles prédéfinis.
Par exemple, si vous souhaitez utiliser WPForms AI, il vous suffit d'entrer une invite simple et il générera le formulaire pour vous dans la zone d'aperçu.
Pour ce tutoriel, cependant, nous allons créer un formulaire de contact en utilisant un modèle prédéfini.
Survolons la boîte « Formulaire de contact simple » et cliquons sur « Utiliser le modèle ». Notez que vous pouvez créer tout autre type de formulaire dont vous avez besoin ; le processus est le même.
WPForms va maintenant charger votre formulaire avec des champs de base déjà ajoutés.
À partir d'ici, vous pouvez simplement cliquer sur n'importe quel champ du formulaire pour le modifier.
Vous pouvez également ajouter de nouveaux champs de formulaire depuis la colonne de gauche en cliquant dessus.
Le nouveau champ apparaîtra en bas de votre formulaire, juste au-dessus du bouton Envoyer.
Vous pouvez ensuite faire glisser et déposer les champs du formulaire pour réorganiser leur ordre.
Une fois que vous avez terminé de personnaliser le formulaire, vous pouvez passer à l'étape suivante.
Étape 3 : Activez la fonctionnalité de soumission de formulaire AJAX
Selon vos paramètres, WPForms peut ne pas avoir la soumission de formulaire AJAX activée par défaut, alors vérifions cela maintenant.
Pour ce faire, passez simplement à l’onglet « Paramètres » dans le générateur de formulaire.
Dans l’onglet des paramètres « Général », cliquez sur le bouton bascule à côté de l’option « Activer la soumission de formulaire AJAX ».
Configurons maintenant ce qui se passe après que quelqu'un soumet le formulaire.
Tout d'abord, vous pouvez passer à l'onglet « Confirmation » dans les paramètres. C'est là que vous informez vos utilisateurs que vous avez bien reçu leur formulaire.
WPForms vous permet de le faire de différentes manières. Par exemple, vous pouvez rediriger les utilisateurs vers une URL, leur afficher une page spécifique, ou simplement afficher un message à l'écran.
Bien que vous puissiez rediriger les utilisateurs vers une nouvelle page, cela nécessite un chargement de page. Pour tirer le meilleur parti d'AJAX, nous vous recommandons simplement d'afficher un « Message » afin que l'utilisateur reste sur la même page.
Vous devez sélectionner l'option de message et modifier le message de confirmation. Vous pouvez utiliser la barre d'outils de mise en forme ou ajouter des liens pour guider les utilisateurs sur la marche à suivre.
Ensuite, configurez comment vous souhaitez être notifié des nouvelles soumissions de formulaire.
Passez à l'onglet « Notifications » dans les paramètres du formulaire et configurez les paramètres de notification par e-mail.
Lorsque vous avez terminé, vous pouvez enregistrer votre formulaire et quitter le constructeur de formulaire.
Étape 4 : Ajoutez votre formulaire activé pour AJAX dans WordPress
WPForms facilite l'ajout de formulaires à votre site WordPress, que ce soit dans un article, une page ou un widget de barre latérale.
Modifiez simplement l'article ou la page où vous souhaitez ajouter le formulaire et insérez le bloc WPForms dans votre zone de contenu.
Après cela, vous devez sélectionner le formulaire que vous venez de créer dans le menu déroulant du bloc WPForms, accessible via le lien déroulant.
WPForms chargera immédiatement un aperçu en direct du formulaire dans l'éditeur de contenu.
Vous pouvez maintenant enregistrer ou publier votre contenu, puis visiter votre site Web WordPress pour tester la fonctionnalité AJAX du formulaire.
Voici un aperçu rapide de l'exemple de formulaire AJAX WordPress de notre site de démonstration :
Vous pouvez également ajouter votre formulaire à un widget de barre latérale dans WordPress.
Pour ce faire, accédez à la page Apparence » Widgets et ajoutez le bloc de widget WPForms à une barre latérale.
Sélectionnez le formulaire que vous avez créé précédemment et cliquez sur le bouton « Mettre à jour » pour enregistrer les paramètres du widget. Vous pouvez maintenant visiter votre site Web pour voir votre formulaire alimenté par AJAX en action.
Astuce bonus : Exportez les entrées du formulaire en CSV ou Excel 📄
Une fois que votre formulaire AJAX est opérationnel, vous voudrez peut-être conserver un enregistrement de toutes les soumissions. Surtout si vous collectez des prospects, des demandes de renseignements de clients ou des informations d'inscription.
La façon la plus simple de le faire est d'exporter vos entrées sous forme de fichier CSV ou Excel.
Cela facilite l'organisation et l'analyse des réponses dans des outils de tableur comme Google Sheets ou Microsoft Excel. C'est également pratique pour partager des rapports avec votre équipe ou pour sauvegarder les données du formulaire en dehors de WordPress.
Si vous utilisez WPForms, l'exportation des entrées de formulaire est simple : allez dans WPForms » Entrées, sélectionnez votre formulaire, choisissez vos options d'exportation et téléchargez les données au format CSV ou Excel.
Vous souhaitez configurer cela ? Suivez notre guide complet sur comment exporter les entrées de formulaire WordPress en CSV et Excel.
FAQ : Formulaires AJAX WordPress
Avant de conclure, voici quelques questions courantes qui se posent lorsque les gens commencent à utiliser des formulaires AJAX dans WordPress.
Comment utiliser AJAX pour la soumission de formulaire ?
La façon la plus simple est d'utiliser un plugin de formulaire qui prend déjà en charge AJAX, comme WPForms. Il vous suffit d'activer l'option AJAX dans les paramètres du formulaire, et le plugin s'occupe de tout pour vous.
Si vous créez un formulaire personnalisé, vous devrez utiliser JavaScript et les hooks AJAX de WordPress. Mais pour la plupart des sites, un plugin est beaucoup plus simple et plus fiable.
Où trouver le réglage AJAX dans WPForms ?
Dans WPForms, l'option AJAX se trouve dans les paramètres du formulaire. Après avoir ouvert votre formulaire dans le constructeur, allez dans Paramètres » Général, puis recherchez la case à cocher Activer la soumission de formulaire AJAX. Une fois activée, le formulaire sera soumis sans recharger la page.
Quels sont les inconvénients de l'AJAX ?
L'AJAX repose sur JavaScript, il peut donc entrer en conflit avec des plugins de mise en cache agressifs qui minifient ou reportent les scripts. Si votre formulaire ‘tourne’ mais ne s’envoie pas, essayez de vider votre cache ou de vérifier les paramètres de votre plugin d'optimisation.
Cela peut également causer des problèmes avec les constructeurs de pages ou les anciens thèmes s'il n'est pas correctement configuré. C'est pourquoi il est important de tester vos formulaires après avoir activé l'AJAX.
Ressources bonus : Plus de guides sur les formulaires WordPress
Nous espérons que cet article vous a aidé à apprendre comment créer un formulaire de contact AJAX WordPress pour votre site Web. Ensuite, vous voudrez peut-être également consulter nos articles sur :
- Comment créer une fenêtre contextuelle de formulaire de contact dans WordPress
- Comment utiliser les formulaires de contact pour développer votre liste d'e-mails
- Comment créer des formulaires de contact avec plusieurs destinataires
- Comment créer un formulaire de contact sécurisé dans WordPress
- Comment bloquer le spam des formulaires de contact dans WordPress
- Comment suivre et réduire l'abandon de formulaire
- Le guide ultime pour utiliser les formulaires WordPress
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Vous avez une question ou une suggestion ? Veuillez laisser un commentaire pour lancer la discussion.