Payment Forms: Creating a Donation Form for Your Website

It’s no secret that the fastest way to collect funds for your nonprofit is by using a donation form that people can fill out in just a few seconds. Once they have specified the amount they want to donate, the donation is send instantly. Donation forms started as simple paper forms, but now you can easily create donation forms online that help you achieve your goals much faster, not to mention that online donation is a secure process.

During the past 8 years, many nonprofits have used 123FormBuilder for building their forms, especially donation forms that simplified the donation process. And because of this, we’ve decided to share this article with you, especially if you’re new around and need guidance.

online donation form

If you’ve read my article on how to start building a basic order form, you’ve learned a bit about the Payment section in the product and how prices are assigned to your items, how the summary performs and so on.  If not, I’d suggest you take a look there as well. The donation form is much simple to build than your standard order form that sells services or items.  And I’m going to show you in the steps below.

You can either use the donation form template that we provide, or create one from scratch by manually adding each form field in the Form Editor.

If you have decided on using the donation form template, you don’t have much to do in the Form Editor, unless you want to change some specific elements. 

creating a donation form with drag and drop

Moving on to Settings. Go to the Payments section, under the Calculations tab.

creating a donation form with online payment

If you’ve read my previous articles related to payments, you’ve learned how to assign prices. In this scenario, use the drop down to select the field that represents the donation amount and add it as “value” to assign it. Next, use the assign box and type in the value 1. View the image above, as an example.

creating a donation form

Don’t forget to save this step on the top right. Next, check your payment summary and make sure the field is multiplied with 1.

The next step is adding the payment gateway to your form. Do you use PayPal, Stripe, or any other payment gateway that 123FormBuilder provides? Steps apply the same to all, but I should point you out the following: if you use PayPal, remember to enable the option “payment represents donation”. It will let PayPal know not to tax your donation as it normally would do for online purchases.

Care to test out your donation form? Use “” as for testing in the email box of the PayPal payment gateway box. It will let you submit the donation form and see how it behaves.

In Payments, you can use the Payment Summary section to also enable the real-time summary on the form and have the summary show only after submission, to avoid having the Calculate button show up next to the submit button. However, remember that the real-time summary will only show up if a payment gateway has been enabled on the donation form.


creating a donation form - adding real-time payment summary


And if you want to change the label that shows up in the summary with something more straightforward, for example “You are about to donate”, check this option:

creating a donation form with custom summary

And type in the text you want to appear instead. This will modify the real-time summary of your donation form like this:

donation form with live summary

Tips & Tricks:

  • If you want to allow decimals on the donation amount, use the Price field and have the decimal option enabled. Just add the field to the form, select it and you will see the option in the field panel.
  • Remember to set your fields as required, at least the one that represents the donation amount.
  • If you want to use several PayPal accounts on the same donation form, read my article on how to use multiple PayPal accounts on the same form. It applies both for eCommerce and donations. It’s easy and works great.

Final step: publishing your donation form on your website. Go to Publish and select the Embed Code option. Next, use the JavaScript code by copying it from this section and paste it in the source code of your web page. And that’s it.

adding donation form to site without coding

What do you think about building a donation form with 123FormBuilder? Are there any scenarios that you want us to cover? Let us know in the comments below.





Leave a comment

Your email address will not be published. Required fields are marked *

You love forms as much as we do?

Then share your form story with us! We will read all the submitted cases and reach out the selected ones for further details. The chosen ones will have a case study created and will be featured in our blog, newsletter and social media channels.