Voulez-vous empêcher votre page de se rafraîchir lorsqu'un visiteur soumet un formulaire ? Par défaut, la page entière se recharge lorsque vous cliquez sur le bouton de soumission du formulaire. Et c'est à ce moment-là que les données saisies dans le formulaire sont transférées et stockées sur le serveur.
Dans cet article, nous allons vous montrer comment activer la soumission Ajax sur vos formulaires WordPress et empêcher la page de se recharger.
Pourquoi activer la soumission de formulaire Ajax dans WordPress
La soumission de formulaire Ajax est particulièrement utile si vous souhaitez intégrer un formulaire dans une fenêtre modale. Sans la soumission de formulaire Ajax activée, la page entière devrait se recharger, entraînant la fermeture de la fenêtre modale. Ainsi, les utilisateurs pourraient manquer le message de confirmation important qui les maintient engagés.
Avec la soumission de formulaire Ajax activée, vos utilisateurs pourraient voir le message de confirmation après la soumission du formulaire sur la même page sans rechargement.
Pour activer la soumission de formulaire Ajax sur votre site WordPress, nous vous recommandons WPForms, le meilleur plugin de formulaire pour WordPress.
Étape 1 : Créer un nouveau formulaire
Pour commencer à créer votre formulaire, vous devrez d'abord installer le plugin WPForms sur votre site Web WordPress.
Vous ne savez pas comment faire ? Pas de problème. Vous pouvez consulter notre guide sur comment installer un plugin WordPress pour régler tout cela.
Une fois le plugin installé et activé, allez dans votre tableau de bord WordPress et naviguez vers WPForms » Ajouter un nouveau. Vous serez maintenant redirigé vers une page où vous pourrez sélectionner un modèle pour votre formulaire.
WPForms propose plusieurs modèles de formulaires parmi lesquels choisir. Sélectionnons le modèle Formulaire de téléchargement de fichiers pour ce tutoriel. Vous pourriez également travailler avec le modèle Formulaire de contact simple.
Vous verrez maintenant le constructeur de formulaires à l'écran. Sur le côté gauche de votre écran, vous avez les onglets Ajouter des champs et Options du champ. Vous pouvez utiliser ces onglets pour configurer votre formulaire de contact.
Si vous utilisez le modèle de téléchargement de fichiers, le champ sera déjà ajouté à votre formulaire. Si vous souhaitez ajouter le champ à tout autre modèle, il vous suffit de faire glisser le champ de formulaire Téléchargement de fichiers et de le déposer à la position souhaitée dans le constructeur de formulaires.
Ainsi, WPForms vous permet d'ajouter facilement des champs à votre formulaire par glisser-déposer. Vous pouvez également modifier la position des champs en les faisant glisser. Si vous souhaitez supprimer un champ, c'est aussi facile. Survolez simplement votre curseur sur le champ indésirable et cliquez sur l'icône supprimer qui apparaîtra en haut à droite du champ.
Sous l'onglet Options du champ, vous pouvez modifier l'étiquette du champ, changer le format du champ de nom, modifier la taille de la police et activer ou désactiver les étiquettes et les sous-étiquettes. Vous avez également la possibilité d'activer l'option logique conditionnelle.
Une fois que vous avez terminé de créer votre formulaire avec le constructeur de formulaires, cliquez sur le bouton enregistrer, afin que vos modifications restent intactes.
Étape 3 : Activer la soumission de formulaire Ajax
Une fois vos modifications enregistrées, cliquez sur l'onglet Paramètres sur le côté gauche de votre constructeur de pages. Vous verrez plusieurs options ici. Allez à l'option Général. En dessous, vous verrez un certain nombre de champs. Ici, vous pouvez modifier le nom de votre formulaire, ajouter une description de formulaire, modifier le texte du bouton, etc.
Si vous faites défiler plus bas sur l'écran, vous verrez quelques cases à cocher. Vous pouvez sélectionner la case à cocher qui dit Activer la soumission de formulaire Ajax. Terminez le processus en cliquant sur le bouton Enregistrer dans le coin supérieur droit de votre écran.
Allez maintenant à l'onglet Notification sous l'onglet Général. Cette option vous notifiera chaque fois que quelqu'un soumettra votre formulaire. Donc, dans le 1er champ, entrez l'adresse e-mail de l'administrateur ou de la personne responsable de la réception des e-mails. Vous pouvez également entrer l'objet de l'e-mail, le nom de l'expéditeur, l'adresse du destinataire et un message de votre choix.
Une fois terminé, assurez-vous d'enregistrer les modifications. Vous pouvez également définir un message de confirmation que les visiteurs recevront après avoir cliqué sur le bouton de soumission.
Étape 4 : Publier votre formulaire avec soumission Ajax
La dernière étape consiste à publier votre formulaire avec soumission Ajax activée sur votre site Web. Pour ce faire, allez sur la page où vous souhaitez que le formulaire apparaisse.
Vous pouvez commencer par aller dans Pages » Ajouter sur votre tableau de bord WordPress. Ajoutez maintenant un titre à votre page. Dans l'éditeur de texte de votre page, ajoutez un nouveau bloc et recherchez WPForms.
Lorsque vous ajoutez le bloc, vous verrez la mascotte WPForms avec un menu déroulant pour choisir le formulaire que vous venez de créer.
Sélectionnez votre formulaire préféré et un Aperçu de votre formulaire s'affichera sur votre page.
Vous pouvez également ajouter le formulaire dans l'éditeur classique en utilisant le bouton « Ajouter un formulaire », comme ceci :
Vous pouvez ensuite cliquer sur le bouton Publier pour mettre le formulaire en ligne.
C'était facile, n'est-ce pas ?
Vous voudrez peut-être maintenant suivre le nombre de clics sur les boutons que votre formulaire de contact reçoit. Pour ce faire, consultez notre guide sur le suivi des liens et des clics sur les boutons.
Commentaires Laisser une réponse