Donation · 2 designs
Doação

A donation / fundraising form authored in Portuguese (pt-BR) with a preset-amount chip selector, recurring toggle, custom-amount input, name, email and an optional message. The Organic design lives on a warm sand canvas with deep forest accents, a hand-drawn leaf in the corner and pill-shaped chips — the Patagonia / mutual-aid look. The Soft design is a friendlier card variant with a violet gradient CTA for creators and Substack-style drives. Both default to BRL but the currency prefix is one line of CSS away from EUR, USD or anything else.
Open in builder
HTML · 1 file
donation-organic.html
<!-- SaveForm.io: donation (organic) -->
<style>
[data-sf-tpl="donation"] {
  all: revert;
  box-sizing: border-box;
  display: block;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #18181b;
  -webkit-font-smoothing: antialiased;
}
[data-sf-tpl="donation"] *,
[data-sf-tpl="donation"] *::before,
[data-sf-tpl="donation"] *::after {
  box-sizing: border-box;
}
[data-sf-tpl="donation"] input,
[data-sf-tpl="donation"] textarea,
[data-sf-tpl="donation"] select,
[data-sf-tpl="donation"] button {
  font: inherit;
  color: inherit;
  margin: 0;
}
[data-sf-tpl="donation"] button {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-sf-tpl="donation"] label {
  display: block;
}
[data-sf-tpl="donation"].sf-donation--organic {
  max-width: 500px;
  background: #f7efde;
  border-radius: 28px;
  padding: 36px 32px 32px;
  position: relative;
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "Inter", sans-serif;
  color: #2d3a23;
  box-shadow: 0 20px 60px -25px rgba(58, 95, 58, 0.4);
}
[data-sf-tpl="donation"] .sf-donation__leaf {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  pointer-events: none;
  opacity: 0.85;
}
[data-sf-tpl="donation"] .sf-donation__blob {
  position: absolute;
  bottom: -80px;
  left: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(200, 122, 74, 0.32), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
[data-sf-tpl="donation"] .sf-donation__inner {
  position: relative;
  z-index: 1;
}
[data-sf-tpl="donation"] .sf-donation__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(58, 95, 58, 0.12);
  color: #3a5f3a;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
[data-sf-tpl="donation"] .sf-donation__eyebrow-dot {
  width: 6px;
  height: 6px;
  background: #c87a4a;
  border-radius: 50%;
}
[data-sf-tpl="donation"] .sf-donation__title {
  font-family: "Cormorant Garamond", "Iowan Old Style", "Georgia", serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0 0 8px 0;
  color: #1f3015;
}
[data-sf-tpl="donation"] .sf-donation__title em {
  font-style: italic;
  color: #c87a4a;
}
[data-sf-tpl="donation"] .sf-donation__lede {
  font-size: 14px;
  color: #4a6240;
  line-height: 1.6;
  margin: 0 0 24px 0;
}
[data-sf-tpl="donation"] .sf-donation__freq {
  display: inline-flex;
  background: rgba(58, 95, 58, 0.08);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 20px;
  border: 1px solid rgba(58, 95, 58, 0.12);
}
[data-sf-tpl="donation"] .sf-donation__freq input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
[data-sf-tpl="donation"] .sf-donation__freq label {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #4a6240;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
[data-sf-tpl="donation"] .sf-donation__freq input:checked + label {
  background: #3a5f3a;
  color: #f7efde;
  box-shadow: 0 4px 12px -4px rgba(58, 95, 58, 0.5);
}
[data-sf-tpl="donation"] .sf-donation__amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
[data-sf-tpl="donation"] .sf-donation__amounts input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
[data-sf-tpl="donation"] .sf-donation__amounts label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 6px 12px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(58, 95, 58, 0.18);
  font-weight: 700;
  color: #3a5f3a;
  cursor: pointer;
  transition: all 200ms ease;
}
[data-sf-tpl="donation"] .sf-donation__amounts label:hover {
  transform: translateY(-2px);
  border-color: #3a5f3a;
}
[data-sf-tpl="donation"] .sf-donation__amounts input:checked + label {
  background: #3a5f3a;
  color: #f7efde;
  border-color: #3a5f3a;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(58, 95, 58, 0.6);
}
[data-sf-tpl="donation"] .sf-donation__amount-currency {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 2px;
}
[data-sf-tpl="donation"] .sf-donation__amount-value {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
[data-sf-tpl="donation"] .sf-donation__custom {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(58, 95, 58, 0.18);
  border-radius: 16px;
  padding: 4px 14px 4px 14px;
  margin-bottom: 18px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
[data-sf-tpl="donation"] .sf-donation__custom:focus-within {
  border-color: #3a5f3a;
  box-shadow: 0 0 0 4px rgba(58, 95, 58, 0.12);
}
[data-sf-tpl="donation"] .sf-donation__custom-prefix {
  font-weight: 700;
  font-size: 13px;
  color: #4a6240;
  letter-spacing: 0.05em;
  margin-right: 8px;
}
[data-sf-tpl="donation"] .sf-donation__custom input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #1f3015;
  outline: none;
  padding: 12px 0;
}
[data-sf-tpl="donation"] .sf-donation__field {
  margin-bottom: 14px;
}
[data-sf-tpl="donation"] .sf-donation__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
[data-sf-tpl="donation"] .sf-donation__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: #4a6240;
}
[data-sf-tpl="donation"] .sf-donation__input,
[data-sf-tpl="donation"] .sf-donation__textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(58, 95, 58, 0.18);
  border-radius: 14px;
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: #1f3015;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
[data-sf-tpl="donation"] .sf-donation__textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.55;
}
[data-sf-tpl="donation"] .sf-donation__input:focus,
[data-sf-tpl="donation"] .sf-donation__textarea:focus {
  border-color: #3a5f3a;
  box-shadow: 0 0 0 4px rgba(58, 95, 58, 0.12);
}
[data-sf-tpl="donation"] .sf-donation__input::placeholder,
[data-sf-tpl="donation"] .sf-donation__textarea::placeholder {
  color: #94a888;
}
[data-sf-tpl="donation"] .sf-donation__button {
  width: 100%;
  margin-top: 12px;
  padding: 16px 18px;
  background: #3a5f3a;
  background-image: linear-gradient(135deg, #3a5f3a, #2d4a2d);
  color: #f7efde;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
[data-sf-tpl="donation"] .sf-donation__button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -10px rgba(58, 95, 58, 0.55);
}
[data-sf-tpl="donation"] .sf-donation__heart {
  width: 16px;
  height: 16px;
}
[data-sf-tpl="donation"] .sf-donation__fine {
  text-align: center;
  font-size: 11px;
  color: #6b7e5b;
  margin: 12px 0 0 0;
  line-height: 1.5;
}
[data-sf-tpl="donation"] .sf-donation__honey {
  position: absolute;
  left: -9999px;
}
/* --- Builder-compat: organic-aesthetic radio cards. The template body
   uses bespoke __freq (pills) and __amounts (cards) groups; the builder
   only emits one __radio-group shape per design, so we pick the more
   common amount-card look. */
[data-sf-tpl="donation"] .sf-donation__radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 6px;
  position: relative;
}
[data-sf-tpl="donation"] .sf-donation__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
[data-sf-tpl="donation"] .sf-donation__radio-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 6px 12px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(58, 95, 58, 0.18);
  font-weight: 700;
  color: #3a5f3a;
  cursor: pointer;
  transition: all 200ms ease;
  text-align: center;
  min-width: 0;
}
[data-sf-tpl="donation"] .sf-donation__radio-label:hover {
  transform: translateY(-2px);
  border-color: #3a5f3a;
}
[data-sf-tpl="donation"] .sf-donation__radio:checked + .sf-donation__radio-label {
  background: #3a5f3a;
  color: #f7efde;
  border-color: #3a5f3a;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(58, 95, 58, 0.6);
}
[data-sf-tpl="donation"] .sf-donation__radio-text {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
}
</style>
<form
  class="sf-donation--organic"
  data-sf-tpl="donation"
  action="https://saveform.io/api/submit/YOUR_FORM_ID"
  method="POST"
>
  <svg class="sf-donation__leaf" viewBox="0 0 200 200" aria-hidden="true">
    <path d="M180 20c-60 20-90 50-110 95-12 28-8 60 12 70 18 8 50-2 76-30 38-40 50-100 22-135z"
          fill="#3a5f3a" opacity="0.22"/>
    <path d="M180 20c-50 30-78 60-94 100" stroke="#3a5f3a" stroke-width="1" fill="none" opacity="0.45"/>
  </svg>
  <span class="sf-donation__blob" aria-hidden="true"></span>

  <div class="sf-donation__inner">
    <span class="sf-donation__eyebrow">
      <span class="sf-donation__eyebrow-dot" aria-hidden="true"></span>
      Campanha aberta
    </span>
    <h2 class="sf-donation__title">Plante uma <em>sementinha</em>.</h2>
    <p class="sf-donation__lede">
      Toda contribuição vai direto para a equipe de campo. Recibo por
      e-mail em segundos, transparência total no fim do mês.
    </p>

    <input type="text" name="_honey" class="sf-donation__honey" tabindex="-1" autocomplete="off" />

    <div class="sf-donation__freq" role="group" aria-label="Frequência">
      <input type="radio" id="sf-donation-fq1" name="frequencia" value="unica" />
      <label for="sf-donation-fq1">Doação única</label>
      <input type="radio" id="sf-donation-fq2" name="frequencia" value="mensal" checked />
      <label for="sf-donation-fq2">Mensal</label>
    </div>

    <div class="sf-donation__amounts">
      <input type="radio" id="sf-donation-a1" name="valor" value="25" />
      <label for="sf-donation-a1">
        <span class="sf-donation__amount-currency">R$</span>
        <span class="sf-donation__amount-value">25</span>
      </label>
      <input type="radio" id="sf-donation-a2" name="valor" value="50" checked />
      <label for="sf-donation-a2">
        <span class="sf-donation__amount-currency">R$</span>
        <span class="sf-donation__amount-value">50</span>
      </label>
      <input type="radio" id="sf-donation-a3" name="valor" value="100" />
      <label for="sf-donation-a3">
        <span class="sf-donation__amount-currency">R$</span>
        <span class="sf-donation__amount-value">100</span>
      </label>
      <input type="radio" id="sf-donation-a4" name="valor" value="250" />
      <label for="sf-donation-a4">
        <span class="sf-donation__amount-currency">R$</span>
        <span class="sf-donation__amount-value">250</span>
      </label>
    </div>

    <label class="sf-donation__custom" for="sf-donation-custom">
      <span class="sf-donation__custom-prefix">R$</span>
      <input id="sf-donation-custom" type="number" name="valor_personalizado" placeholder="Outro valor" min="1" step="1" />
    </label>

    <div class="sf-donation__grid">
      <div>
        <label class="sf-donation__label" for="sf-donation-nome">Nome</label>
        <input id="sf-donation-nome" class="sf-donation__input" type="text" name="nome" required />
      </div>
      <div>
        <label class="sf-donation__label" for="sf-donation-email">E-mail</label>
        <input id="sf-donation-email" class="sf-donation__input" type="email" name="email" required />
      </div>
    </div>

    <div class="sf-donation__field">
      <label class="sf-donation__label" for="sf-donation-msg">Mensagem (opcional)</label>
      <textarea id="sf-donation-msg" class="sf-donation__textarea" name="mensagem" placeholder="Em homenagem a, ou só um oi mesmo..."></textarea>
    </div>

    <button class="sf-donation__button" type="submit">
      <svg class="sf-donation__heart" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M12 21s-7-4.5-9.5-9C.5 7.5 3.5 3 8 3c2 0 3.5 1 4 2.5C12.5 4 14 3 16 3c4.5 0 7.5 4.5 5.5 9C19 16.5 12 21 12 21z"/>
      </svg>
      Doar agora
    </button>
    <p class="sf-donation__fine">
      Pagamento seguro via Pix, cartão ou boleto · recibo automático
    </p>
  </div>
</form>
Replace YOUR_FORM_ID with the id of a form in your SaveForm dashboard. Every class is namespaced under [data-sf-tpl="donation"] so the template cannot collide with (or be overridden by) your site styles.
Other templates

See all