Voulez-vous créer un formulaire de contact AJAX dans WordPress ?

Les formulaires de contact AJAX permettent aux utilisateurs de soumettre le formulaire sans recharger une page. Cela vous permet d'augmenter l'engagement des utilisateurs tout en offrant une meilleure expérience de soumission de formulaire à vos utilisateurs.

Cela est pratique lorsque vous exploitez un site Web de commerce électronique et que vous souhaitez recueillir les commentaires des utilisateurs sans détourner l'attention des utilisateurs.

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.

Dans cet article, nous allons vous montrer comment créer facilement un formulaire de contact WordPress AJAX avec des instructions étape par étape.

Créer un formulaire de contact Ajax dans WordPress

Qu'est-ce qu'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 souvent utilisé dans les formulaires Web permettant aux utilisateurs de soumettre des données de formulaire sans recharger une page. Cela rend la soumission de formulaire facile et rapide, ce qui améliore l'expérience globale de l'utilisateur.

Les applications Web telles que Gmail et Facebook utilisent largement cette technique pour maintenir l'engagement des utilisateurs tout en faisant en sorte que tout fonctionne de manière transparente en arrière-plan.

Vous pouvez également utiliser Ajax pour vos formulaires WordPress. Cela évitera aux utilisateurs de recharger inutilement la page et les maintiendra engagés sur la page qu'ils consultent actuellement.

Cela étant dit, voyons comment créer facilement un formulaire de contact WordPress Ajax en 4 étapes simples.

1. Installez le plug-in WPForms

La première chose que vous devez faire est d'installer et d'activer le WPForms brancher. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

WPForms est le meilleur plugin de création de formulaire WordPress sur le marché. Il vous permet également de créer facilement des formulaires alimentés par Ajax.

Lors de l'activation, vous devez visiter WPForms » Paramètres page pour entrer votre clé de licence.

Clé de licence WPForms

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.

2. Créez votre premier formulaire

Continuons et créons votre premier formulaire.

Visitez simplement WPForms » Ajouter un nouveau page dans la zone d'administration de WordPress. Il vous sera demandé de donner un titre à votre formulaire et de sélectionner un modèle comme point de départ.

Choisir le modèle de formulaire

Pour les besoins de ce tutoriel, nous allons créer un formulaire de contact. Cependant, vous pouvez créer tout autre type de formulaire dont vous avez besoin.

WPForms va maintenant charger votre formulaire avec les champs de base déjà ajoutés. Vous pouvez simplement pointer et cliquer sur n'importe quel champ de formulaire pour le modifier.

Modification des champs de formulaire dans WPForms

Vous pouvez également ajouter n'importe quel nouveau champ de formulaire à partir de la colonne de gauche en cliquant simplement dessus. Le nouveau champ apparaîtra au bas de votre formulaire juste au-dessus du bouton Soumettre.

Cliquez pour ajouter un nouveau champ de formulaire

Vous pouvez facilement faire glisser et déposer des champs de formulaire pour les déplacer de haut en bas dans le formulaire.

Une fois que vous avez terminé de modifier le formulaire, vous pouvez passer à l'étape suivante.

3. Activer la fonction de soumission de formulaire Ajax

WPForms n'active pas la soumission de formulaire Ajax par défaut. Vous devrez l'activer manuellement pour votre formulaire.

Passez simplement à l'onglet Paramètres dans le générateur de formulaires et cochez la case à côté de l'option “Activer la soumission de formulaires AJAX”.

Activer la fonctionnalité de formulaire Ajax

Cocher la case activera la fonctionnalité Ajax pour ce formulaire.

Configurons maintenant ce qui se passe après la soumission du formulaire.

Tout d'abord, passez à l'onglet “Confirmation” dans les paramètres. C'est ici que vous informez vos utilisateurs que vous avez reçu leur soumission de formulaire.

Paramètres de validation

WPForms vous permet de le faire de différentes manières. Par exemple, vous pouvez rediriger les utilisateurs vers une URL, leur montrer une page spécifique ou simplement afficher un message à l'écran.

Puisque nous avons activé la fonctionnalité Ajax pour le formulaire, la redirection des utilisateurs vers une autre page va à 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 lien ou deux pour indiquer aux utilisateurs où aller ensuite.

Après cela, vous pouvez configurer la manière dont vous souhaitez être informé de la soumission d'un formulaire.

Passez à l'onglet Notifications dans les paramètres du formulaire et configurez les paramètres de notification par e-mail.

Paramètres d'e-mail de notification de formulaire

Une fois que vous avez terminé, vous pouvez enregistrer votre formulaire et quitter le générateur de formulaires.

4. Ajoutez votre formulaire activé Ajax dans WordPress

WPForms facilite l'ajout de formulaires dans vos publications, pages et widgets de la barre latérale WordPress.

Modifiez simplement la publication ou la page où vous souhaitez ajouter le formulaire et insérez le bloc WPForms dans votre zone de contenu.

Ajouter le bloc WPForms à la publication ou à la page WordPress

Après cela, vous devez sélectionner le formulaire que vous venez de créer à partir des paramètres du bloc. WPForms chargera immédiatement un aperçu en direct du formulaire dans l'éditeur de contenu.

Sélectionnez votre formulaire

Vous pouvez maintenant enregistrer ou publier votre contenu, puis visiter votre site Web pour tester la fonctionnalité ajax du formulaire.

Aperçu du formulaire de contact Ajax

Vous pouvez également ajouter votre formulaire à un widget de barre latérale dans WordPress. Pour ce faire, rendez-vous sur Apparence » Widgets page et ajoutez le widget WPForms à une barre latérale.

Ajoutez votre formulaire alimenté par ajax à un widget de la barre latérale

Sélectionnez le formulaire que vous avez créé précédemment et cliquez sur le bouton Enregistrer pour stocker les paramètres du widget. Vous pouvez maintenant visiter votre site Web pour voir votre formulaire propulsé par Ajax en action.

Nous espérons que cet article vous a aidé à apprendre à créer un formulaire de contact WordPress Ajax pour votre site Web. Vous pouvez également consulter notre guide sur la création d'une fenêtre contextuelle de formulaire de contact dans WordPress.

Si cet article vous a plu, abonnez-vous à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.