Vous souhaitez simplifier, accélérer et rendre plus conviviale la collecte des paiements sur votre site WordPress ? Grâce au formulaire de paiement multi-étapes de Forminator, créez des formulaires élégants et interactifs qui guident les utilisateurs pas à pas tout au long du processus de paiement. Idéal pour les sites de services, les inscriptions à des cours, les réservations d'événements ou les besoins e-commerce les plus simples.
La version gratuite de Forminator regorge de fonctionnalités puissantes telles que les champs glisser-déposer, les méthodes de paiement dynamiques et les formulaires d'abonnement Stripe, tout en corrigeant les problèmes courants comme le chargement initial du formulaire, les erreurs de calcul, les clés Stripe invalides, le formulaire de connexion utilisateur et l'intégration Google Sheets.
Dans cet article, nous vous expliquerons comment configurer votre propre formulaire de paiement en plusieurs étapes dans WordPress à l'aide de Forminator, et nous mettrons en évidence les correctifs et fonctionnalités clés pour garantir un fonctionnement optimal.
Pourquoi utiliser Forminator pour les formulaires de paiement ?
Forminator est un outil de création de formulaires WordPress puissant et convivial qui simplifie considérablement la création de formulaires de paiement personnalisés, même pour les débutants.
Avec plus de 600 000 installations actives, il est plébiscité par les propriétaires de sites web de tous les secteurs pour tout, de la génération de prospects aux paiements et inscriptions en ligne.
Ce qui distingue Forminator, c'est sa polyvalence. Il offre une vaste gamme de types de formulaires, notamment des formulaires de paiement, d'inscription, de connexion, des sondages, des questionnaires, et bien plus encore.
Plus important encore, il intègre la prise en charge de Stripe et PayPal, ce qui facilite la collecte sécurisée de paiements ponctuels, d'abonnements ou de dons directement via votre site, sans avoir besoin de plugins supplémentaires ni d'intégrations complexes.
Forminator excelle également dans la création de formulaires à plusieurs étapes, vous permettant de diviser les formulaires longs ou complexes en étapes plus courtes et conviviales. Cela améliore non seulement l'expérience utilisateur, mais réduit également le taux d'abandon de formulaire.
Grâce à des fonctionnalités telles que la logique conditionnelle, les indicateurs de progression visuels et les champs de calcul, vous pouvez créer des flux de travail de paiement avancés et adaptés aux besoins de votre entreprise, qu'il s'agisse de réserver des services, de s'inscrire à des cours ou de vendre des produits.
Et comme il s'agit d'une extension gratuite, vous bénéficiez de toutes ces fonctionnalités performantes sans aucun frais initial. Pour les entreprises à la recherche d'une solution simple, flexible et moderne pour créer des formulaires de paiement, Forminator est l'un des meilleurs outils disponibles.
Comparaison: Square vs PayPal
Besoin d'aide pour configurer un formulaire de paiement personnalisé ?
Laissez les experts WordPress de Seahawk créer et optimiser vos formulaires Forminator à plusieurs étapes, entièrement stylisés, sécurisés et adaptés à vos besoins.
Étapes pour créer un formulaire de paiement WordPress à l'aide de Forminator Forms
Avec Forminator, créer une expérience de paiement fluide sur votre site WordPress est plus facile que jamais.
Passons en revue étape par étape le processus de mise en place d'un formulaire de paiement dynamique doté de fonctionnalités avancées et de correctifs essentiels qui améliorent la fonctionnalité, la sécurité et la facilité d'utilisation.
Étape 1 : Installez et activez le plugin Forminator
Avant toute chose, l'installation du plugin Forminator est rapide et simple.
- Rendez-vous sur votre tableau de bord WordPress et accédez à Extensions ⟶ Ajouter.
- Dans la barre de recherche, tapez «Forminator».
- Cliquez sur Installer puis sur Activer.
Forminator est une extension gratuite comptant plus de 600 000 installations actives. Elle bénéficie de mises à jour régulières intégrant des correctifs, notamment pour le tableau de bord de test, la page des paramètres et l'activation manuelle, garantissant ainsi des performances stables. Elle intègre également des correctifs pour la soumission de formulaires et les méthodes API, assurant un traitement backend fluide.
Étape 2 : Créer un nouveau formulaire à partir de zéro
Une fois activé :
- Allez dans Forminator ⟶ Formulaires ⟶ Créer un nouveau.
- Choisissez Formulaire vierge pour partir de zéro ou utilisez l'une des options de correction des modèles de formulaires prévisualisés.
Ajoutez un titre et un sous-titre directement dans l'éditeur de formulaire. Vous pouvez appliquer un style personnalisé ou utiliser une syntaxe CSS correcte pour améliorer son apparence.
Forminator prend en charge les formulaires avancés qui incluent des champs visibles conditionnellement (grâce à la correction de la logique conditionnelle) et différents types de formulaires comme la correction du formulaire d'inscription multisite et la correction du formulaire d'inscription aux cours.
Le générateur de formulaires évite désormais les corrections de structure de tableau obsolètes et comprend de nombreuses améliorations d'accessibilité, garantissant ainsi que vos formulaires sont utilisables et conformes.
Étape 3 : Ajouter des champs de sélection de produits ou de services
Cette étape détermine comment les utilisateurs choisissent ce pour quoi ils paient, qu'il s'agisse de produits, de forfaits ou de services.
Utilisation du champ de sélection (pour plusieurs articles comme les canapés): Ajoutez un champ de sélection pour les options de produit telles que Canapé moderne, Classique ou Fauteuil inclinable.
- Activez les sélections multiples, la tarification et utilisez des formules de champs de calcul pour automatiser les totaux.
- Le formulaire gère désormais la correction du formatage des nombres, la correction des valeurs par défaut et la correction des lignes identiques, ce qui est idéal pour les listes de produits.
Exemple d'utilisation: Un vendeur de meubles peut créer plusieurs formulaires pour différentes catégories et gérer dynamiquement les prix des produits. Ces formulaires permettent d'éviter les problèmes de dysfonctionnement et incluent des fonctionnalités liées au paiement.
Utilisation du champ de bouton radio avec images (pour la sélection visuelle): Utilisez le champ de bouton radio pour permettre aux utilisateurs de sélectionner un produit visuellement.
- Téléchargez des images de produits, comme des tables basses, pour chaque option.
- Définissez une sélection par défaut et utilisez la logique conditionnelle pour les flux dynamiques.
Grâce à la correction apportée à l'interface des onglets et à celle des boîtes d'alerte, les utilisateurs bénéficient désormais d'une interface plus fluide. De plus, la correction des zones de texte enrichies permet d'ajouter des descriptions formatées avec des visuels de produits.
Sélection vs Boutons radio: Utilisez la sélection pour les choix multiples ou en masse avec calculs ; choisissez les boutons radio lorsque la sélection visuelle et la logique de choix unique sont plus importantes.
La version mise à jour de Forminator corrige également des problèmes tels que la correction du champ de paiement PDF, la correction des détails de facturation PayPal, la correction de la connexion à Google Sheets, la validation en ligne des fichiers Google Sheets existants et le téléchargement de fichiers, ce qui en fait une solution robuste pour tout scénario de paiement en ligne.
Restez à l'écoute pour les prochaines étapes, où nous ajouterons des passerelles de paiement, appliquerons une logique conditionnelle et finaliserons votre formulaire de paiement avec des correctifs de chiffrement de clé secrète sécurisée et des fonctionnalités de correction des vulnérabilités de sécurité.
Vous souhaitez une démonstration visuelle ? Regardez cette vidéo explicative étape par étape sur la création d’un formulaire de paiement en plusieurs étapes avec Forminator et découvrez le processus complet en action !
Étape 4 : Collecte des informations client
Une fois que vos utilisateurs ont sélectionné les produits ou services, il est temps de recueillir leurs coordonnées et leurs informations de livraison. Pour une meilleure organisation et une navigation plus fluide, insérez un saut de page afin de séparer la sélection des produits des informations personnelles.
Champs recommandés à ajouter :
- Nom complet : Utilisez le champ Nom (et non un simple champ texte) pour les saisies structurées. Ce champ avancé vous permet d’éviter les problèmes courants de correction de formulaires liés à des noms mal formatés.
- Adresse e-mail avec confirmation : Utilisez l’option de confirmation d’e-mail intégrée. Cela évite les problèmes liés aux données invalides ou incorrectes et améliore la précision de la livraison. Prend également en charge la correction conditionnelle par e-mail.
- Numéro de téléphone : Ajoutez un champ numérique avec la correction de validation internationale activée, garantissant un formatage adapté au pays. Veillez à inclure une correction de formatage du numéro pour éviter les incohérences de données.
- Adresse : Utilisez un champ d’adresse à plusieurs lignes, incluant : rue, ville, état/province, pays, code postal.
- Date et heure de livraison : utilisez les champs de sélection de date et d’heure. Ces champs bénéficient des mêmes corrections de lignes et mises à jour des erreurs de syntaxe CSS afin d’améliorer la mise en page et l’expérience utilisateur.
Ces champs de saisie prennent également en charge la validation en ligne des fichiers téléchargés si les utilisateurs doivent joindre des images (par exemple, une preuve de paiement ou des références de conception).
Étape 5 : Mise en place du recouvrement des paiements
Insérez un autre saut de page pour segmenter clairement le formulaire avant l'étape de paiement. Cela améliore l'expérience utilisateur et réduit les erreurs de pré-soumission dues à une interface utilisateur encombrée.
Ajoutez le champ Paiement (PayPal ou Stripe) : Forminator propose des modes de paiement dynamiques, vous permettant de choisir entre PayPal et Stripe. Sélectionnez celui de votre choix :
- Pour PayPal, Forminator a récemment introduit un correctif concernant les informations de facturation PayPal afin d'en améliorer la précision.
- Pour Stripe, la dernière mise à jour du correctif de chiffrement à clé secrète garantit des transactions sécurisées.
Insérer un champ de calcul: ce champ calcule dynamiquement le prix total de tous les produits/services sélectionnés. Il prend désormais en charge la correction des formules des champs de calcul, ce qui permet d’éviter les totaux erronés dus à une logique incorrecte.
Case à cocher de consentement : Incluez systématiquement une case à cocher avec des conditions générales personnalisées. Ce champ bénéficie de la correction des messages d’erreur par défaut, garantissant ainsi que les utilisateurs savent précisément ce qui est requis.
Connectez votre compte de paiement (PayPal ou Stripe): Accédez à Forminator ⟶ Paramètres ⟶ Paiements et saisissez : ID client et clé secrète
Basculez entre le mode bac à sable pour les tests et le mode production pour les paiements réels. La correction de l'activation manuelle vous permet de changer de mode en toute sécurité sans avoir à ressaisir vos identifiants.
Étape 6 : Configuration des prix et des calculs
Maintenant que vos champs de produit et de paiement sont prêts, il est temps d'attribuer les prix et de configurer la logique de tarification dynamique de votre formulaire.
Mesures:
Activer les calculs sur les champs de produit : accédez à chaque champ (liste déroulante, bouton radio ou case à cocher) et activez l’option « Activer le calcul ». Attribuez des valeurs numériques à chaque option.
Attribuer les prix : Ajoutez des valeurs telles que :
- Canapé moderne: $500
- Canapé classique: $350
- Fauteuil inclinable: $600
Configurer le champ de calcul: ajoutez un champ de calcul. Utilisez le générateur de formules pour additionner les prix des produits sélectionnés. Grâce à l’éditeur de logique mis à jour, vous pouvez désormais corriger les erreurs de données et les problèmes liés à la méthode de soumission Ajax.
Renommez le champ : attribuez au champ de calcul une étiquette claire, telle que « Montant total » ou « À payer immédiatement ». Cela évite toute confusion chez l’utilisateur et permet de corriger les valeurs par défaut pour les champs vides.
Étape 7 : Options de style et de personnalisation
Une fois votre formulaire de paiement WordPress en plusieurs étapes fonctionnel, il est temps de personnaliser son apparence pour une expérience fluide et à votre image.
Dans les paramètres d'apparence de Forminator, choisissez parmi les styles de mise en page tels que Material, Default ou Inherit from Theme. Vous pouvez ensuite peaufiner le design, en personnalisant les polices, les largeurs et les couleurs pour qu'elles correspondent à votre identité visuelle.
De plus, profitez des correctifs d'amélioration de sécurité et des correctifs de sécurité des modules complémentaires Forminator pour vous assurer que le style des formulaires ne compromet pas les performances ou la sécurité.
Enfin, les paramètres de comportement vous permettent de définir ce qui se passe après la soumission du formulaire : un message de remerciement, une correction du rechargement de la page ou une redirection vers une page spécifique.
Étape 8 : Publication du formulaire de paiement en plusieurs étapes
Après avoir créé et personnalisé votre formulaire, publiez-le en copiant le code court généré. Collez-le dans n'importe quelle page WordPress à l'aide d'un bloc de code court. Cliquez sur « Publier » et testez votre formulaire.
Assurez-vous que le formulaire effectue des transitions fluides entre les étapes, que les champs s'affichent correctement (en particulier, corrigez le problème des champs à visibilité conditionnelle) et que le traitement des paiements se déroule sans délai.
De plus, la correction du problème de prévisualisation du formulaire de fermeture garantit une sortie propre du mode aperçu, ce qui contribue à éviter toute confusion lors des tests.
Étape 9 : Conseils supplémentaires et fonctionnalités avancées
Pour optimiser votre formulaire, pensez à utiliser la logique conditionnelle. Par exemple, affichez un champ de livraison uniquement si un produit spécifique est sélectionné ; cette fonctionnalité est facile à gérer grâce à la correction des champs visibles conditionnellement.
Configurez les notifications par e-mail en ajoutant plusieurs destinataires afin d'informer à la fois l'administrateur et l'utilisateur. Vous pouvez suivre les conversions et consulter les soumissions dans le tableau de bord, idéal pour le suivi des données d'utilisation.
De plus, intégrez Forminator à des outils tiers tels que Mailchimp, Slacket Google Sheets.
Si des formulaires ont été importés précédemment mais ne s'affichent pas, les correctifs d'importation et de non-importation garantissent leur affichage correct. Ces intégrations, associées à la création de correctifs prédéfinis et de correctifs pour les pages de rapport, facilitent la surveillance et l'automatisation des flux de travail.
Étape 10 : Aperçu final et tests
Avant la mise en ligne, prévisualisez l'intégralité du formulaire à plusieurs étapes pour vous assurer :
- Transitions fluides entre les étapes
- Cohérence visuelle et réactivité
- Le traitement des paiements fonctionne sans problème
Portez une attention particulière aux modes de paiement sandbox et réel, connectez correctement vos identifiants et testez les deux environnements. Utilisez le correctif de fin de chargement pour vérifier que les chargements de fichiers se terminent correctement et les correctifs de suppression et de dépassement de capacité pour gérer efficacement les limites de taille des fichiers.
Veillez également à ce que les utilisateurs voient un message clair de confirmation d'inscription de compte le cas échéant, et assurez-vous que les correctifs pour formulaires multiples et les correctifs pour la création de formulaires multiples empêchent toute duplication ou chevauchement si vous intégrez plus d'un formulaire sur votre site.
Avec les tests et les corrections appropriés, votre formulaire de paiement WordPress utilisant Forminator sera pleinement fonctionnel, sécurisé et optimisé pour la conversion.
En savoir plus: Comment intégrer une passerelle de paiement sur votre site WordPress
Conclusion
Créer un formulaire de paiement WordPress avec Forminator est non seulement simple, mais aussi extrêmement efficace. Grâce à son éditeur intuitif par glisser-déposer, ses intégrations de paiement intégrées et ses options de champs dynamiques, Forminator permet aux utilisateurs de créer des formulaires multi-étapes entièrement fonctionnels sans écrire une seule ligne de code.
Que vous vendiez quelques produits, preniez des réservations de services ou encaissiez des paiements pour des événements, Forminator est un outil puissant qui s'adapte à vos besoins.
De la gestion des calculs et des sauts de page à la résolution de problèmes courants tels que la correction du rechargement de page, la correction des champs visibles conditionnellement et la correction de la fin du téléchargement, ce plugin offre un moyen convivial de gérer à la fois la création de formulaires et leurs performances.
Alors, si vous êtes prêt à simplifier votre processus de recouvrement des paiements, commencez dès aujourd'hui à expérimenter Forminator !
Besoin d'aide pour configurer un formulaire personnalisé ou envie de découvrir d'autres tutoriels WordPress ? Contactez notre équipe d'experts chez Seahawk et créons ensemble quelque chose de performant.
