Free Donation Form Template — Copy-Paste HTML Code

Q: Is this donation form template free?

Yes, completely free. Copy, modify, and use it however you like. The only cost is the FormBackend service for receiving and managing donation submissions, which starts with a free tier.

Q: Does this form process payments?

This template collects donation pledges and donor details, not card payments. You can follow up by email with a payment link, or redirect donors to a payment processor like Stripe or PayPal after they submit using FormBackend's custom redirect feature.

Q: How do I get notified of new donations?

FormBackend emails you the moment a donation is submitted and stores every donor record in your dashboard. You can also push records to Google Sheets or a CRM to track your campaign.

Q: Does this work for nonprofits on any platform?

Absolutely. It's plain HTML and CSS, so it works on WordPress, Squarespace, Webflow, static sites, and any nonprofit website.

A donation form makes it easy for supporters to give and gives your organization the donor details you need to follow up and say thank you. In this guide you’ll get a production-ready HTML donation form template you can copy and paste into any website in minutes. It includes preset amounts, a custom amount option, donor fields, modern styling, validation, and seamless delivery through FormBackend.

Complete Donation Form Code

Here’s a fully-styled, ready-to-use donation form you can copy into any HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Make a Donation</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: linear-gradient(135deg, #f6f9fc 0%, #d7e9f7 100%);
            min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
        }
        .container { background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); padding: 40px; max-width: 500px; width: 100%; }
        h1 { font-size: 28px; margin-bottom: 10px; color: #1a202c; }
        .form-subtitle { font-size: 14px; color: #718096; margin-bottom: 30px; }
        .form-group { margin-bottom: 20px; }
        label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #2d3748; }
        .required::after { content: " *"; color: #e53e3e; }
        input, select { width: 100%; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; font-family: inherit; transition: all 0.3s ease; }
        input:focus, select:focus { outline: none; border-color: #38a169; box-shadow: 0 0 0 3px rgba(56,161,105,0.12); }
        .amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
        .amounts label { display: block; margin: 0; }
        .amounts input { position: absolute; opacity: 0; }
        .amounts span { display: block; text-align: center; padding: 12px 0; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px; transition: all 0.2s ease; }
        .amounts input:checked + span { background: #38a169; color: #fff; border-color: #38a169; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } .container { padding: 25px; } }
        button { width: 100%; padding: 14px 20px; background: #38a169; color: #fff; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; margin-top: 10px; }
        button:hover { background: #2f855a; }
        .success-message, .error-message { display: none; padding: 14px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; }
        .success-message { background: #c6f6d5; color: #22543d; }
        .error-message { background: #fed7d7; color: #742a2a; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Support Our Cause</h1>
        <p class="form-subtitle">Your donation makes a real difference. Thank you.</p>

        <div class="success-message" id="successMessage">Thank you for your generosity! We'll be in touch shortly.</div>
        <div class="error-message" id="errorMessage">There was an issue submitting your donation. Please try again.</div>

        <form id="donationForm" action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="form-group">
                <label class="required">Choose an amount</label>
                <div class="amounts">
                    <label><input type="radio" name="amount" value="25"><span>$25</span></label>
                    <label><input type="radio" name="amount" value="50" checked><span>$50</span></label>
                    <label><input type="radio" name="amount" value="100"><span>$100</span></label>
                    <label><input type="radio" name="amount" value="250"><span>$250</span></label>
                </div>
                <input type="number" name="custom_amount" placeholder="Or enter a custom amount" min="1">
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="name" class="required">Full Name</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email" class="required">Email</label>
                    <input type="email" id="email" name="email" required>
                </div>
            </div>

            <div class="form-group">
                <label for="frequency" class="required">Frequency</label>
                <select id="frequency" name="frequency" required>
                    <option value="One-time">One-time</option>
                    <option value="Monthly">Monthly</option>
                    <option value="Annually">Annually</option>
                </select>
            </div>

            <button type="submit">Donate Now</button>
        </form>
    </div>

    <script>
        const form = document.getElementById('donationForm');
        const successMessage = document.getElementById('successMessage');
        const errorMessage = document.getElementById('errorMessage');

        form.addEventListener('submit', function(e) {
            successMessage.style.display = 'none';
            errorMessage.style.display = 'none';

            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();

            if (!name || !email) {
                errorMessage.textContent = 'Please fill in your name and email.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                errorMessage.textContent = 'Please enter a valid email address.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }
        });
    </script>
</body>
</html>

How to Use This Template

Step 1: Copy the Code

Copy the entire HTML above and save it as donation-form.html. Upload it, embed it, or test locally first.

Step 2: Create a FormBackend Account

Create a free account at FormBackend, where every donation record will be received and stored.

Step 3: Update the Form Action URL

Replace YOUR_FORM_ID with your real FormBackend form ID so the action reads https://www.formbackend.com/f/abc123xyz.

Your donation form is now live. To take payment, follow up by email or set a custom redirect to your payment processor.

Donation Form Variations

Variation 1: Simple Donation Pledge

A minimal version that captures intent:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="number" name="amount" placeholder="Amount ($)" min="1" required>
    <button type="submit">Pledge a Donation</button>
</form>

Variation 2: Donation in Honor of Someone

For memorial or tribute gifts:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Your name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="number" name="amount" placeholder="Amount ($)" min="1" required>
    <input type="text" name="in_honor_of" placeholder="In honor of (optional)">
    <button type="submit">Donate</button>
</form>

Variation 3: Donation with Gift Aid / Tax Receipt

Collect the details needed for a receipt:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Full name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="number" name="amount" placeholder="Amount ($)" min="1" required>
    <input type="text" name="address" placeholder="Mailing address for receipt">
    <label><input type="checkbox" name="tax_receipt" value="Yes"> Send me a tax receipt</label>
    <button type="submit">Donate</button>
</form>

How to Customize This Template

Match your brand: Change the button background: #38a169; and body gradient to your colors.

Edit preset amounts: Change the value and <span> text on each amount radio to your suggested giving levels.

Add recurring options: The frequency dropdown already supports one-time, monthly, and annual gifts — edit the options as needed.

Redirect to payment: Set a custom redirect in FormBackend to send donors to Stripe, PayPal, or your payment page after submit.

Adjust width: Change max-width: 500px; to fit your layout.

Integration with FormBackend

FormBackend lets you manage donations without a backend. Once records arrive, you can:

View every donor record in one organized dashboard
Get an email notification for each new donation
Send an automatic thank-you email to donors
Push records to Google Sheets or your CRM via integrations and webhooks
Export donor data as CSV for receipts and reporting

For more on receiving emails and managing submissions, see the FormBackend documentation.

Frequently Asked Questions

Is this donation form template free? Yes, completely free. The only cost is FormBackend for receiving and managing records, which starts with a free tier.

Does this form process payments? It collects pledges and donor details, not card payments. Follow up with a payment link or redirect to Stripe/PayPal after submit.

How do I get notified of new donations? FormBackend emails you instantly and stores every donor record. You can also push records to Google Sheets or a CRM.

Can donors choose a preset or custom amount? Yes. The template includes preset amount buttons plus a custom amount field.

Can I thank donors automatically? Yes. FormBackend can send an automatic thank-you email when a donation is submitted.

Does this work for nonprofits on any platform? Absolutely. It’s plain HTML and CSS, so it works anywhere.

More form templates

Looking for a different form type? Browse our full collection of free HTML form templates, or try one of these:

Contact Form Template — Collect name, email, subject, and message
Volunteer Signup Form Template — Recruit and organize volunteers
RSVP Form Template — Manage event attendance
Newsletter Signup Form Template — Grow your supporter list

Need a custom form? Use our HTML form generator to build one visually.