Donation Form
Place this free donation form on the website of your nonprofit or charity organization, or in case you need to accept donations. It will streamline the process of getting donations. A donor can choose a donation amount or enter a custom one. PayPal payment gateway is integrated into the form. The donor will see the payment buttons after submitting the form. The form is fully responsive and can be used on any device.
Preview
Theme:
Fields and controls
- Fields are divided into sections and organized using Grid containers. The general information is placed in a cell with fd-donation-form CSS class. PayPal buttons are placed in a cell with fd-payment-form CSS class. PayPal buttons are hidden by default.
- The title of the form has bg-primary CSS class which sets the background color to the primary color of the theme.
- The DonationAmount field is required.
- Custom buttons represent donation amount. The highlightSelectedAmount() function highlighes a button with corresponding amount.
- An HTML control is added with the PayPal buttons code snippet.
JavaScript
- Click handlers of the donation buttons populate the DonationAmount field.
- The highlightSelectedAmount() function is called each time the DonationAmount field changes and on the form load and highlights the selected amount.
- The function within saved() event hides the form and shows PayPal buttons. Variable donationAmount holds the value of the DonationAmount field.
Styling
- Styles for h1 and h6 elements are defined in the CSS-editor.
- The success message is hidden.
- The primary and the donation buttons' font-weight is set to 500 via the Style property.