Comment utiliser le bloc de formulaire de paiement

Temps de lecture : 4 minutes | Difficulté : Débutant

Vue d’ensemble

Le bloc WP Simple Pay – Formulaire de paiement est la méthode recommandée pour insérer un formulaire de paiement dans un article ou une page Gutenberg. Il fournit un aperçu en direct du formulaire dans l'éditeur, expose les options d'affichage dans la barre latérale du bloc et rend le même formulaire sur la page qu'un client verrait — sans que vous ayez jamais besoin de copier un shortcode.

Le bloc est fonctionnellement équivalent au shortcode mais est plus facile à trouver et fournit des aperçus d'éditeur qui reflètent les paramètres actuels de Style du formulaire.

Prérequis

• WP Simple Pay (tous niveaux — le bloc est fourni avec le plugin gratuit)
• Un site WordPress exécutant l'éditeur de blocs (Gutenberg)
• Au moins un formulaire de paiement publié

Étape 1 : Insérer le bloc

1. Modifiez l'article ou la page où vous souhaitez que le formulaire apparaisse.
2. Cliquez sur l'outil d'insertion de bloc +.
3. Recherchez WP Simple Pay ou Formulaire de paiement.
4. Cliquez sur le bloc WP Simple Pay – Formulaire de paiement.

Un espace réservé apparaît vous invitant à sélectionner un formulaire.

Étape 2 : Choisir un formulaire

Utilisez le menu déroulant dans l'espace réservé du bloc pour choisir le formulaire de paiement publié à afficher. Une fois sélectionné, le bloc remplace l'espace réservé par un aperçu en direct du formulaire, y compris le titre, la description, les champs et le bouton de soumission — stylisé avec les paramètres de Style du formulaire actuels.

Si vous modifiez le Style du formulaire après avoir inséré le bloc, l'aperçu se met à jour la prochaine fois que vous rechargez l'éditeur.

Étape 3 : Configurer les options d'affichage

Avec le bloc sélectionné, la barre latérale des paramètres du bloc à droite expose deux bascules :

• Afficher le titre — Lorsqu'il est activé (par défaut), affiche le titre du formulaire au-dessus des champs. Désactivez pour masquer le titre — utile lorsque la page environnante a déjà un titre.
• Afficher la description — Lorsqu'il est activé (par défaut), affiche le texte de description du formulaire au-dessus des champs. Désactivez pour les mises en page compactes.

Si vous désactivez les deux, le conteneur du titre/de la description est entièrement supprimé, il n'y a donc pas d'espace blanc résiduel.

Le bloc prend également en charge l'Alignement centré via la barre d'outils standard du bloc. Lorsqu'il est centré, le formulaire, le titre intégré et le bouton de soumission sont centrés horizontalement dans la largeur du contenu de la page et la zone de titre est limitée à une largeur maximale de 400px.

Étape 4 : Publier et prévisualiser

Enregistrez ou publiez la page. Visualisez-la sur le frontend pour voir le formulaire dans son état rendu. Le bloc utilise le même pipeline de rendu que le shortcode, le comportement sur le frontend est donc identique.

Bloc vs Shortcode

	Bloc	Shortcode
Aperçu de l'éditeur	En direct, stylisé	Aucun — juste un espace réservé
Afficher les bascules	Cases à cocher de l'interface utilisateur	Modifier manuellement les attributs du shortcode
Alignement	Barre d'outils du bloc	Encapsuler dans HTML/CSS
Fonctionne dans l'éditeur classique	Non	Oui
Fonctionne dans les widgets	Oui (widgets de bloc)	Oui
Fonctionne dans les constructeurs de pages	Dépend du constructeur	Oui (universel)

Quand utiliser le bloc : Articles et pages Gutenberg modernes, modèles FSE, widgets basés sur des blocs.

Quand utiliser le shortcode : Éditeur classique, constructeurs de pages sans prise en charge native des blocs, modèles de thèmes personnalisés où vous appelez do_shortcode() directement.

Questions fréquemment posées

L'aperçu du formulaire s'affiche mais les clients ne peuvent pas payer — pourquoi ?

Le bloc rend le même formulaire pour l'aperçu de l'éditeur que pour les visiteurs. Si l'aperçu affiche le formulaire mais que les soumissions échouent, le problème vient de la configuration du formulaire elle-même (méthode de paiement manquante, clés Stripe invalides, champ obligatoire manquant) plutôt que du bloc. Vérifiez WP Simple Pay > Formulaires de paiement et les onglets Général/Paiement du formulaire.

Puis-je utiliser plusieurs blocs de formulaire de paiement sur la même page ?

Oui — chaque bloc peut afficher un formulaire différent. Les ressources frontend du plugin sont suffisamment intelligentes pour gérer plusieurs formulaires sur la même page sans conflit.

Pourquoi l'aperçu de l'éditeur ne correspond-il pas à ce que je vois sur le frontend ?

L'aperçu de l'éditeur reflète l'état enregistré du formulaire au moment du chargement de l'éditeur. Si vous avez apporté des modifications au formulaire dans un autre onglet, enregistrez/actualisez l'éditeur pour les voir. Le frontend affiche toujours la dernière version enregistrée.

Le bloc fonctionne-t-il dans les modèles d'édition complète du site (FSE) ?

Oui. Le bloc peut être inséré dans tout contexte compatible avec les blocs, y compris les modèles FSE, les parties de modèle et les blocs/motifs réutilisables.

Puis-je styliser le formulaire intégré indépendamment par page ?

Le style du formulaire est par formulaire, pas par bloc. Pour utiliser différents styles sur différentes pages, créez plusieurs formulaires et insérez le bloc approprié sur chaque page.

Quelle est la différence entre ceci et le bloc Bouton WP Simple Pay ?

Le bloc Formulaire de paiement intègre l'intégralité du formulaire en ligne. Le bloc Bouton affiche uniquement un bouton qui ouvre le formulaire dans une superposition (modale) lorsqu'il est cliqué — utile pour les pages de destination où vous souhaitez un appel à l'action clair plutôt qu'un formulaire visible. Voir Comment utiliser le bloc de bouton de paiement.

Et ensuite ?

• Comment styliser vos formulaires de paiement avec le style de formulaire – Personnalisez l'apparence du formulaire intégré
• Comment utiliser le bloc Gérer les abonnements – Laissez les abonnés gérer leurs plans
• Comment configurer les paramètres généraux d'un formulaire de paiement – Configurez le formulaire lui-même