Avez-vous déjà perdu des prospects parce que votre formulaire de contact était lent et peu pratique ? C'est une histoire que nous entendons trop souvent. Nous avons également expérimenté directement à quel point les formulaires WordPress traditionnels peuvent être frustrants, tant pour nous que pour nos lecteurs.
Les formulaires AJAX ont résolu ce problème, et ils peuvent faire de même pour vous.
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 appliqué ces formulaires à de nombreuses reprises sur les sites Web de nos clients et partenaires, et les résultats parlent d'eux-mêmes.
Dans ce guide, nous partagerons notre processus éprouvé en 4 étapes pour créer un formulaire AJAX WordPress. Nous utiliserons un plugin convivial qui simplifie les aspects techniques afin que vous puissiez facilement suivre. 🙌
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 JavaScript qui permet aux développeurs de transférer des données sans recharger une page.
Il est le plus couramment utilisé dans les formulaires Web, permettant aux utilisateurs de soumettre les données du formulaire sans recharger une page. Cela rend la soumission de formulaire facile et rapide, ce qui améliore l'expérience utilisateur globale.
De plus, les applications Web comme Gmail et Facebook utilisent largement cette technique pour maintenir l'engagement des utilisateurs tout en faisant fonctionner tout de manière transparente en arrière-plan.
Vous pouvez utiliser AJAX pour les formulaires sur votre site WordPress. Cela évitera aux utilisateurs des rechargements de page inutiles et les maintiendra engagés sur la page qu'ils consultent actuellement.
Cela s'avère utile lorsque vous gérez une boutique en ligne et que vous souhaitez recueillir les commentaires des utilisateurs sans détourner leur attention.
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é permettra aux utilisateurs de se connecter sans chargement de page supplémentaire.
Cela dit, nous allons vous montrer comment créer facilement un formulaire de contact WordPress AJAX 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 📄
- Ressources bonus : Plus de guides sur les formulaires WordPress
Commençons.
Étape 1 : Installer le plugin WPForms
La première chose que vous devez faire est d'installer et d'activer un constructeur de formulaires.
Pour ce tutoriel, nous utiliserons le plugin WPForms. C'est le meilleur constructeur de formulaires de contact WordPress du marché, et il vous permet également 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 sur ce plugin !
Alors, installons et activons WPForms. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
📝 Note : Pour créer un formulaire AJAX, vous aurez besoin de la version Pro du plugin. Mais il existe une version gratuite de WPForms que vous pouvez consulter si vous souhaitez explorer son constructeur par glisser-déposer et ses fonctionnalités de formulaire de base avant de passer à la version supérieure.
Après activation, vous devez visiter la page WPForms » Paramètres pour saisir votre clé de licence.
Après avoir saisi la clé de licence, vous pourrez recevoir des mises à jour automatiques et installer des modules complémentaires.
Vous êtes maintenant prêt à créer de magnifiques formulaires AJAX dans WordPress.
Étape 2 : Créez votre premier formulaire
Créons 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, ici, nous avons nommé notre formulaire « 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, disons que vous souhaitez utiliser WPForms AI. Ensuite, tout ce que vous avez à faire est de lui donner une simple instruction, 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. Survolez la boîte « Formulaire de contact simple » et cliquez sur « Utiliser le modèle ».
Notez que vous pouvez créer tout autre type de formulaire dont vous avez besoin ; le processus est à peu près le même.
WPForms chargera maintenant votre formulaire avec des champs de base déjà ajoutés.
À partir de là, vous pouvez simplement cliquer sur n’importe quel champ de formulaire pour le modifier.
Vous pouvez également ajouter de nouveaux champs de formulaire depuis la colonne de gauche en cliquant simplement 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
WPForms n’active pas la soumission de formulaire AJAX par défaut, vous devrez donc l’activer manuellement pour votre formulaire.
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 ».
Configurer maintenant ce qui se passe après la soumission du 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.
Puisque nous avons activé la fonctionnalité AJAX pour le formulaire, rediriger les utilisateurs vers une autre page irait à l'encontre de l'objectif de création d'un formulaire AJAX.
Vous devez sélectionner l'option de message et modifier le message de confirmation. N'hésitez pas à utiliser la barre d'outils de mise en forme de l'éditeur ou à ajouter un ou deux liens pour indiquer aux utilisateurs où aller ensuite.
Après cela, vous pouvez configurer la manière dont vous souhaitez être notifié d'une soumission de formulaire.
Passez à l'onglet « Notifications » dans les paramètres du formulaire et configurez les paramètres de notification par e-mail.
Une fois que 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 rend très facile l'ajout de formulaires à votre site WordPress, que ce soit dans un article, une page ou des widgets 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 les paramètres du bloc.
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.
Le moyen le plus simple de le faire est de l'exporter 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 facile. Allez simplement dans WPForms » Entrées, sélectionnez votre formulaire, choisissez les options d'exportation et téléchargez vos données sous forme de fichier CSV ou Excel.
Vous souhaitez configurer cela ? Suivez notre guide complet sur comment exporter les entrées de formulaire WordPress en CSV et Excel.
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.