Donation Amount Picker — Give Form HTML CSS JS

The amount-selection step is where most donation forms succeed or fail. Ask for a freeform number and people freeze or give the minimum; offer well-chosen presets with a clear custom option and a sense of impact, and average gifts rise. This snippet builds a conversion-focused donation picker in plain HTML, CSS, and vanilla JavaScript: preset amount tiles, a custom-amount field, a one-time/monthly toggle, and a live "here's what your gift does" impact message.

Presets anchor the decision

Six preset tiles ($10 through $500) give donors a fast, low-effort choice and quietly anchor expectations — seeing $50 and $100 as options nudges the typical gift upward versus a blank field where many default to the smallest round number they can justify. Selecting a preset highlights it in green and updates the donate button's total. The presets are a simple array, so you tune them to your audience: the right ladder for a small grassroots cause differs from a major nonprofit.

A custom field that doesn't fight the presets

Donors who want to give a specific amount need an obvious path, but the custom field and the presets must stay mutually exclusive — selecting a preset clears the custom input, and typing (or focusing) the custom field deselects every preset. This custom flag is the detail that prevents the confusing state where both a preset and a custom number look active. Focusing the custom field immediately treats it as the active amount, so there's no extra click.

One-time vs. monthly, framed clearly

A frequency toggle switches between a one-time gift and a recurring monthly donation — and recurring donors are dramatically more valuable to a nonprofit over time, so making monthly a prominent, equal option (not a buried checkbox) matters. The donate button reflects the choice exactly: "Donate $25" or "Donate $25 / month", so the commitment is never ambiguous at the point of action.

Impact messaging that makes the gift tangible

Below the amount, a live message translates the dollar figure into concrete impact ("Supplies school materials for a child for a month"), keyed to the nearest preset at or below the chosen amount. Connecting money to outcome is one of the most reliable ways to increase giving — "$50" is abstract, but "a day of meals for a family of four" is a decision someone can feel good about. The message updates instantly as the amount changes, including for custom values, which fall to the appropriate tier's message.

Validation and submission

The donate button disables for an empty or sub-$1 custom amount, and the impact line prompts the donor to enter a value — so the form never lets someone submit a meaningless gift. On submit you proceed to payment with the { amount, freq } pair; the demo shows a thank-you confirmation, but in production this is where you'd hand off to Stripe, PayPal, or your payment processor. Because the amount and frequency are plain state, wiring that handoff is trivial.

Accessible and adaptable

The frequency control is a role="radiogroup", amounts are real buttons, and the whole form is driven by one sync() function that keeps every visual — active states, total, frequency label, impact, and the submit gate — consistent with the current selection. Re-theme the green to your brand and adjust the presets and impact copy, and it fits any cause.