Payment & donations section

Payment Forms take the pain out of accepting online payments with Stripe and PayPal. Take payments and donations in minutes. Sell products, services, online courses and so much more.

You can easily create a payment or donation page on your website or a page to take a donation or a one-time payment using the Payment & Donation section.

It also gives you the ability to configure the form fields that you want in your form and lets you specify an email address to which the form data collected is emailed.

All form data is also stored and is accessible in the Settings > Form Submissions section of the studio. Learn more.

---

In this article:

1. Add section to a page
2. Content
3. Layout
4. Style
5. Settings
6. Email Notification
7. Check Payments and Payment Methods
8. Live example

---

Add a Payment and Donation Section

• A section can be added to a page. You can either add a section to an already existing page or create a new page within your website.
• On your page, click on the blue + icon to add a New Section to your page.

 

• You will now see the section categories on the left side.
• Choose the Forms (1) category and click on the Payment & Donations tab (2) where you can choose from different layouts of the Payment & Donations (3) section.

• Choose any section layout and click on it to add it to your page.

---

Manage Payment Form

• Click on Edit Content (1) button.

• You will have the option to manage Content (2), Layout (3), Style (4), Settings (5), and Email Notifications (6).
• Hit Save (7) to apply the changes to the form.

---

Content

Manage Form Fields

Under Manage form fields, you can specify the fields that you want visitors will fill in this form.

• Click on Add New Field (1) button to add more fields to your form.
• Edit or Delete (2) an already added field.
• Drag and Drop (3) the fields to change their sequence in the form.
• Set the Call to Action Button Label (4) for the form.

• On clicking on the + Add Field button a pop-up will open from where you can choose your form fields.

1. Capture the name of your client.
2. Capture any small information through the Short Text field.
3. Capture any elaborate information/message through the Long Text field.
4. Capture the email of your client.
5. Capture any numerical information from your client.
6. Add services to choose from in a dropdown way.
7. Single Selection: Add a radio selection for your services.
8. Multiple Selection: Add a checkbox field for multiple selections.
9. Add a date picker so that your clients can choose a date for any event.
10. Add a line between the form fields.
11. Capture the address of your client.
12. Capture the website of your client.
13. Capture the phone number of your client.
14. Add a time field so that your clients can specify the event time themselves.
15. Add a separator between the form fields.
16. The consent field option can be used to take permissions for newsletters, accepting privacy and terms of use.
17. Take client reviews using the star scale, number scale, and smiley scale.

Form Style

1. Show Form as Popup – Enable this to open the form in a popup window by clicking the call-to-action button.
2. Call-to-action Button Label – Set the Call to Action Button Label for the form.
3. Headline Popup – Specify the form Headline, if any.

• Upload or Delete (1) the form image for the form.
• Add a Title (2), and Description (3) for the form. Before adding the description, check this article.

Headline

• Headline – Specify the Section Headline (1) for the Payment Form section.
• Button & Icons – Learn more about Buttons & Icons (2).

---

Managing the Layout

• Click on the Edit Content (1) button.

• Choose the Layout (2) tab.
• Select the layout for your section (3) and Save (4) the changes.

---

Style Options

• Click on Edit Content (1) button.

• Choose the Style (2) tab.
• Change the Style for the section elements and Save (3) your changes.

Styling the from is an important aspect of creating a visually appealing and user-friendly experience.

You will have multiple style options for the section: 

• Form Fields
• Alignment
• Text
• Spacing
• Headline
• Images
• Image Border
• Popup Button
• Form Button
• Headline Buttons
• Headline Social Icons

---

Form Fields

Pixpa allows you to fully customize the appearance of your form fields. These styling options apply to all input fields in your Payment Form and give you greater control over how your form looks and feels on your website.

1. Shape: Choose the shape of your input fields — such as rectangle, rounded, pill, or text — to match your website’s aesthetic.
2. Fill: Enable this toggle to apply a background fill color to your form fields.
3. Base Color: Set the background color of the fields when the fill option is enabled.
4. Outline: Toggle the border (outline) on or off for each field.
5. Outline Color: Choose the color of the field’s border when the outline is enabled.
6. Field Text Color: Set the color of the text typed by users inside the form fields.
7. Height: Adjust the height of your fields by choosing from: Small, Medium, Large, or Extra Large.
8. Labels: Choose whether form field labels appear Inside or Outside the field.
9. Label Color: Define the color of labels when placed outside the field.
10. Label Inside Color: Set the color for labels placed inside the field (helpful for placeholder-style labels).
11. Spacing Between Fields: Use the slider to set the vertical spacing (in pixels) between each form field.

---

Alignment

• Manage the alignment of the form content horizontally from Horizontal Alignment (1).
• Manage the alignment of the form content vertically from Vertical Alignment (2).

---

Text

• Click on the Change Text Style (1) button to visit the Design section and manage your font sizes and styles. 
• Specify the Title (2) font style of the form.
• Specify the Description (3) font style of the form.

---

Spacing

• Specify the Image Width (1) of the image in the form in Percent.
• Specify the Space Between Image and Text (3) in Percent.
• Specify the Space Below Title (4) in Percent.

---

Headline

1. Horizontally Align the section headline text. You can set it to Left, Center, and Right.
2. Enable/Disable the Divider between the section headline and the section content.
3. Set the thickness of divider (in px).
4. Specify the Divider Color from color picker.
5. Choose a Divider Style from the dropdown.
6. Set the Headline Width to define how wide the section title appears, starting from a minimum of 50%.
7. Specify the Space Below Headline within the section (in px).

---

Images

1. Image Crop: Choose the Image Crop for the list items. You can set the images as Square, Circle, Horizontal, Portrait, and Original.
2. Corner Radius: Choose to have a common corner radius or different corner radius for each side of the list items and set a number (in px) for the Corner Radius of the list item images. Know more.
3. Hover Animation: Choose to Animate the section’s image on hover by enabling the toggle. Check this feature on a live page.
4. Animation Style: Choose an Animation Style for image when the cursor hovers over them.
5. Shape Mask: Enable this toggle to apply a shape mask to the images in the Image List section. Once enabled, the selected shape will visually clip the image into that form.
6. Select Shape: Choose from various predefined shapes to apply to your images. This allows you to creatively stylize your content by displaying images in unique forms like rounded, diamond, drop, etc.

• In case you have chosen split corners, you can set different corner radius for each corner.

---

Image Border

1. Enable / Disable border around the image by switching the toggle.
2. Choose to have a common border on all sides of image or you can specify the borders separately for each side.
3. Specify the width of the border. If it is set to 0, then the border will not appear. You also have the option to set the border width individually for each side of the image.
4. Select the Border Color from color picker.
5. Select a preferred Border Style from the dropdown.
6. Determine the border width for mobile devices, aligning it with the width chosen for desktop.

---

Popup Button

These style options are for the popup button, where the Payment form will open when the button is clicked.

1. Button Size – Select the size of the button from options like small, medium, or large.
2. Space Above Button – Adjust the vertical spacing above the button (in percentage).
3. Button Style – Choose the style of the button, such as default or custom.
4. Button Color – Select the color style for the button. Options include Default, Invert, or Custom.
5. Button Text – Customize the text color for the button.
6. Button Background – Select the background color for the button.

---

Form Button

These settings allow customization of the form submission button to match the design and layout of the page.

1. Button Size – Select the size of the button (Small, Medium, or Large).
2. Space Above Button – Adjust the vertical spacing above the button (specified in percentage).
3. Button Style – Choose the overall style of the button, such as Default or Custom.
4. Button Color – Set the button color style. Options include Default, Invert, or Custom.
5. Button Text – Customize the text color displayed on the button.
6. Button Background – Select a background color for the button.
7. Button Alignment – Choose the alignment of the button (Left, Center, or Right).
8. Button Width – Adjust how wide the button appears. Options include Default, Large, X-Large, or Full Width.

---

Headline Buttons

These settings control the appearance and spacing of buttons placed with the headline of the section.

1. Button Size – Select the overall size of the buttons (Small, Medium, or Large).
2. Space Between Buttons – Adjust the spacing between multiple buttons (measured in vw).
3. Space Above Buttons – Set the vertical spacing above the buttons (measured in percentage).
4. Button Width – Choose how wide the buttons should appear. Options include Default, Large, X-Large, and Full Width.
5. Text Link Size – Specify the font size of text links associated with buttons (measured in px).
6. Image Button Size – Adjust the size of image-based buttons (measured in px).

---

Headline Social Icons

Display and customize social sharing icons in the form.

1. Icon Size – Adjust the size of the social icons (measured in px).
2. Icon Type – Choose the style of the icons, such as Classic, Solid, or Outline options.
3. Icon Color – Select the color for the icons. Options include Link Text, Custom, or Brand Color (original color of the social platform).
4. Icon Background Color – Set a custom background color for the icons to enhance visibility and style.

---

Settings

• Click on the Edit Content (1) button.

• Customize the form settings from Settings (2) tab and Save (3) your changes.

Form Name

• Enter a name to identify the payment form in Pixpa Studio. This name is not visible to website visitors.

---

Payment Method

• You can update the Payment Methods for the form.
• You can choose from Paypal and Stripe. Indian customers can also add Razorpay and PayUMoney Learn more.

---

Post Submission Action

As a post-submission action, you can choose to Show Success Message (1) or Redirect to URL (2).

In case of Show Success Message (1):

• Specify the Payment Success Message (2) that displays after the user submits the form.
• You can also add any script in the post-payment success HTML (3) box.

• In case of Redirect to URL, you can specify any internal/external page by clicking on the settings (⚙️) icon. Know more.

---

Sync and Export form data

1. Push Form Data to Make.com. Learn more.
2. Push Form Data to Zapier.com. Learn more.
3. Export form data as a CSV file. Learn more.

---

Email Notification

From here, you can customize the email subject for the notifications you receive as a website owner upon a successful form submission. Additionally, you can personalize the success email sent to users or customers after they submit the form and make a payment.

1. Enable the Email to Website Owner option to receive email notifications whenever a payment form is submitted.
2. In the Subject field, specify the subject line for the payment form submission email. You can also use the {WEBSITE} variable to automatically include your website name in the subject. This is especially useful if you manage multiple websites.
3. In the Email field, enter up to 3 email addresses where you would like to receive payment form notifications.

1. Enable/Disable the success Email to Customer option.
2. Specify the Subject of the Success Email.
3. Add an email body to the Success email. You can add the variables in the email body which will be captured and sent in the email {TRANSACTION_ID}, {AMOUNT}, and {NAME}.

---

Check Payments and Add Payment Method

• Go to the Payments and Donations (1) section.
• Here, you can view all the payments you have received.
• Check the date, the amount received, and email (2) of the payment.
• Click on any form submission (3) to view the transaction details of the payment.
• Check the transaction details like Transaction ID, Name, Payment Method used, and payment method transaction ID from the right drawer.
• Export all the payment details in a CSV format (4).

---

Add Payment Method

• Go to the Settings section (1) and click on the Accept payments option (2) from the left menu.
• Now, check the active and inactive payment methods.
• Click on Enable button (3) to enable a payment method and vice versa.
• Connect Stripe or Paypal Business. Indian customers can also enable PayUMoney or Razorpay.

---

Here’s a live Payment/Donation form: 

View a live demo site

---

Related Articles:

• Build your Website
• Types of Sections
• Manage Website SEO