# Donation Form Elements
Below is a list of all the reusable PageBuilder components built for VPM donation pages along with instructions on how to use each of them.
# Donation Fee Cover
reus_donation_fee_cover - This contains the HTML for a hidden HTML element that must appear above the "cover transaction fee" checkbox on donation forms in order for this checkbox to be able to calculate the transaction fee to add to the donation. To add this to a donation form, navigate to "Design Donor Screens" > "Donation Form." Add an "HTML caption" to the page in the slot above the page's "Cover Transaction Fee" element. Using the HTML/plain text editor, insert the following tag:
[[S51:reus_donation_fee_cover]]
# Member Vault Code
reus_donation_member_vault - This component contains hidden HTML elements and JavaScript provided by Frakture that make it possible to display a Passport activation link on post-donation thank-you pages.
The JavaScript provided by Frakture sends information about the donor and their recently-completed donation to the PBS MVault API and renders a Passport activation link that appears on the thank-you page in the form of a button once the MVault API sends back an activation token for the donor. For this script to work, the post-donation thank you page must contain the following HTML: <div id="frakture-output" class="frakture-output"></div>. This HTML element is where the button linking to the donor's Passport activation page will display.
# One-Time/Monthly Gift Toggle
reus_donation_gift_type_toggle - This contains the HTML for the buttons that allow a user to toggle between a one-time and a monthly gift. These take the place of the default recurring gift toggle in Luminate, which is a checkbox indicating that a donor wants to make a recurring gift. In addition to changing the gift frequency when clicked, our JavaScript also displays different donation amount buttons depending on which one has been toggled on.
When a user clicks the "One-Time" button, the donation form will only display donation amounts which have been given the "one-time" label in the Luminate donation page configuration. Clicking the "Monthly" button will display only those donation level amounts labeled "recurring" in the Luminate donation page configuration.
To make sure this toggle behaves as expected, make sure to set the Label property appropriately for each donation level on your form. You can do this while editing a donation form by navigating to "Design Donor Screens > Donation Form." From there, select the data element named "Standard Donation Level" and set the label for each donation level in the far right column of the table that appears.
To add the gift toggle to a donation form, navigate to "Design Donor Screens" > "Donation Form." Add an "HTML caption" to the page. Using the HTML/plain text editor, insert the following tag:
[[S51:reus_donation_gift_type_toggle]]
# Post-Donation Thank-You Page and Passport Activation Link
reus_donation-thankyou - This reusable is the content of the "Thank You Page" set up for a donation page under step 3, "Design Donor Screens." It contains thank-you text, as well as the button that will contain the donor's Passport activation link. (The button will only appear in the event that a donation qualifies them for Passport).
In order to display the Passport activation link, the post-donation thank you page must contain the following HTML: <div id="frakture-output" class="frakture-output"></div>
# Section Break
reus_section_break - This contains the HTML for a stylized horizontal line that can be used to break a donation form into separate sections. The HTML it inserts is:
<hr class="hr hr--donation-form" />
To insert this into a donation form, navigate to "Design Donor Screens" > "Donation Form" and then add an "HTML Caption" where you would like the section break to appear. Using the HTML/plain text editor, insert the following tag into the page:
[[S51:reus_section_break]]