Forms are an essential component of a nonprofit’s website, allowing us to collect and analyze information from website visitors and do things like organize events and collect donations. Oftentimes, organizations need to collect payment online to make these things happen. In this article, we’ll show you how to easily build a paid form for your website.
If you’re hoping to build a very standard donation form or paid event form, consider using the forms that come along with your website.
- Check out the standard donation form by going to the dashboard of your website and clicking “Forms” in the left-hand menu. The donation form should be titled “Donate”.
- The paid events form can be selected when you create a new event within the event system.
Your website uses the Gravity Forms tool to build forms. For a refresher on how to build a basic form on your website, check out our support article, Building a Form. And, to learn more about using the Gravity Forms tool or to build more complicated forms, check out Gravity Forms documentation and tutorials.
Build a Donation Form
From the dashboard of your website, click “Forms” from the menu on the left-hand side.
From there, click the “add new” button at the top of the page. A pop-up will appear where you can add a title, most likely a name that includes the main goal or function of the form, like “donation”. You can leave the “Form Description” field blank for now. Click “Create Form” to get started on your donation form.
Start With the Settings
Click “Settings” at the top of the page.
From here, you’ll enter the following:
- Edit the button text to be “Donate”.
- Check the anti-spam honeypot checkbox to prevent spam donations.
- If you’re planning to include conditional questions, you can also enable animations at this point. These allow any conditional questions to slide open rather than just appearing.
- Click “Update”.
Use the Form Editor to Build Out Your Form
Travel back to the “Edit” tab at the top of the page to start building out your form with the desired fields. Drag and drop the desired fields from the right-hand side of the screen. Depending on the type of paid form you’re creating, you could have a variety of different fields included in the form. But there are a few fields that you will need to have (and require that visitors complete) to successfully process payments.
To make a field required, click on the arrow in the top right corner of the field box to open a drop-down of setting options. Check “Required”. The red asterisk will appear next to the field title, indicating to visitors that they must complete the field to successfully submit the form. Because requiring fields creates more work for your donors, you’ll want to be sure to only require those fields that you absolutely must have.
For donation forms, you’ll want to include “Donation Amount” fields for donors to select the amount they’d like to give. The base Donation Amount field should be a product field set to use radio buttons. Adjust each radio button to list several levels of gifts, like $25, $50, $100 and $250.
You can also include a custom Donation Amount field for the donor to specify a different amount to give. This field should be a product field set to use ‘User Defined Price’ as the type of product field.
To accept online credit card payments, make sure that you include a “credit card” field from within the pricing field options. You’ll need to make this a required field.
Total Price Field
Include a ‘Total’ field so that your supporters can easily see the amount that they’ve chosen to donate or pay before submitting the form. The ‘Total’ field can be found in the ‘Pricing Fields’ group on the right side of your screen. You’ll need to include this field in your form to process payments properly. It should be the last field listed in your form.
Add the field you would like to only show conditionally first, such as a memorial or tribute field, then click the “Advanced” tab within the field settings and check the “enable conditional logic” box. Use the settings that appear below to select the question and answer that you would like to make this question a conditional option for.
Building Other Paid Forms
Follow our video tutorial to build a paid form for the purposes of selling products, services, or event tickets (that require additional fields than what comes standard through the event system).
Set Up a Feed With Your Payment Processor
Once you’ve finished building out all of the fields for your form, including the credit card information and total price fields necessary for online purchases, you’ll want to connect that field to a payment processor to save yourself the hassle and liability of handling credit card information. This connection between a form and a payment processor is referred to as a feed.
If you’re processing payments elsewhere on your site, such as through the standard donation form or standard paid events form, then your payment processor should already be linked to your website. If you’ve changed payment processors or did not originally set one up, please reach out to us through the website support form in your dashboard.
To connect this new form to your payment processor, you’ll need to set up a new feed within that integration:
- Within your new form, go to “Settings” and click the name of your payment processor from the left-hand menu.
- Click the “Add New” button at the top of the page.
- Name the payment feed and select the type that you’ll need.
- Customize the feed options to your preferences.
Because we’re dealing with third-party integrations, the process can vary depending on which payment processor you’re using. Find your payment processor from the list of Gravity Forms Add-Ons and visit the “Create a Feed” article for detailed instructions. Check out the instructions for Stripe feeds if you’re using our recommended payment processor.
Form Notifications and Confirmations
Most paid forms should have notifications in place to alert both your team and the person who submitted your form that the transaction occurred and relay the details through an automated email. See how to view and edit these notification settings within Gravity Forms.
You can also add a confirmation message or page directly on your site that lets them know their completed form has been processed. Rather than the default text, it’s a nice touch to create a special thank you page for donors, detailing what they can expect, any other actions you’d like them to take and a nice thank you message.
Add Your New Form to a Page
To add a form to a page, go to the “pages” section of the backend of your website and select the page where you would like to add your new form.
- Select the spot where you would like the form to appear within the content editor on that page.
- Click the “Add Block” button and add a new “Gravity Forms” block.
- Click on the newly added block and select the form you created.
- In the block settings on the right-hand side of the screen be sure to turn off the “Form Title” and “Form Description” settings.
Test Your Form
Preview the page to make sure everything looks as you would like it to. From the preview page, you can also test your new form to ensure it works as you’d expect. Testing paid forms is especially important as a hiccup with a donation or store form could mean losing out on dollars for your cause as well as your donors’ trust. Through that process, you’ll want to make a test donation or payment and then check your payment processor account, such as a Stripe account, to ensure that the integration is set up correctly.
Still Have Questions?
Reach out to us within your website’s admin dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from one of Wired Impact’s team members within one business day.