Donation Form

Embed a donation form in your website’s page layouts.

The Donation Form component is useful when you want to embed a donation form within a webpage layout. This use case is most effective with landing pages that you route website visitors to from social, search, and other types of ads.

Code snippet

When you create a Donation Form component, a code snippet will be generated for it. You place this code on your website using a CMS or code editor to render Donation Form.

Behavior

These settings control the configuration that Checkout launches with when the component is interacted with.

  • Open campaign: Dropdown selector to determine which Campaign the component should be connected to
  • Frequency: The donation mode that Checkout should launch with
    • Match Checkout settings: Launch Checkout using the default frequency option set for its Campaign
    • Default one time: Launch Checkout and preselect the one-time donation option
    • Default recurring: Launch Checkout and preselect the recurring donation option
  • Designation: The designation that should be preselected when Checkout is launched
  • Show designation: Choose whether the selected designation will be displayed within in the Donation Form.
    • Match Checkout settings: Launch Checkout using the default designation option set for its Campaign
    • Hide designation: Prevents the selected designation from displaying in Donation Form.
  • Default amount: The donation amount that will be prefilled in Checkout when it is launched.
    • Match Checkout setting: Launch Checkout using the default donation amount set for its Campaign
    • Customize: This option enables you to define a custom donation amount that will be prefilled in the donation amount input for Checkout when it is launched.
      • Allow donor to change selected donation amount: When selected, this option enables a donor to modify the donation amount input in Checkout that was preset in a Donation Form’s component settings.
    • Show suggested amounts: Hides/shows the array of six selectable donation amounts in Checkout. By default, the suggested amounts are shown.
  • Show tribute: Choose whether the tribute giving option is shown in Donation Form. By default, this option will match the settings of the connected Checkout.
  • Show comment: Choose whether the option to include a comment with a donation is shown. By default, the option will match the settings of the connected Checkout.

Form

These settings dictate the general appearance of Donation Form.

  • Title: The text to be used for the title label, which is displayed below the frequency selection buttons and above the suggested amounts array when those options are displayed. There is not character limit, but we recommend including short, tagline-like text. If no text is included, the label container will be collapsed.
  • Text color: The color of the text labels displayed in Donation Form. We recommend maintaining a WCAG-compliant contrast between the label and its button.
  • Background color: The background color for Donation Form. We recommend maintaining a WCAG-compliant contrast between the button background and button label.
  • Icon color: The color to apply to the heart icon displayed within Donation Form. We recommend maintaining a WCAG-compliant contrast between the button background and button label.
  • Border size: The width of the Donate Form container border. Range: 0px-4px. Setting a border width of 0px will hide the border.
  • Border radius: Sets the roundness of the Donate Form’s container corners. Range: 0px-28px. Setting a lower border radius value will give the container a squared appearance. A higher border radius value will give the container a pill-like appearance.
  • Border color: The color of Donation Form’s border when the Border size setting is greater than 0px. We recommend maintaining a WCAG-compliant contrast between the border color, border background, and the background of the container where Donation Form has been placed.
  • Show shadow: When selected, a predefined drop shadow will be applied to the button.
  • Button size: The size of each button. Range: 30px-80px.
  • Button color: The background color for Donation Form. We recommend maintaining a WCAG-compliant contrast between the button background and button label.

Controls

These settings control the appearance of buttons and the donation amount input value.

  • Border size: The width of button borders for the frequency selector buttons, suggested amount buttons, and donation amount input. Range: 0px-4px. Setting a border width of 0px will hide the border.
  • Border radius: Sets the roundness of the Donate Form’s frequency selector buttons, suggested amount buttons, and donation amount input. Range: 0px-26px. Setting a lower border radius value will give the container a squared appearance. A higher border radius value will give the container a pill-like appearance.
  • Active color: The border and label color of the active frequency selector button, and the color of the donation amount input value. We recommend maintaining a WCAG-compliant contrast between the active color and the Donation Form background color, which is set in the Form view of the Donation Form component’s settings.

Button

These settings control the appearance of the donation button.

  • Label: The text displayed within the donation button
  • Label color: The color of the donation button label. We recommend maintaining a WCAG-compliant contrast between the label and its button.
  • Border size: The width of donation button’s border. Range: 0px-4px. Setting a border width of 0px will hide the border.
  • Border radius: Sets the roundness of the donation button’s corners. Range: 0px-36px. Setting a lower border radius value will give the container a squared appearance. A higher border radius value will give the container a pill-like appearance.
  • Border color: The color of the donation button’s border when the Border size setting is greater than 0px. We recommend maintaining a WCAG-compliant contrast between the border color, border background, and the background of Donation Form.
  • Show shadow: When selected, a predefined drop shadow will be applied to the button.

Custom fields

When custom fields have been added to a selected Campaign’s Checkout, they appear as a customization option for many Elements components. This enables you to set field values that are specific to multiple components associated with the same Campaign.

Localization

These settings control how Donate Button is translated.

Default language

When Localization is enabled, a dropdown is shown in the settings for Donate Button. The selected language will be used as the default translation when Fundraise Up is unable to auto-detect a donor’s language preferences.

Label translations

When Localization is enabled, you can select the languages you want to translate the title text and button label into. You can enable translations for any supported language.

 

In this article