Les formulaires de paiement simplifient l'acceptation des paiements en ligne avec Stripe et PayPal. Acceptez les paiements et les dons en quelques minutes. Vendez des produits, des services, des cours en ligne et bien plus encore.
Vous pouvez facilement créer une page de paiement ou de don sur votre site web page accepter un don ou un paiement unique en utilisant le Paiement & Don .
Il vous donne également la possibilité de configurer les champs de formulaire que vous souhaitez dans votre formulaire et vous permet de spécifier une adresse e-mail à laquelle les données de formulaire collectées sont envoyées par e-mail.
Toutes les données du formulaire sont également stockées et sont accessibles dans le Paramètres > Soumissions de formulaires partie de l'atelier. Apprendre encore plus.
Dans cet article :
- Ajouter une section à une page
- Contenu
- Mise En Page
- Style
- Paramètres
- Notification par email
- Paiements par chèque et méthodes de paiement
- Exemple en direct
Ajouter une section de paiement et de don
- Une section peut être ajoutée à une page. Vous pouvez soit ajouter une section à une page déjà existante, soit créer une nouvelle page au sein de votre site Web.
- Sur ta page, Cliquez sur le bleu + icône ajouter un Nouvelle section à votre page.

- Vous verrez maintenant le catégories de rubriques sur le côté gauche.
- Choisissez le Formulaires (1) catégorie et cliquez sur le Paiement et dons onglet (2) où vous pouvez choisir différentes mises en page du système Paiement et dons (3) partie.

- Choisissez n'importe quelle disposition de section et cliquez dessus pour l'ajouter à votre page.
Gérer le formulaire de paiement
- Cliquez sur Modifier le contenu (1) bouton.

- Vous aurez la possibilité de gérer Contenu (2), Mise En Page (3), Style (4), Paramètres (5), et Notifications par courriel (6).
- Frappé Enregistrer (7) pour appliquer les modifications au formulaire.

Contenu
Gérer les champs de formulaire
Sous Gérer les champs du formulaire, vous pouvez spécifier les champs que vous souhaitez que les visiteurs remplissent dans ce formulaire.
- Cliquez sur Ajouter un nouveau champ (1) bouton pour ajouter plus de champs à votre formulaire.
- Modifier ou supprimer (2) un champ déjà ajouté.
- Glisser et déposer (3) les champs pour changer leur séquence dans le formulaire.
- Mettez le Étiquette du bouton d'appel à l'action (4) pour le formulaire.

- En cliquant sur le + Ajouter un champ une fenêtre contextuelle s'ouvrira à partir de laquelle vous pourrez choisir vos champs de formulaire.

- Capturez le Le nom de votre client.
- Capturez toutes les petites informations via le Texte court champ.
- Capturez toute information/message élaboré via le Texte long champ.
- Capturez le en nous envoyant un mail de votre client.
- Capturez n'importe quel informations numériques de votre client.
- Ajouter des services parmi lesquels choisir dans un déroulante façon.
- Sélection unique : Ajoutez une sélection radio pour vos services.
- Sélection multiple : Ajoutez un champ de case à cocher pour plusieurs sélections.
- Ajouter un sélecteur de date afin que vos clients puissent choisir une date pour n'importe quel événement.
- Ajouter un en ligne entre les champs du formulaire.
- Capturez le propos de votre client.
- Capturez le site de votre client.
- Capturez le Téléphone nombre de votre client.
- Ajouter un Paisible afin que vos clients puissent spécifier eux-mêmes l'heure de l'événement.
- Ajouter un séparateur entre les champs du formulaire.
- Le champ de consentement L'option peut être utilisée pour obtenir des autorisations pour les newsletters, en acceptant la confidentialité et les conditions d'utilisation.
- Prenez les avis des clients en utilisant le étoile en échelon, échelle de nombres et échelle de smiley.
Style de forme
- Afficher le formulaire sous forme de fenêtre contextuelle – Activez cette option pour ouvrir le formulaire dans une fenêtre contextuelle en cliquant sur le bouton d'appel à l'action.
- Étiquette du bouton d'appel à l'action – Réglez le Étiquette du bouton d'appel à l'action pour le formulaire.
- Pop-up d'en-tête – Précisez le formulaire Titre, si seulement.

- Télécharger ou supprimer (1) l'image du formulaire.
- Ajouter un Objet (2), et Description (3) pour le formulaire. Avant d'ajouter la description, vérifiez ceci. .

Headline
- Headline – Précisez le Titre de la section (1) pour la section Formulaire de paiement.
- Boutons et icônes – En savoir plus sur Boutons et icônes (2).

Gestion de la mise en page
- Cliquez sur le Modifier le contenu (1) bouton.

- Choisissez le Mise En Page (2) onglet.
- Sélectionnez le disposition pour votre section (3) et Enregistrer (4) les changements.

Options de style
- Cliquez sur Modifier le contenu (1) bouton.

- Choisissez le Style (2) onglet.
- Modifiez le style des éléments de section et Enregistrer (3) vos modifications.

La mise en forme de l'interface est un aspect important pour créer une expérience visuellement attrayante et conviviale.
Vous aurez plusieurs options de style pour la section :
- Champs de formulaire
- Alignement
- Texte
- espacement
- Headline
- Images
- Bordure d'image
- Bouton contextuel
- Bouton de formulaire
- Boutons de titre
- Icônes sociales en titre
Champs de formulaire
Pixpa permet Vous à solution personnaliser le apparence of votre Formulaire champs. Ces styliser Options vous inscrire à tous contribution des champs in votre Paiement Forme et vous donner Vous plus grand des bactéries plus de how votre Formulaire regards et feels on votre en ligne.

- Forme: Choisissez la forme de vos champs de saisie (rectangle, arrondi, pilule ou texte) pour qu'elle corresponde à l'esthétique de votre site Web.
- Remplir: Activez cette bascule pour appliquer une couleur de remplissage d'arrière-plan à vos champs de formulaire.
- Couleur de base: Définissez la couleur d'arrière-plan des champs lorsque l'option de remplissage est activée.
- Aperçu: Activez ou désactivez la bordure (contour) pour chaque champ.
- Couleur du contour: Choisissez la couleur de la bordure du champ lorsque le contour est activé.
- Couleur du texte du champ : Définissez la couleur du texte saisi par les utilisateurs dans les champs du formulaire.
- La taille: Ajustez la hauteur de vos champs en choisissant parmi : Petit, Moyen, Grand ou Très Grand.
- Étiquettes: Choisissez si les étiquettes des champs de formulaire apparaissent à l'intérieur ou à l'extérieur du champ.
- Couleur de l'étiquette: Définissez la couleur des étiquettes lorsqu'elles sont placées en dehors du champ.
- Couleur intérieure de l'étiquette: Définissez la couleur des étiquettes placées à l'intérieur du champ (utile pour les étiquettes de style espace réservé).
- Espacement entre les champs : Utilisez le curseur pour définir l’espacement vertical (en pixels) entre chaque champ de formulaire.

Alignement
- Gérez l'alignement du contenu du formulaire horizontalement à partir de Alignement horizontal (1).
- Gérer verticalement l'alignement du contenu du formulaire à partir de Alignement vertical (2).

Texte
- Cliquez sur le Modifier le style de texte (1) bouton pour visiter le Design section et gérer vos tailles et styles de police.
- Spécifie le Objet (2) style de police du formulaire.
- Spécifie le Description (3) style de police du formulaire.

espacement
- Spécifie le Largeur de l'image (1) de l'image sous la forme en pourcentage.
- Spécifie le Espace entre l'image et le texte (3) en pourcentage.
- Spécifie le Espace sous le titre (4) en pourcentage.

Headline
- Aligner horizontalement le texte du titre de la section. Vous pouvez le définir à gauche, au centre et à droite.
- Activer/désactiver le Cloison entre le titre de la section et le contenu de la section.
- Mettez le épaisseur du diviseur (en px).
- Spécifie le Couleur du séparateur du sélecteur de couleurs.
- Choisissez un Style de séparation de la liste déroulante.
- Mettez le Largeur du titre pour définir la largeur du titre de la section, à partir d'un minimum de 50 %.
- Spécifie le Espace sous le titre dans la section (en px).

Images
- Recadrage de l'image: Choisissez le Image pour les éléments de la liste. Vous pouvez définir les images comme Carré, Cercle, Horizontal, Portrait et Original.
- Rayon d'angle: Choisissez d'avoir un rayon d'angle commun ou un rayon d'angle différent pour chaque côté des éléments de la liste et définissez un nombre (en px) pour le CRayon du coin des images des éléments de la liste. En savoir plus.
- Animation de survol : Choisissez d' Animer l'image de la section au survol en activant la bascule. Vérifiez cette fonctionnalité sur une page en direct.
- Style d'animation : Choisissez un Style d'animation pour l'image lorsque le curseur survole celle-ci.
- Masque de forme : Activez cette option pour appliquer un masque de forme aux images de la section Liste d'images. Une fois activée, la forme sélectionnée s'ajustera visuellement à l'image.
- Sélectionnez la forme : Choisissez parmi différentes formes prédéfinies pour vos images. Vous pouvez ainsi personnaliser votre contenu de manière créative en affichant des images sous des formes uniques, comme arrondies, en losange, en goutte, etc.

- Si vous avez choisi des coins divisés, vous pouvez définir un rayon de coin différent pour chaque coin.

Bordure d'image
- Activer/Désactiver la bordure autour de l'image en commutant la bascule.
- Choisissez d'avoir un frontière commune sur tous les côtés de l'image ou vous pouvez spécifier le frontières séparément pour chaque côté.
- Spécifie le largeur de la frontière. S'il est défini sur 0, la bordure n'apparaîtra pas. Vous avez également la possibilité de définir la largeur de la bordure individuellement pour chaque côté de l'image.
- Sélectionnez le Couleur de la bordure du sélecteur de couleurs.
- Sélectionnez un préféré Style de bordure de la liste déroulante.
- Détermine le largeur de bordure pour mobile appareils, en l'alignant sur la largeur choisie pour le bureau.

Bouton contextuel
Ces options de style concernent le bouton contextuel, où le formulaire de paiement s'ouvrira lorsque le bouton sera cliqué.
- Taille du bouton – Sélectionnez la taille du bouton parmi des options telles que petit, moyen ou grand.
- Espace au-dessus du bouton – Ajustez l'espacement vertical au-dessus du bouton (en pourcentage).
- Style de bouton – Choisissez le style du bouton, par exemple par défaut ou personnalisé.
- Couleur du bouton - Sélectionnez le style de couleur du bouton. Les options incluent « Par défaut », « Inverser » ou « Personnaliser ».
- Texte du bouton – Personnalisez la couleur du texte du bouton.
- Arrière-plan du bouton – Sélectionnez la couleur d'arrière-plan du bouton.

Bouton de formulaire
Ces paramètres permettent de personnaliser le bouton de soumission du formulaire pour qu'il corresponde à la conception et à la mise en page de la page.
- Taille du bouton – Sélectionnez la taille du bouton (petit, moyen ou grand).
- Espace au-dessus du bouton – Ajustez l'espacement vertical au-dessus du bouton (spécifié en pourcentage).
- Style de bouton – Choisissez le style général du bouton, par exemple Par défaut ou Personnalisé.
- Couleur du bouton - Définissez le style de couleur du bouton. Les options incluent « Par défaut », « Inverser » ou « Personnaliser ».
- Texte du bouton – Personnalisez la couleur du texte affiché sur le bouton.
- Arrière-plan du bouton – Sélectionnez une couleur d’arrière-plan pour le bouton.
- Alignement des boutons – Choisissez l'alignement du bouton (gauche, centre ou droite).
- Largeur du bouton – Ajustez la largeur du bouton. Les options incluent : Par défaut, Grand, Très grand ou Pleine largeur.

Boutons de titre
Ces paramètres contrôlent l'apparence et l'espacement des boutons placés avec le titre de la section.
- Taille du bouton – Sélectionnez la taille globale des boutons (petit, moyen ou grand).
- Espace entre les boutons – Ajustez l'espacement entre plusieurs boutons (mesuré en vw).
- Espace au-dessus des boutons – Définissez l'espacement vertical au-dessus des boutons (mesuré en pourcentage).
- Largeur du bouton – Choisissez la largeur des boutons. Les options incluent : Par défaut, Grand, Très grand et Pleine largeur.
- Taille du lien texte – Spécifiez la taille de police des liens texte associés aux boutons (mesurée en px).
- Taille du bouton d'image – Ajustez la taille des boutons basés sur l'image (mesurée en px).

Icônes sociales en titre
Affichez et personnalisez les icônes de partage social dans le formulaire.
- Taille de l'icône – Ajustez la taille des icônes sociales (mesurée en px).
- Type d'icône – Choisissez le style des icônes, comme les options Classique, Solide ou Contour.
- Couleur de l'icône – Sélectionnez la couleur des icônes. Les options incluent le texte du lien, la personnalisation ou la couleur de la marque (couleur d'origine du réseau social).
- Couleur d'arrière-plan de l'icône – Définissez une couleur d’arrière-plan personnalisée pour les icônes afin d’améliorer la visibilité et le style.

Paramètres
- Cliquez sur le Modifier le contenu (1) bouton.

- Personnalisez les paramètres du formulaire à partir de Paramètres (2) onglet et Enregistrer (3) vos modifications.

Nom de forme
- Entrez un nom pour identifier le mode de paiement dans Pixpa Studio. Ce nom n'est pas visible pour les visiteurs du site web.

Mode de paiement
- Vous pouvez mettre à jour les méthodes de paiement pour le formulaire.
- Vous pouvez choisir entre Paypal et Stripe. Les clients indiens peuvent également ajouter Razorpay et PayUMoney Apprendre encore plus.

Action de post-soumission
En tant qu'action post-soumission, vous pouvez choisir de Afficher le message de succès (1) ou Rediriger vers l'URL (2).

En cas de Afficher le message de succès (1):
- Spécifie le Message de confirmation de paiement (2) qui s'affiche une fois que l'utilisateur a soumis le formulaire.
- Vous pouvez également ajouter n'importe quel script dans le succès après paiement HTML (3) boîte.

- En cas de Redirect vers l'URL, vous pouvez spécifier n'importe quelle page interne/externe en cliquant sur l'icône des paramètres (⚙️). En savoir plus.

Synchroniser et exporter les données du formulaire
- Transférer les données du formulaire vers Make.com. Apprendre encore plus.
- Envoyer les données du formulaire à Zapier.com. Apprendre encore plus.
- Exporter les données du formulaire au format CSV. Apprendre encore plus.

Notification par email
À partir de là, vous pouvez personnaliser l'objet de l'e-mail des notifications que vous recevez en tant que propriétaire de site Web après la soumission réussie d'un formulaire. De plus, vous pouvez personnaliser l'e-mail de réussite envoyé aux utilisateurs ou aux clients après qu'ils ont soumis le formulaire et effectué un paiement.
- Activez la Courriel au propriétaire du site Web Possibilité de recevoir des notifications par courriel à chaque soumission d'un formulaire de paiement.
- Dans l' Domaine d'études, indiquez l'objet de l'e-mail de soumission du formulaire de paiement. Vous pouvez également utiliser le {SITE WEB} Cette variable permet d'inclure automatiquement le nom de votre site web dans l'objet. C'est particulièrement utile si vous gérez plusieurs sites web.
- Dans l' Champ e-mailVeuillez saisir jusqu'à 3 adresses électroniques auxquelles vous souhaitez recevoir les notifications relatives aux formulaires de paiement.

- Activer/Désactiver le succès Courriel au client option.
- Spécifie le Sujet de l'e-mail de réussite.
- Ajouter un corps de l'e-mail dans l'e-mail de confirmation. Vous pouvez ajouter les variables {TRANSACTION_ID}, {AMOUNT} et {NAME} dans le corps de l'e-mail ; elles seront capturées et envoyées dans l'e-mail.

Vérifier les paiements et ajouter un mode de paiement
- Rendez-vous dans la section Paiements et dons (1) .
- Ici, vous pouvez voir tous les paiements que vous avez reçus.
- Vérifiez la date, montant reçu et email (2) du paiement.
- Cliquez sur n'importe quelle soumission de formulaire (3) pour afficher les détails de la transaction du paiement.
- Vérifiez les détails de la transaction comme ID de transaction, nom, mode de paiement utilisé et ID de transaction du mode de paiement du tiroir de droite.
- Exportez tous les détails de paiement dans un Format CSV (4).

Ajouter un mode de paiement
- Rendez-vous dans la section Paramètres section (1) et cliquez sur le Accepter les paiements l'option (2) dans le menu de gauche.
- Maintenant, vérifiez les méthodes de paiement actives et inactives.
- Cliquez sur Activer le bouton (3) pour activer un mode de paiement et vice versa.
- Connexion Stripe or Affaires Paypal. Les clients indiens peuvent également activer Payer de l'argent or Razorpay.

Voici un formulaire de paiement/don en direct :

Voir un site de démonstration en direct
