Skip to content
Zafar Foundation
Donate
Zafar Foundation

Design patterns · Section 12 of 14

Donation widgets

Ten donation widgets. Each is a real form that opens the donate page with the chosen fund, frequency and amount. Click View code under any design to see its HTML, or Copy HTML to paste it into a page.

Donation widgets · Design 01

Toggle Amount Card

A centred card with a one-time/monthly switch; the amount buttons change with it (£25 to £250 once, £10 to £100 monthly) using only CSS.

Current appeal

Food parcels, hand pumps for clean water, and help with medical and other essential needs.

How often would you like to give?
Choose an amount

A single gift to the appeal. Other amount

  • Registered charity 1215863
  • Gift Aid adds 25p to every £1

Donation widgets · Design 02

Compact Sidebar Card

A narrow one-time donation card for a single cause, placed beside page content (make it sticky with lg:sticky lg:top-28).

Students at wooden desks listening to a teacher writing on the board

Education

Fees, uniforms, books and stationery: the practical costs that decide whether a child keeps learning.

Support that keeps children and young people learning, from fees and materials to practical school needs.

Donation widgets · Design 03

Fund Selector Tiles

All nine funds as selectable tiles, with the current appeal as a large photo tile and a frequency switch beside Donate now.

The current appeal, a specific cause, or a general donation. Zakat and Sadaqah are kept separate.

Where your gift goes
How often

You choose the amount on the next page.

Donation widgets · Design 04

Zakat Focus

A Zakat-only widget: the fund is fixed with a hidden input, shown beside the nisab facts and a link to the Zakat calculator.

Zakat is distributed to eligible recipients in line with Islamic principles, and kept separate from Sadaqah.

Zakat rate
2.5%
Nisab in gold
87.48g
Nisab in silver
612.36g

Zakat is 2.5% of qualifying wealth held for a lunar year, once it is above the nisab threshold.

Calculate your Zakat
Goes to the Zakat fund only
Choose an amount

Worked out a different figure? Enter it on the donation page.

Registered charity 1215863

Donation widgets · Design 05

Gift Aid Callout

Amount buttons that show each gift with Gift Aid added, joined to a marigold panel that explains the 25p on every £1.

For UK taxpayers

Choose a one-time gift to the current appeal. If you pay UK tax, tick Gift Aid on the next page and your gift is worth more to families in Pakistan.

Amount
Other amount

25p

added to every £1 you give, at no cost to you, if you pay UK tax.

Tick the Gift Aid box in the donation form and enter your name, house name or number and postcode.

How Gift Aid works

Donation widgets · Design 06

Quick Donate Bar

A single white bar on teal with a frequency switch, amount buttons that change with it and Donate now; it stacks neatly on phones.

Your donation goes to practical help for people facing hardship in Pakistan and the UK.

How often
Amount
Other amount
  • Registered charity 1215863
  • Gift Aid adds 25p to every £1
  • Monthly gifts can be cancelled at any time

Donation widgets · Design 07

Ink Gift Card

A dark card where donors pick the type of gift (appeal, general, Zakat or Sadaqah) and an amount, with reassurance points alongside.

Make a donation

Give to the current appeal, as a general donation, or as Zakat or Sadaqah. Zakat and Sadaqah are kept separate.

  • Registered charity 1215863, England and Wales
  • Gift Aid available for UK taxpayers
  • Give once or set up a monthly gift on the next page
Type of gift
One-time amount
Other amount

Donation widgets · Design 08

Two Step Panels

A static two-step layout: step 1 picks a cause and step 2 picks an amount and submits, both visible side by side.

Choose one of the five causes or a general donation, then an amount. You can add Gift Aid on the next page.

Step 1: choose a cause

Step 1

Choose a cause

Step 2: choose an amount

Step 2

Choose an amount

A one-time gift. Other amount or give monthly.

Gift Aid adds 25p to every £1 for UK taxpayers.

Donation widgets · Design 09

Photo Monthly Grid

A full-bleed photo beside a dark panel of large monthly amount tiles for clean water, with frequency and fund fixed by hidden inputs.

A boy pumping water from a green hand pump into a bucket

Clean water

Hand pumps that give households a safe and reliable water supply close to home.

Choose a monthly amount
Give once instead

Monthly gifts can be cancelled at any time.

Donation widgets · Design 10

Minimal Inline Strip

One line on a marigold band: a short ask, four amount buttons and Donate now, for the end of an article or page.

A one-time gift for families in Pakistan. Other amount

Amount