Back to Templates
Donation4 fields

Donation Form

Accept donations with preset amounts and an optional supporter message.

Spam protectionEmail notificationsAI sales agentSubmission dashboardNo backend needed

Live Preview

Exactly what visitors will see on your site

Make a Donation

What you'll collect

Every field in this template, ready to use out of the box.

Full Name

text · required

Email

email · required

Donation Amount

select · required

Message (optional)

textarea · optional

Copy the Code

Choose HTML for static sites or React for component-based apps. Replace YOUR_FORM_ID with your Flowqen endpoint ID.

<form
  action="https://flowqen.com/api/f/YOUR_FORM_ID"
  method="POST"
  class="max-w-xl mx-auto rounded-[32px] border-2 border-[#231b17] bg-[#fffdf9] px-6 py-7 shadow-none sm:px-8"
>
  <h2 class="text-2xl font-semibold tracking-tight text-[#231b17] mb-6">Make a Donation</h2>


  <div class="space-y-4">
    <div>
      <label class="mb-1.5 block text-sm font-medium text-[#4f4138]">Full Name</label>
      <input type="text" name="full_name" class="w-full rounded-[18px] border border-[#d9cdc3] bg-white px-4 py-3 text-sm text-[#231b17] outline-none transition focus:border-[#231b17] focus:ring-4 focus:ring-[#231b17]/8" placeholder="Jane Doe" required />
    </div>


    <div>
      <label class="mb-1.5 block text-sm font-medium text-[#4f4138]">Email</label>
      <input type="email" name="email" class="w-full rounded-[18px] border border-[#d9cdc3] bg-white px-4 py-3 text-sm text-[#231b17] outline-none transition focus:border-[#231b17] focus:ring-4 focus:ring-[#231b17]/8" placeholder="jane@example.com" required />
    </div>


    <div>
      <label class="mb-1.5 block text-sm font-medium text-[#4f4138]">Donation Amount</label>
      <select name="amount" class="w-full rounded-[18px] border border-[#d9cdc3] bg-white px-4 py-3 text-sm text-[#231b17] outline-none transition focus:border-[#231b17] focus:ring-4 focus:ring-[#231b17]/8" required>
        <option value="">Select...</option>
        <option value="$10">$10</option>
        <option value="$25">$25</option>
        <option value="$50">$50</option>
        <option value="$100">$100</option>
        <option value="Custom">Custom</option>
      </select>
    </div>


    <div>
      <label class="mb-1.5 block text-sm font-medium text-[#4f4138]">Message (optional)</label>
      <textarea name="message" rows="4" class="w-full rounded-[18px] border border-[#d9cdc3] bg-white px-4 py-3 text-sm text-[#231b17] outline-none transition focus:border-[#231b17] focus:ring-4 focus:ring-[#231b17]/8 resize-none" placeholder="Leave a message of support..."></textarea>
    </div>
  </div>


  <!-- Honeypot (spam protection) -->
  <div style="display:none">
    <input type="text" name="_gotcha" style="display:none" />
  </div>


  <button type="submit" class="mt-6 w-full rounded-[18px] bg-[#231b17] py-3 text-sm font-semibold text-white transition hover:bg-[#3a2f29]">
    Donate
  </button>
</form>

What is a Donation Form?

A donation form template makes it easy for nonprofits, charities, and fundraisers to collect contributions online. This HTML form offers preset donation amounts and an optional message field, creating a simple and trustworthy giving experience. Connect it to Flowqen to receive donation notifications instantly.

Frequently Asked Questions

Common questions about donation form templates.

Start with this Donation Form

Create your form in 30 seconds — pre-filled with all the fields above. Free forever.