Responsive
Atoms
FormLabel
Default
Molecules
ContactDetails
Default
Organisms
HeaderMinimal
Default
ServicesGroupFinderBlock
With Results No Results

FormDonate / With Price Descriptions

Form with descriptive copy for each price point

Layout
Properties
JSON format (e.g., [{"LinkText":"Home","LinkUrl":"/"}])
JSON format (e.g., [{"LinkText":"Home","LinkUrl":"/"}])
Component Code
@await Html.PartialAsync("~/Components/Molecules/FormDonate/FormDonate.cshtml", new FormDonateProps
{
"Heading": "DONATE NOW",
"BackgroundColor": "purple",
"DefaultDonationType": "one-off",
"DonationTypeSupported": "both",
"PricePointsOneOff": [
{
"Value": 10,
"Default": true,
"Copy": "Could help fund research"
},
{
"Value": 20,
"Default": false,
"Copy": "Could support someone affected"
},
{
"Value": 30,
"Default": false,
"Copy": "Could make a real difference"
}
],
"PricePointsRegular": [
{
"Value": 5,
"Default": false,
"Copy": "Monthly support"
},
{
"Value": 10,
"Default": true,
"Copy": "Regular contribution"
},
{
"Value": 15,
"Default": false,
"Copy": "Sustained impact"
}
],
"SubmitText": "Donate",
"CustomAmountPlaceholder": "Enter your own amount",
"ShowPricePointDescription": true,
"AmountMessageOneOff": "Your chosen amount will help us continue our work",
"AmountMessageRegular": "Regular donations help us plan for the future",
"CampaignName": "",
"CampaignId": "",
"Source": "",
"Medium": "",
"UtmSource": "",
"UtmMedium": "",
"UtmCampaign": "",
"UtmContent": ""
})
♿ Accessibility