Comment styliser vos formulaires de paiement avec le style de formulaire

Vue d’ensemble

WP Simple Pay inclut une fonctionnalité intégrée de style de formulaire qui vous permet de personnaliser l'apparence de vos formulaires de paiement sur site — aucune personnalisation CSS requise. Choisissez parmi 8 préréglages de thèmes prédéfinis ou ajustez les couleurs, la typographie et les paramètres de mise en page individuels pour correspondre à votre marque.

Les paramètres de style de formulaire sont configurés par formulaire, vous pouvez donc styliser chaque formulaire de paiement indépendamment.

Remarque : Les styles de formulaire s'appliquent uniquement aux formulaires de paiement sur site (types d'affichage intégrés et superposés). Si votre formulaire utilise Stripe Checkout (hors site), ces paramètres ne prendront pas effet. Pour utiliser les styles de formulaire, changez le type de votre formulaire en « Formulaire de paiement sur site » dans l'onglet des paramètres Général.

Prérequis

• WP Simple Pay Pro avec une licence Plus ou supérieure
• Un formulaire de paiement utilisant le type de formulaire sur site (intégré ou superposition)

Accès à l'onglet Style de formulaire

1. Accédez à WP Simple Pay > Formulaires de paiement dans votre administration WordPress.
2. Cliquez sur un formulaire existant pour le modifier, ou créez un nouveau formulaire.
3. Cliquez sur l'onglet Style de formulaire dans l'éditeur de formulaire.

L'onglet Style du formulaire contient quatre sous-onglets : Thèmes, Couleurs, Typographie et Design & Mise en page.

Choisir un préréglage de thème

Les préréglages de thème appliquent instantanément un ensemble de styles coordonnés et complets à votre formulaire. Après avoir appliqué un thème, vous pouvez personnaliser davantage les paramètres individuels dans les autres onglets.

1. Dans l'onglet Style du formulaire, sélectionnez le sous-onglet Thèmes (sélectionné par défaut).
2. Parcourez les thèmes disponibles. Chaque carte de thème affiche un aperçu de la palette de couleurs et un aperçu miniature du formulaire.
3. Cliquez sur une carte de thème pour la sélectionner.
4. Cliquez sur Publier ou Mettre à jour pour enregistrer.

Les thèmes suivants sont disponibles :

Thème	Description	Couleur principale
Défaut	Style par défaut de WP Simple Pay	Sarcelle
Coucher de soleil	Accents rouge chaud avec fond clair	Rouge
Forêt	Thème vert frais avec fond épuré	Vert
Océan	Palette de bleus apaisants	Bleu
Monochrome	Thème simple noir et blanc	Noir
Ensoleillé	Accents jaunes vifs et joyeux	Jaune
Corail	Palette d'oranges chauds	Orange
Minimaliste	Design épuré et minimaliste	Gris

Important : La sélection d'un thème met à jour tous les paramètres de couleur et de style avec les valeurs du thème. Toutes les modifications personnalisées que vous avez apportées aux paramètres individuels seront écrasées.

Personnalisation des couleurs

Cliquez sur le sous-onglet Couleurs pour affiner les paramètres de couleurs individuels. Les couleurs sont organisées en sections.

Couleurs d'arrière-plan

• Arrière-plan du formulaire — Couleur d'arrière-plan de l'ensemble du conteneur du formulaire.
• Arrière-plan des champs — Couleur d'arrière-plan des champs de saisie, des sélections et des listes déroulantes.

Couleurs du texte

• Couleur générale du texte — Couleur par défaut pour tous les éléments de texte du formulaire.
• Couleur du texte des étiquettes — Couleur des étiquettes de champ. Remplace la couleur générale du texte pour les étiquettes uniquement.
• Couleur du texte des champs — Couleur du texte à l'intérieur des champs de saisie. Remplace la couleur générale du texte pour les champs de saisie uniquement.

Couleurs du titre et de la description

• Couleur du titre — Couleur du titre du formulaire. Utilise la couleur générale du texte par défaut si non définie.
• Couleur de la description — Couleur de la description du formulaire. Utilise la couleur générale du texte par défaut si non définie.

Couleurs d'accentuation et de bordure

• Couleur principale (accent) — Utilisée pour les états de mise au point, les surlignages et autres éléments d'accentuation.
• Couleur de la bordure — Couleur de la bordure des champs de saisie et autres éléments bordés.

Couleurs d'état d'erreur

• Couleur de la bordure d'erreur — Couleur de la bordure appliquée aux champs présentant des erreurs de validation.
• Couleur du texte d'erreur — Couleur du texte des messages d'erreur.

Couleurs des boutons

• Arrière-plan du bouton — Couleur d'arrière-plan du bouton de soumission.
• Texte du bouton — Couleur du texte du bouton de soumission.
• Arrière-plan au survol du bouton — Couleur d'arrière-plan lors du survol du bouton de soumission.

Tous les champs de couleur prennent en charge les couleurs hexadécimales (par exemple, #0f8569) et les couleurs rgba avec transparence (par exemple, rgba(15, 133, 105, 0.8)). Cliquez sur l'échantillon de couleur à côté de n'importe quel champ pour ouvrir le sélecteur de couleurs.

Personnalisation de la typographie

Cliquez sur le sous-onglet Typographie pour ajuster les tailles et les graisses des polices.

Typographie des étiquettes

• Taille de police des étiquettes — Taille des étiquettes de champ en pixels. Par défaut : 14px.
• Graisse de police des étiquettes — Graisse des étiquettes de champ. Options : Normal, Gras ou valeurs numériques (100–900).

Typographie des champs

• Taille de police des champs — Taille du texte à l'intérieur des champs de saisie en pixels. Par défaut : 16px.

Typographie du titre et de la description

• Taille de police du titre — Taille du titre du formulaire en pixels. Par défaut : 24px.
• Graisse de police du titre — Graisse du titre du formulaire. Options : Normal, Gras ou valeurs numériques (100-900).
• Taille de police de la description — Taille de la description du formulaire en pixels. Par défaut : 16px.
• Graisse de police de la description — Graisse de la description du formulaire. Options : Normal, Gras ou valeurs numériques (100-900).

Personnalisation du design et de la mise en page

Cliquez sur l'onglet secondaire Design et mise en page pour ajuster les paramètres d'espacement et de rayon des bordures.

Rayon des bordures

• Rayon des bordures du formulaire — Contrôle l'arrondi des coins du conteneur du formulaire, en pixels. Définissez sur 0 pour des coins carrés.
• Rayon des bordures des champs et des boutons — Contrôle l'arrondi des coins des champs de saisie et des boutons, en pixels.

Un aperçu en direct à côté de chaque paramètre montre l'effet de la valeur actuelle.

Espacement

• Marge intérieure du formulaire — Contrôle l'espacement interne (marge intérieure) du conteneur du formulaire, en pixels.

Rétablir les styles par défaut

Pour rétablir tous les paramètres de style à leurs valeurs par défaut :

1. Dans l'onglet Style du formulaire, faites défiler jusqu'en bas de n'importe quel onglet secondaire.
2. Cliquez sur le bouton Rétablir les styles.
3. Confirmez le rétablissement lorsque vous y êtes invité.
4. Cliquez sur Publier ou Mettre à jour pour enregistrer le formulaire.

Cela rétablit tous les paramètres de couleur, de typographie et de mise en page. Cela ne modifie pas le thème sélectionné.

Questions fréquemment posées

Pourquoi ne vois-je pas l'onglet Style du formulaire ?

L'onglet Style du formulaire nécessite une licence Plus ou supérieure. Si vous avez une licence Personnel, vous verrez une invite de mise à niveau à la place.

Pourquoi y a-t-il un avertissement concernant les formulaires hors site ?

Les styles de formulaire s'appliquent uniquement aux formulaires de paiement sur site. Si votre formulaire est configuré pour utiliser Stripe Checkout (hors site), les paramètres de style du formulaire n'auront aucun effet. Changez le type de formulaire en « Formulaire de paiement sur site » dans l'onglet Général de l'éditeur de formulaire.

Puis-je utiliser des styles différents pour chaque formulaire ?

Oui. Les paramètres de style du formulaire sont enregistrés par formulaire, de sorte que chaque formulaire de paiement peut avoir son propre style unique.

Les styles de formulaire fonctionnent-ils avec les formulaires superposés (modales) ?

Oui. Les styles de formulaire s'appliquent aux formulaires intégrés et aux formulaires superposés/modales. Pour les formulaires superposés, la couleur d'arrière-plan du formulaire contrôle l'arrière-plan de la zone de contenu de la modale.

Puis-je toujours utiliser du CSS personnalisé en plus du style de formulaire ?

Oui. Le CSS personnalisé sera appliqué par-dessus les paramètres de style du formulaire.

Les styles de formulaire affectent-ils l'aperçu du bloc Gutenberg ?

Oui. Lorsque vous insérez un formulaire de paiement à l'aide du bloc WP Simple Pay dans l'éditeur de blocs, l'aperçu du bloc reflète les paramètres de style actuels du formulaire.

Que se passe-t-il si je laisse un champ de couleur vide ?

Les champs vides héritent de valeurs par défaut raisonnables. Par exemple, les couleurs du texte des étiquettes et des champs de saisie reviennent à la couleur de texte générale. Les couleurs des boutons reviennent à la couleur principale du thème.

Et ensuite ?

• Référence des paramètres de style du formulaire – Référence complète de chaque paramètre et de sa valeur par défaut
• Types d’affichage des méthodes de paiement – Choisissez entre les mises en page à onglets et accordéons