You can start accepting donations today with this online donation form. 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.
Fields and controls
- Fields are devided into sections and organized using Grid containers. The general information is placed in a Grid container that has a donation-info CSS class. PayPal buttons are placed in a Grid container that has a payment CSS class. PayPal buttons are hidden on the form load.
- The form title has a bg-primary CSS class. Thus, the title background matches the primary color of the theme.
- The DonationAmount fields are required.
- Custom buttons represent donation amounts. The changeButtonColor() function is called on a button click.
- An HTML control is added with the PayPal buttons code snippet.
- The changeButtonColor() function populates the DonationAmount field with the selected amount, and adds a bg-primary class to the selected button. The function is defined globally to make it available on the form.
- When the DonationAmount field value changes, a bg-primary class is added to the button with the corresponding amount.
- The function within beforeSave() event hides container with a donation-info CSS class, shows the container with a payment CSS class, and loads PayPal buttons. Variable amount holds the value of the DonationAmount field.
- h1, h6 elements' text size is responsive to screen width and is set with the min() CSS function.
- h1 element's content is centered, and the text color is white.
- The primary and the light buttons font-weight is set to 700.