Creating a Donation Payment formPro
Freeform allows you to easily create complex payment forms using its own built-in Stripe Payments integration. While a wide variety of options are available, the following guide will show you how to make a one-time Donation page that allows your users to choose from a few predefined amounts or enter their own amount.
This feature requires the Freeform Pro edition and a Stripe account in order to work.
Instructions
1
Set up the Form
- Create a new form or open an existing one.
- Add fields for all of the information you'd like to collect, e.g. Name, Email, etc.
- Create a Radios or Dropdown field named Amount with all of the necessary predefined options with the Use custom values setting toggled on. Example:
Select...,$100,100$50,50$20,20Other,0.
- Create a Number field named Other and place it below or beside the Amount field you just created.
- Set a Default value of
0for it.
- Set a Default value of
- Create a Calculation field named Calculated Amount.
- Create a second page for your form (let's name page 1 as Details and page 2 as Payment).
- In the Payment page (page 2), create and place a Stripe field named Payment Details.
2
Configure the Calculation field
- Click on the Calculated Amount (Calculation) field.
- In the property editor on the left, fill out the following settings:
- Click on the Calculation Logic setting area.
- Insert the Amount and Other fields and place a
+inbetween them. E.g.amount+other. - Press
ESCor click anywhere else on the page to close the modal.
- Insert the Amount and Other fields and place a
- Set the Decimal Count setting to
0or2. - Set the Input Type to
Hidden.
- Click on the Calculation Logic setting area.
3
Set up Conditional Rules
- Go to the Rules tab of the form.
- Click on the Other (Number) field and click the Add rules button.
- Set it to show only when the Amount (Radio or Dropdown) field has the
Otheroption selected.
4
Configure the Stripe integration
- Click on the Integrations tab in the form builder.
- Find your Stripe integration in the list on the left and click on it.
- Toggle ON the Enabled setting.
- Configure it as necessary, including mapping to the Full Name and Email fields.
- If you are collecting the submitter's name as separate fields (e.g. First Name, Last Name), you can switch the mapping option to Twig mode and enter something like
{{ firstName }} {{ lastName }}.
- If you are collecting the submitter's name as separate fields (e.g. First Name, Last Name), you can switch the mapping option to Twig mode and enter something like
5
Configure the Stripe field
- Go back to the Layouts tab of the form.
- Click on the Payment Details (Stripe) field on the Payment page (page 2).
- In the property editor on the left, fill out the following settings:
- Set the field as required.
- Select your integration name for the Integration setting.
- Choose Single or Subscription for the Payment Type setting.
- Select Dynamic for the Payment Amount Type setting.
- Select the Calculated Amount (Calculation) field in the Payment Amount Field setting.
- Configure any other settings as necessary.
Finished!
Once that's all finished, you'll have something that looks like the screenshots below. Check out your form in the Freeform demo templates and see if everything works correctly.
Previews
Form Builder
Page 1
Page 2
Front End
Page 1
Page 2
