Résumé IA
Voulez-vous empêcher une page de se recharger lorsque quelqu'un soumet l'un de vos formulaires en ligne ?
Empêcher une page de se rafraîchir après qu'une personne a soumis un formulaire améliore l'expérience utilisateur et peut même vous aider à obtenir plus de prospects.
Dans cet article
Créer un formulaire de contact AJAX WordPress
Ce tutoriel sur le formulaire de contact AJAX WordPress fonctionnera avec tous les plus de 2 100 modèles de formulaires WordPress inclus avec WPForms.
Remarque : AJAX est automatiquement activé dans les versions les plus récentes de WPForms. Ce tutoriel explique comment l'activer si vous avez utilisé une ancienne version pour créer vos formulaires.
1. Créer un nouveau formulaire
Pour commencer, installez et activez le plugin WPForms. Pour plus de détails, consultez ce tutoriel étape par étape sur comment installer un plugin dans WordPress.
Une fois que vous avez installé le plugin WPForms, allez dans WPForms » Ajouter un nouveau pour créer un nouveau formulaire.
Sélectionnez un modèle dans la liste :
Nous utiliserons le modèle Formulaire de contact simple pour ce tutoriel.
2. Personnaliser votre formulaire
Il est maintenant temps de construire votre formulaire. Vous pouvez facilement personnaliser les champs du formulaire en les faisant glisser du côté gauche du constructeur vers la zone d'aperçu à droite.
Nous ajouterons un champ de téléchargement de fichier à notre formulaire de contact afin que les utilisateurs puissent inclure tous les documents pertinents avec leur soumission.
Ajustez la disposition des champs selon vos préférences en les faisant glisser vers le haut ou vers le bas sur votre formulaire.
Vous pouvez également cliquer sur n'importe quel champ dans la zone d'aperçu pour ouvrir des options supplémentaires. Cela vous permettra de modifier les étiquettes des champs, d'ajouter une logique conditionnelle, et plus encore.
Lorsque vous êtes prêt, cliquez sur le bouton orange Enregistrer dans le coin supérieur droit.
Maintenant que nous avons créé un formulaire avec un champ de téléchargement de fichier, activons-le pour AJAX.
3. Activer les soumissions de formulaire AJAX
Ensuite, sur le côté gauche de votre page, cliquez sur Paramètres. Sélectionnez ensuite la section Général.
En bas du panneau de droite, développez les options Avancé et localisez le paramètre Activer la soumission de formulaire AJAX. Assurez-vous qu'il est activé.
C'est tout ! Votre formulaire est maintenant activé pour les soumissions AJAX.
Configurons quelques autres éléments importants de votre formulaire de contact AJAX.
4. Configurer les notifications de votre formulaire
La prochaine chose à faire est de configurer les notifications par e-mail de votre formulaire. Celles-ci sont un excellent moyen de savoir quand quelqu'un soumet l'un de vos formulaires activés pour AJAX.
Pour commencer, allez dans Paramètres » Notifications.
Sauf si vous désactivez la fonction de notification, vous recevrez une notification par e-mail chaque fois que quelqu'un soumettra votre formulaire AJAX.
Pour obtenir de l'aide sur la configuration de ces paramètres, consultez notre tutoriel sur la façon de configurer les notifications de formulaire dans WordPress.
Cet exemple a un fond gris, mais vous pouvez changer la couleur si vous le souhaitez. Ces ajustements personnalisés peuvent rendre vos notifications par e-mail plus professionnelles et leur donner une touche personnelle. Consultez notre guide sur l'ajout d'un en-tête personnalisé à votre modèle d'e-mail.
5. Configurer vos confirmations
Les confirmations de formulaire vous permettent d'agir immédiatement (et automatiquement) après que votre utilisateur a soumis des informations à votre formulaire.
Il existe 3 types de confirmations dans WPForms :
- Message — C'est le type de confirmation par défaut qui apparaît après que quelqu'un a cliqué sur soumettre dans votre formulaire, et il est personnalisable. Consultez nos conseils sur les façons de personnaliser votre message de confirmation pour améliorer le bonheur de vos visiteurs.
- Page d'affichage — Envoyez automatiquement les utilisateurs vers n'importe quelle page de votre site.
- Redirection — Utile si vous souhaitez rediriger l'utilisateur vers un autre site Web ou une URL spécialisée pour un développement plus complexe.
Pour obtenir de l'aide supplémentaire pour cette étape, consultez notre tutoriel sur la configuration des confirmations de formulaire.
Une fois que vous avez terminé de configurer vos notifications et confirmations, assurez-vous de sauvegarder à nouveau votre formulaire.
6. Intégrer votre formulaire AJAX
Une fois que vous avez terminé de configurer votre formulaire compatible AJAX à votre convenance, vous voudrez l'ajouter à votre site.
WPForms vous permet d'ajouter vos formulaires à plusieurs endroits sur votre site Web, y compris vos pages, vos articles de blog et les widgets de la barre latérale. Examinons l'option de placement la plus courante : l'intégration dans une page ou un article.
Pour commencer, créez une nouvelle page ou un nouvel article dans WordPress, ou ouvrez-en un existant dans l'éditeur.
Après cela, ajoutez un nouveau bloc et sélectionnez l'icône WPForms. Si vous ne la voyez pas immédiatement, vous pouvez la rechercher.
Le widget pratique WPForms apparaîtra dans votre bloc. Cliquez sur le menu déroulant WPForms et choisissez l'un des formulaires que vous avez déjà créés et que vous souhaitez insérer dans votre page. Sélectionnez votre formulaire AJAX.
Ensuite, cliquez sur le bouton bleu en haut à droite qui indique soit Publier, soit Mettre à jour, afin que votre formulaire apparaisse sur votre site Web.
Et voilà. Vous savez maintenant comment créer un formulaire de contact AJAX WordPress simple sans rechargement de page, et vos visiteurs apprécieront encore plus votre site.
Questions fréquemment posées sur les formulaires AJAX
Qu'est-ce qu'un formulaire AJAX ?
Un formulaire compatible AJAX est un formulaire rapide et dynamique qui peut soumettre et exécuter des processus backend sans avoir besoin de rafraîchir toute la page.
Par défaut, une page entière doit être rechargée lorsqu'un utilisateur clique sur soumettre. C'est parce que certains processus doivent s'exécuter, y compris le stockage des données du formulaire, l'envoi d'e-mails de notification, et plus encore.
Mais comme WordPress et WPForms prennent en charge les formulaires AJAX, vous avez la possibilité d'activer les soumissions de formulaires AJAX pour éviter que vos formulaires ne se rafraîchissent après que quelqu'un a soumis le formulaire.
Pourquoi utiliser AJAX sur les formulaires de contact ?
Les formulaires compatibles AJAX sont soudainement devenus un incontournable pour les sites Web de toutes tailles.
Voici les principales raisons pour lesquelles AJAX devient rapidement populaire pour les formulaires de contact :
- Offre une bien meilleure expérience utilisateur.
- Temps de chargement ultra-rapides et augmentation de la vitesse du site WordPress.
- Maintient les modales et les popups contenant votre formulaire ouverts afin que vous puissiez afficher une action ou un message de suivi pour booster les ventes.
- Fournit des indices visuels et l'assurance que le formulaire est en cours de traitement.
Ensuite, créez un formulaire popup WordPress
Maintenant que vous pouvez garder vos popups ouverts après que quelqu'un a soumis, vous voudrez un excellent plugin pour afficher un message ciblé.
- Assurez-vous de lire notre article sur les meilleurs plugins de popup WordPress.
- Découvrez 2 façons différentes de créer un formulaire popup dans WordPress.
- Et enfin, apprenez à créer un popup avec un code promo en utilisant WPForms.
Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.
Si cet article vous a aidé, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.
Merci
J'ai suivi les instructions, mais ça ne fonctionne pas.
lorsque je soumets un formulaire avec une gestion personnalisée, je vois 2 requêtes vers /wp-admin/admin-ajax.php
la première (qui est en fait celle que je déclenche) échoue avec Forbidden (lié au nonce) et je veux en fait déclencher une fonction personnalisée qui traite les données du formulaire.
La seconde réussit, mais elle renvoie la confirmation que je veux ignorer.
Comment puis-je faire cela ? Comment puis-je réaliser un formulaire AJAX avec une gestion client ?
Merci.
Bonjour Eli. Il semble que vous ayez besoin d'une solution personnalisée pour réaliser ce que vous recherchez. Nous vous recommandons de contacter Seahawk qui pourra travailler avec vous sur ce point.