Comment créer un formulaire de devis WordPress avec paiements Stripe

Commencez dans l’écran des formulaires du plugin et ouvrez l’assistant IA. Décrivez le modèle économique, les packages, les champs nécessaires et l’intention de paiement. Pour cet exemple, le prompt demande un formulaire de devis de projet web qui vend des packages de sites en ligne.

Le but n’est pas de publier le résultat de l’IA à l’aveugle. Utilisez-le pour obtenir plus vite un premier brouillon structuré : sélection de package, services optionnels, champs de contact, récapitulatif final et étape de paiement.

Après la génération, examinez le constructeur avant de toucher aux réglages de paiement. La première version doit déjà contenir les grandes étapes du parcours acheteur : choix du package, détails du projet, options, coordonnées et paiement.

Renommez les libellés, supprimez les questions inutiles et faites correspondre le formulaire à une offre claire. Un formulaire de devis Stripe convertit mieux quand le visiteur comprend exactement ce qu’il réserve ou paie.

Revenez à la liste des formulaires et confirmez que le nouveau formulaire est enregistré sous un nom reconnaissable. C’est important quand le site comporte plusieurs formulaires de devis, démos ou calculateurs spécifiques aux clients.

Pour l’exemple de l’article, le formulaire s’appelle Devis & Acompte de Projet Web afin que l’objet du paiement reste clair dans l’administration.

Rouvrez le constructeur et confirmez que le parcours client est logique. Un bon formulaire de devis-vers-paiement ne doit pas demander le paiement avant que le visiteur ait compris l’offre et le total.

Dans cet exemple, les choix de package et d’options viennent d’abord, puis l’étape de méthode de paiement apparaît après le calcul du total, et le récapitulatif final apparaît avant l’ouverture de la modale Stripe.

Ouvrez les réglages du formulaire, puis allez dans Paiement et l’onglet Stripe. Activez Utiliser le paiement Stripe, utilisez d’abord le mode sandbox ou test, collez les clés Stripe publiable et secrète de test, choisissez la devise et définissez l’option Montant à payer.

Pour ce tutoriel, Montant à payer est réglé sur Pourcentage du prix total avec 30 dans le champ pourcentage. C’est utile pour les acomptes, car le client peut réserver le projet sans payer toute l’estimation d’avance.

Créez ou modifiez la page WordPress qui hébergera le formulaire de devis. Pour un tunnel de devis concentré, intégrez le formulaire en mode plein écran afin que l’expérience acheteur ne soit pas en concurrence visuelle avec le thème environnant.

Utilisez le shortcode du formulaire et ajoutez l’attribut fullscreen.

Ouvrez la page publique et démarrez comme un visiteur normal. Le premier écran doit rendre l’offre évidente et ne pas ressembler à un formulaire de contact générique.

Pour un formulaire de devis de site web, les noms et prix des packages doivent être visibles avant les questions optionnelles. Cela donne au visiteur assez de contexte pour continuer.

Choisissez un package et confirmez que le total en direct se met à jour immédiatement. C’est l’avantage clé d’un formulaire de devis par rapport à un formulaire de contact normal : l’acheteur voit la conséquence tarifaire de chaque choix.

Si le total ne correspond pas aux attentes, corrigez les prix des éléments du formulaire avant de tester Stripe. Les réglages de paiement doivent être la dernière couche, pas un contournement d’une logique de devis incorrecte.

Continuez jusqu’à l’étape de méthode de paiement et confirmez que l’option de paiement par carte sécurisée apparaît après le calcul du devis. Dans cet exemple, le formulaire affiche toujours le total complet du devis de 2 400 $ à cette étape.

La règle des 30 % s’applique à l’ouverture de la modale Stripe, où l’acompte dû est de 720 $. Cette séparation est importante : le total du formulaire reste le total du devis, tandis que Stripe reçoit le Montant à payer configuré.

Avant d’ouvrir la modale Stripe, examinez le récapitulatif final. Un bon récapitulatif aide le client à comprendre ce qu’il a choisi et donne à l’entreprise un enregistrement de lead ou de commande plus propre.

Assurez-vous que les champs de contact obligatoires sont remplis et que les lignes du récapitulatif reflètent les mêmes choix et prix affichés plus tôt dans le formulaire.

Cliquez sur le bouton de paiement Stripe et confirmez que la modale Stripe sécurisée s’ouvre. Dans cette démo, la modale affiche un acompte de 720 $ issu de la règle des 30 %. Les données de carte doivent être gérées par Stripe, pas par des champs de formulaire ordinaires.

Utilisez uniquement des cartes de test Stripe en mode test. Après un test interne réussi, vérifiez les e-mails de confirmation, les enregistrements de commande, les événements analytics et la formulation d’acompte ou de remboursement avant de passer le formulaire aux clés Stripe de production.