A donation page with a selector to show/hide links to an Impact Stack donation page
Imagine this was a page that asked for donations on your main website.
Your supporters could start by selecting one of the donation intervals, then one of the donation amounts. The donation amounts look like buttons but are in fact links that open an Impact Stack and prefill the form with the amount on the button.
Feel free to try it out. It'll open an Impact Stack form with the donation amount and donation interval already selected/pre-filled.
This 'tabs' interface where selecting a different donation interval changes the content underneath is just one approach you could take. The basic idea is that you would show or hide different links to prefill an Impact Stack form.
Working demo ⤵︎
This is an example of one of the one-time links
<a href="https://demo2.impact-stack.org/donation-6#p:donation_interval=1&p:donation_amount=3" class="button" aria-label="Donate 3 euros once" > €3 </a>
This is an example of one of the monthly links. Note how this is the same
as the one-time link above except donation_interval is set to
m and donation_amount is set to 5.
The text inside the link €5 is different too. Finally, the aria-label for screenreaders is customised too.
<a href="https://demo2.impact-stack.org/donation-6#p:donation_interval=m&p:donation_amount=5" class="button" aria-label="Donate 5 euros monthly" > €5 </a>How to do it
The example of using a tabs interface here is very much just one idea of how you might do this. The basic idea is that you have multiple simple links that prepopulate an Impact Stack form and show and hide them somehow.
Here's the code for the tabs interface above. Most organisations would need a web developer to pick this up and adapt it for your needs and your website technology. You might decide you don't want to use a tab interface at all and there is an alternative that you'd prefer. If you put this on your main website it would likely inherit some of the existing styling, but we'd still expect you to need to do some work to make sure it looked on-brand for you.
See the code
<div class="tabs"> <div class="tab-nav" role="tablist" aria-label="Donation options"> <button role="tab" aria-selected="true" aria-controls="panel-tab1" id="tab1" data-tab="tab1" tabindex="0"> One-time </button> <button role="tab" aria-selected="false" aria-controls="panel-tab2" id="tab2" data-tab="tab2" tabindex="-1"> Monthly </button> <button role="tab" aria-selected="false" aria-controls="panel-tab3" id="tab3" data-tab="tab3" tabindex="-1"> Annually </button> </div>
<div class="tab-body"> <div role="tabpanel" id="panel-tab1" aria-labelledby="tab1" tabindex="0" data-tabpanel="tab1"> <h2>Make a one-time donation</h2> <div class="amounts-wrapper"> <a href="https://demo2.impact-stack.org/donation-6#p:donation_interval=1&p:donation_amount=3" class="button" aria-label="Donate 3 euros once"> €3 </a> <a href="https://demo2.impact-stack.org/donation-6#p:donation_interval=1&p:donation_amount=5" class="button" aria-label="Donate 5 euros once"> €5 </a> <a href="https://demo2.impact-stack.org/donation-6#p:donation_interval=1&p:donation_amount=10" class="button" aria-label="Donate 10 euros once"> €10 </a> </div> </div>
<div role="tabpanel" id="panel-tab2" aria-labelledby="tab2" tabindex="0" hidden data-tabpanel="tab2"> <h2>Make a monthly donation</h2> <div class="amounts-wrapper"> <a href="https://demo2.impact-stack.org/donation-6#p:donation_interval=m&p:donation_amount=5" class="button" aria-label="Donate 5 euros monthly"> €5 </a> <a href="https://demo2.impact-stack.org/donation-6#p:donation_interval=m&p:donation_amount=10" class="button" aria-label="Donate 10 euros monthly"> €10 </a> <a href="https://demo2.impact-stack.org/donation-6#p:donation_interval=m&p:donation_amount=20" class="button" aria-label="Donate 20 euros monthly"> €20 </a> </div> </div>
<div role="tabpanel" id="panel-tab3" aria-labelledby="tab3" tabindex="0" hidden data-tabpanel="tab3"> <h2>Make an annual donation</h2> <div class="amounts-wrapper"> <a href="https://demo2.impact-stack.org/donation-6#p:donation_interval=y&p:donation_amount=50" class="button" aria-label="Donate 50 euros annually"> €50 </a> <a href="https://demo2.impact-stack.org/donation-6#p:donation_interval=y&p:donation_amount=100" class="button" aria-label="Donate 100 euros annually"> €100 </a> <a href="https://demo2.impact-stack.org/donation-6#p:donation_interval=y&p:donation_amount=200" class="button" aria-label="Donate 200 euros annually"> €200 </a> </div> </div> </div></div>
<style> .tab-nav { display: grid; gap: 4px; padding: 10px; background-color: #f5f5f5; }
@media (min-width: 768px) { .tab-nav { grid-template-columns: repeat(3, 1fr); } }
[role="tab"] { padding: 10px 20px; border: none; background-color: #e0e0e0; cursor: pointer; transition: all 0.2s ease; }
[role="tab"]:hover { background-color: #d0d0d0; }
[role="tab"]:focus { outline: 2px solid #4a90e2; outline-offset: 2px; }
[role="tab"][aria-selected="true"] { background-color: #90c92a; color: white; font-weight: 700; }
[role="tabpanel"] { min-height: 200px; padding: 20px; border: 1px solid #e0e0e0; }
[role="tabpanel"]:focus { outline: none; box-shadow: 0 0 0 2px #4a90e2; }
[role="tabpanel"][hidden] { display: none; }
.amounts-wrapper { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
@media (min-width: 768px) { .amounts-wrapper { grid-template-columns: repeat(3, 1fr); } }
.button { display: inline-block; padding: 10px 20px; background-color: #90c92a; color: white; text-decoration: none; text-align: center; border-radius: 4px; transition: background-color 0.2s ease; }
.button:hover { background-color: #7ab021; }
.button:focus { outline: 2px solid #4a90e2; outline-offset: 2px; }</style>
<script> document.addEventListener("DOMContentLoaded", () => { const tabs = document.querySelectorAll('[role="tab"]'); const tabList = document.querySelector('[role="tablist"]');
// Enable arrow navigation between tabs tabList.addEventListener("keydown", (e) => { const targetTab = e.target.closest('[role="tab"]'); if (!targetTab) return;
const tabArray = Array.from(tabs); const index = tabArray.indexOf(targetTab);
let newTab;
switch (e.key) { case "ArrowLeft": newTab = tabArray[index - 1] || tabArray[tabArray.length - 1]; break; case "ArrowRight": newTab = tabArray[index + 1] || tabArray[0]; break; case "Home": newTab = tabArray[0]; break; case "End": newTab = tabArray[tabArray.length - 1]; break; default: return; }
e.preventDefault(); switchTab(newTab); });
// Handle click events tabs.forEach((tab) => { tab.addEventListener("click", () => { switchTab(tab); }); });
function switchTab(newTab) { const activePanelId = newTab.getAttribute("aria-controls");
// Update all tabs tabs.forEach((tab) => { const panelId = tab.getAttribute("aria-controls"); const panel = document.getElementById(panelId);
if (tab === newTab) { tab.setAttribute("aria-selected", "true"); tab.setAttribute("tabindex", "0"); panel.removeAttribute("hidden"); } else { tab.setAttribute("aria-selected", "false"); tab.setAttribute("tabindex", "-1"); panel.setAttribute("hidden", ""); } });
newTab.focus(); } });</script>