Skip to main content

Large variant of the donate form

Say we want to use the large donate form, have it ask for recurring ("regular") gifts on a monthly basis. Oh and you also want to hide the Greenpeace Donate Form (gpdf) frequency control with some CSS.

We'd configure it as shown below. Note the three <donate-options> provided as children to the top level donate widget; these describe the dollar handles, and are documented here.

  <style>.gpdf .gpdf-frequency-control { display: none } </style>
<div
id="gpap-donate-widget"
data-donate-button-label="Donate"
data-form-variant="large"
data-frequency="recurring"
data-frequency-recurring-label="monthly"
data-interval="monthly"
data-interval-count="1"
data-salesforce-campaign-id="MANDATORY SALESFORCE ID"
data-redirect-url-success="https://your-site.org/your-thank-you-page"
>
<donate-option
amount="5"
frequency="recurring"
description="I want to support volunteer activists around the world with campaign materials"
imageSrc="https://storage.googleapis.com/instapage-user-media/423c9433/53086146-0-GP04659-sm.jpg"
imageAlt="Polar bear on Arctic sea ice, seen from the Greenpeace ship"
imageHeight="400"
imageWidth="225"
/>
<donate-option
amount="10"
frequency="recurring"
description="I want to help support crew with equipment to document wildlife"
imageSrc="https://storage.googleapis.com/instapage-user-media/423c9433/53086136-0-GP0STTHWJ-sm.jpg"
imageAlt="Baby Leatherback Sea Turtle in French Guiana
Expédition Tortue en Guyane; photo by Greenpeace"
imageHeight="400"
imageWidth="225"
/>
<donate-option
amount="20"
frequency="recurring"
description="I want to help fund advanced scientific technology to research our oceans"
imageSrc="https://storage.googleapis.com/instapage-user-media/423c9433/53086141-0-GP0STUGBA-sm.jpg"
imageAlt="A Chinstrap Penguin colony on Penguin Island in 2020. Greenpeace is back in the Antarctic on the last stage of the Pole to Pole Expedition. We have teamed up with a group of scientists to investigate and document the impacts the climate crisis is already having in this area."
imageHeight="400"
imageWidth="225"
/>
</div>