Donate Button
Add a donate button that opens the form in a dialog when clicked.
See it in action on a demo pageThis approach is great for call-to-action buttons, headers, or sidebars where you want to keep the page clean while making donations easily accessible.
Button color
Border radius
120 × 40
|
<button
onclick="document.getElementById('donate-dialog').showModal()"
style="width: 120px; height: 40px; background: #2563eb; color: white; border: 0; border-radius: 6px; cursor: pointer; font-weight: 500"
>
Donate
</button>
<dialog id="donate-dialog" style="padding: 0; border: 0; border-radius: 8px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)">
<form method="dialog" style="display: flex; justify-content: flex-end">
<button style="font-size: 24px; position: absolute; right: 8px; background: none; border: none; cursor: pointer">
×
</button>
</form>
<iframe
title="donation form embed"
src="https://better.giving/forms/E7JXrhQifQrS9XGw2CFNm"
allow="payment"
width="100%"
height="500"
style="max-width: 700px; width: 90vw"
></iframe>
</dialog>