Website kits
Nonprofit donate page
Donate page with monthly and one-time giving tiers, a donation form, phone and mail options, four other ways to give, a tax note and a six-question FAQ.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page every Donate button leads to. It opens with a short promise list — where the money goes, receipts, how to stop a monthly gift — because those are the doubts that make people abandon a gift halfway. Monthly tiers come before one-time amounts, since regular gifts let a pantry plan its orders, and every amount is tied to something specific. The form collects frequency, amount, name, email and an optional tribute, and the dark panel beside it offers phone giving and a contact address. Other ways to give, a plain tax note and an FAQ catch donors who prefer checks, food drives or matching gifts. This form does not take payment on its own: connect a payment add-on for Elementor Pro Forms, or swap the form for your donation platform’s embed or link and keep the rest of the page. Have your accountant check the tax wording, as rules on deductibility and receipts differ by country and type of organization.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 24
- Container (grid) × 2
- Container (grid, 3 columns) × 1
- Container (grid, 4 columns) × 2
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 17
- Heading × 17
- Icon List × 1
- Button × 8
- Image × 1
- Form × 1
- Icon Box × 4
- Accordion × 1
Things worth knowing
- The donation form converts to an Elementor Pro Form with eight fields: two selects (frequency and amount, with their options), a number field, first and last name, email, a tribute text field and a newsletter checkbox. It needs Elementor Pro and collects details only — real payments need a payment add-on or a link to your donation platform.
- The newsletter checkbox arrives with the same text as its field label and its option, so clear the field label after import if it shows twice.
- The seven tier cards stay as Containers with a Heading, Text Editor and Button each; every Give button points to the give section, whose ID becomes a prefixed CSS ID that the buttons are rewritten to match.
- The four other-ways cards become Icon Box widgets (check, heart, redo and star icons), the promise list an Icon List, and the six questions one Accordion widget.
- Below 780px the tiers, the form and its side panel, and the other-ways cards all stack to one column.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Donate — Bramwell Community Pantry</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#3b2346;background:#faf6ee}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:#3b2346;font-weight:700}
h1{font-size:52px;line-height:1.1;letter-spacing:-.015em;margin:0 0 18px}
h2{font-size:36px;line-height:1.18;letter-spacing:-.01em;margin:0 0 14px}
h3{font-size:22px;line-height:1.3;margin:0 0 8px}
p{font-size:17px;line-height:1.7;color:#6b5b70;margin:0 0 16px}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#4f7a3a;margin:0 0 12px}
.button{display:inline-block;padding:15px 28px;border-radius:10px;background:#f2a93b;color:#3b2346;text-decoration:none;font-weight:800;font-size:16px}
.hero{padding:64px 0 72px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.promise{display:flex;flex-direction:column;gap:10px;margin:6px 0 28px}
.promise > div{display:flex;gap:12px;align-items:baseline;font-size:17px;line-height:1.5;color:#3b2346}
.tick{color:#4f7a3a;font-size:16px}
.hero-img{width:100%;height:460px;object-fit:cover;border-radius:18px;display:block;background:#f6e3d6}
.blush{background:#f6e3d6}
.head{max-width:680px;margin:0 0 36px}
.group-title{font-size:26px;margin:0 0 18px}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 44px}
.tiers-once{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.tier{display:flex;flex-direction:column;align-items:flex-start;padding:28px;border-radius:14px;background:#faf6ee}
.tier h3{font-size:30px;margin:0 0 8px}
.tier p{font-size:16px;line-height:1.6;margin:0 0 20px;flex:1}
.pick{display:inline-block;padding:11px 18px;border-radius:10px;border:2px solid #3b2346;color:#3b2346;text-decoration:none;font-weight:800;font-size:15px}
.pick-gold{border-color:#f2a93b;background:#f2a93b}
.give{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:start}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;padding:34px;border-radius:18px;background:#f6e3d6}
.field{display:flex;flex-direction:column;gap:6px}
.full{grid-column:1 / -1}
.check{grid-column:1 / -1;display:flex;gap:10px;align-items:center}
label{font-size:14px;font-weight:800;color:#3b2346}
.check label{font-weight:600;font-size:15px}
input,select{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #6b5b70;border-radius:8px;background:#faf6ee;color:#3b2346}
.check input{width:18px;height:18px;padding:0;margin:0}
.submit{grid-column:1 / -1;justify-self:start;padding:15px 30px;border:0;border-radius:10px;background:#3b2346;color:#faf6ee;font:inherit;font-size:16px;font-weight:800;cursor:pointer}
.aside{padding:32px;border-radius:18px;background:#3b2346}
.aside h2{font-size:26px;color:#faf6ee}
.aside h3{font-size:18px;color:#faf6ee;margin:22px 0 6px}
.aside p{font-size:16px;color:#f6e3d6;margin:0}
.ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.way{padding:26px;border-radius:14px;background:#faf6ee}
.way-icon{display:inline-block;color:#4f7a3a;font-size:22px;line-height:1;margin:0 0 12px}
.way h3{font-size:20px}
.way p{font-size:15px;line-height:1.65;margin:0}
.tax{max-width:820px;padding:28px 32px;border-left:4px solid #4f7a3a;border-radius:0 14px 14px 0;background:#f6e3d6}
.tax h2{font-size:26px}
.tax p{margin:0;color:#3b2346}
.faq-sec{padding-top:0}
.faq{display:flex;flex-direction:column;gap:12px;max-width:820px}
details{border:2px solid #f6e3d6;border-radius:12px;padding:18px 22px;background:#faf6ee}
summary{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:700;color:#3b2346;cursor:pointer}
details p{margin:12px 0 0;font-size:16px}
@media(max-width:780px){
section{padding:52px 0}
.wrap{padding:0 16px}
.hero{padding:36px 0 52px}
.faq-sec{padding-top:0}
.hero .wrap,.tiers,.tiers-once,.give,.ways,form{grid-template-columns:minmax(0,1fr);gap:16px}
.tiers{margin:0 0 32px}
h1{font-size:38px}
h2{font-size:29px}
.hero-img{height:280px}
.tier{padding:22px 20px}
form{padding:24px 18px}
.aside{padding:26px 20px}
.tax{padding:22px 20px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Donate</p>
<h1>Your gift puts groceries on a neighbor’s table this week</h1>
<p>We buy fresh food in bulk from regional growers, so every gift goes further than it would at the checkout. Monthly gifts help most, because they let us plan the next season’s orders.</p>
<div class="promise">
<div><span class="tick">✓</span><span>Most of every dollar buys food or delivers it</span></div>
<div><span class="tick">✓</span><span>A receipt by email for every gift</span></div>
<div><span class="tick">✓</span><span>Change or stop a monthly gift at any time</span></div>
</div>
<a class="button" href="#give">Give now</a>
</div>
<img class="hero-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/nonprofit/family-kitchen.jpg" width="1000" height="1250" alt="Mother and young daughter washing carrots and peppers together at a home kitchen counter">
</div>
</section>
<section class="blush">
<div class="wrap">
<div class="head">
<p class="eyebrow">Choose an amount</p>
<h2>What your gift buys</h2>
<p>Sample costs for this template, based on what a small pantry pays wholesale. Replace them with your own figures.</p>
</div>
<h3 class="group-title">Give monthly</h3>
<div class="tiers">
<div class="tier"><h3>$10 a month</h3><p>Sends one child home with a Weekend Backpack every Friday of the school year.</p><a class="pick" href="#give">Give $10 monthly</a></div>
<div class="tier"><h3>$25 a month</h3><p>Fills one family’s grocery bag with produce, milk, eggs and staples once a month, all year.</p><a class="pick pick-gold" href="#give">Give $25 monthly</a></div>
<div class="tier"><h3>$50 a month</h3><p>Covers every Doorstep Delivery for one older neighbor, twice a month, all year round.</p><a class="pick" href="#give">Give $50 monthly</a></div>
</div>
<h3 class="group-title">Give once</h3>
<div class="tiers tiers-once">
<div class="tier"><h3>$25</h3><p>A week of groceries for a family of four.</p><a class="pick" href="#give">Give $25</a></div>
<div class="tier"><h3>$50</h3><p>A month of Weekend Backpacks for five children.</p><a class="pick" href="#give">Give $50</a></div>
<div class="tier"><h3>$100</h3><p>A month of Doorstep Delivery for two neighbors.</p><a class="pick" href="#give">Give $100</a></div>
<div class="tier"><h3>$250</h3><p>Fresh produce for one Mobile Pantry stop.</p><a class="pick" href="#give">Give $250</a></div>
</div>
</div>
</section>
<section id="give">
<div class="wrap give">
<form action="#" method="post">
<div class="field"><label for="d-frequency">How often</label><select id="d-frequency" name="frequency"><option>Monthly</option><option>One time</option></select></div>
<div class="field"><label for="d-amount">Amount</label><select id="d-amount" name="amount"><option>$10</option><option selected>$25</option><option>$50</option><option>$100</option><option>$250</option><option>Other amount</option></select></div>
<div class="field full"><label for="d-other">Other amount in dollars (optional)</label><input id="d-other" name="other_amount" type="number" min="1" step="1"></div>
<div class="field"><label for="d-first">First name</label><input id="d-first" name="first_name" type="text" autocomplete="given-name" required></div>
<div class="field"><label for="d-last">Last name</label><input id="d-last" name="last_name" type="text" autocomplete="family-name" required></div>
<div class="field full"><label for="d-email">Email for your receipt</label><input id="d-email" name="email" type="email" autocomplete="email" required></div>
<div class="field full"><label for="d-honor">Give in honor or memory of (optional)</label><input id="d-honor" name="tribute" type="text"></div>
<div class="check"><input id="d-news" name="newsletter" type="checkbox" value="yes"><label for="d-news">Send me the monthly pantry newsletter</label></div>
<button class="submit" type="submit">Continue to payment</button>
</form>
<aside class="aside">
<h2>Before you give</h2>
<p>Next you enter your card details on our payment page. Your receipt arrives by email as soon as the gift goes through.</p>
<h3>Give by phone</h3>
<p>Call (555) 018-4470, Monday to Friday, 9 am to 5 pm, and our office will take your gift.</p>
<h3>Questions about a gift</h3>
<p>Email [email protected] and we will reply within two working days.</p>
</aside>
</div>
</section>
<section class="blush" id="other-ways">
<div class="wrap">
<div class="head">
<p class="eyebrow">Other ways to give</p>
<h2>Not everything has to be online</h2>
</div>
<div class="ways">
<div class="way"><span class="way-icon">✓</span><h3>Mail a check</h3><p>Make it payable to Bramwell Community Pantry and send it to 75 Quarrystone Road, Bramwell. We send a receipt within two weeks.</p></div>
<div class="way"><span class="way-icon">♥</span><h3>Run a food drive</h3><p>Collect at your workplace, school or congregation. We lend bins and send a list of the items we are short on.</p></div>
<div class="way"><span class="way-icon">↻</span><h3>Workplace matching</h3><p>Many employers match staff gifts. Ask your HR team for the form, and we will confirm your donation for them.</p></div>
<div class="way"><span class="way-icon">★</span><h3>A gift in your will</h3><p>A bequest of any size keeps the pantry open for the next generation. Let us know so we can thank you.</p></div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="tax">
<h2>A note on taxes</h2>
<p>Bramwell Community Pantry is a registered nonprofit organization. Your gift may be tax-deductible to the extent the law allows where you live, and every receipt shows the amount and date of your gift. We cannot give tax advice, so please check with a tax professional about your own situation.</p>
</div>
</div>
</section>
<section class="faq-sec">
<div class="wrap">
<div class="head">
<p class="eyebrow">Questions</p>
<h2>Giving questions, answered</h2>
</div>
<div class="faq">
<details><summary>How do I change or cancel a monthly gift?</summary><p>Reply to any receipt email or call (555) 018-4470. We change or stop it the same week, with no questions asked.</p></details>
<details><summary>Will I get a receipt?</summary><p>Yes. Online gifts get an emailed receipt straight away. Monthly donors also get one summary receipt for the whole year each January.</p></details>
<details><summary>Does my gift stay in Bramwell?</summary><p>Yes. Every dollar is spent on food and programs for people in Bramwell and the Corran Valley townships.</p></details>
<details><summary>Can I give to one program only?</summary><p>Yes. Mention the program in the “in honor of” field or email [email protected], and we will put your gift toward it.</p></details>
<details><summary>Can I donate food instead of money?</summary><p>Yes. Drop off unopened, in-date food at the warehouse Monday to Friday, 8 am to noon. Money goes further, because we buy fresh food wholesale, but every can helps.</p></details>
<details><summary>Do you share my details?</summary><p>No. We never sell or swap donor details. We use them only to process your gift, send your receipt and, if you ask, the newsletter.</p></details>
</div>
</div>
</section>
</body>
</html>
