Volunteer application form template

    When they are free, what they would like to help with, and why they want to volunteer.

    Reviewed by Ritu Fadadu · Last reviewed

    Customize in the generatorGet a free endpoint

    Preview and code

    Preview

    When are you available? (optional)
    What would you like to help with? (optional)

    Code — replace YOUR_ENDPOINT_ID with your form's ID

    <style>
  .fb-form { display: grid; gap: 1rem; max-width: 36rem; }
  .fb-field { display: flex; flex-direction: column; gap: 0.375rem; }
  .fb-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  .fb-label { font-weight: 600; }
  .fb-optional { font-weight: 400; color: #6b7280; }
  .fb-help { margin: 0; font-size: 0.875rem; color: #6b7280; }
  .fb-input { box-sizing: border-box; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; color: #111827; font: inherit; }
  .fb-input:focus { border-color: #2563eb; outline: 2px solid #2563eb; outline-offset: 1px; }
  .fb-options { display: flex; flex-direction: column; gap: 0.5rem; }
  .fb-option { display: flex; align-items: center; gap: 0.5rem; }
  .fb-check { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: #2563eb; }
  .fb-button { justify-self: start; min-height: 44px; padding: 0.625rem 1.25rem; border: 0; border-radius: 0.5rem; background: #2563eb; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
  .fb-button:hover { background: #1d4ed8; }
  .fb-button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
  .fb-button:disabled { opacity: 0.6; cursor: wait; }
  .fb-status { margin: 0; min-height: 1.5em; }
  @media (min-width: 640px) {
    .fb-form { grid-template-columns: 1fr 1fr; }
    .fb-field, .fb-button, .fb-status { grid-column: 1 / -1; }
    .fb-field--half { grid-column: auto; }
  }
</style>

<form id="fb-form" class="fb-form" action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
  <div class="fb-field fb-field--half">
    <label for="fb-name" class="fb-label">Full name</label>
    <input type="text" id="fb-name" name="name" class="fb-input" required autocomplete="name">
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-email" class="fb-label">Email</label>
    <input type="email" id="fb-email" name="email" class="fb-input" required autocomplete="email">
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-phone" class="fb-label">Phone <span class="fb-optional">(optional)</span></label>
    <input type="tel" id="fb-phone" name="phone" class="fb-input" autocomplete="tel">
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-city" class="fb-label">
      Town or city
      <span class="fb-optional">(optional)</span>
    </label>
    <input type="text" id="fb-city" name="city" class="fb-input" autocomplete="address-level2">
  </div>
  <fieldset class="fb-field fb-fieldset">
    <legend class="fb-label">
      When are you available?
      <span class="fb-optional">(optional)</span>
    </legend>
    <div class="fb-options">
      <label class="fb-option">
        <input type="checkbox" name="availability" value="weekday-mornings" class="fb-check">
        <span>Weekday mornings</span>
      </label>
      <label class="fb-option">
        <input type="checkbox" name="availability" value="weekday-afternoons" class="fb-check">
        <span>Weekday afternoons</span>
      </label>
      <label class="fb-option">
        <input type="checkbox" name="availability" value="weekday-evenings" class="fb-check">
        <span>Weekday evenings</span>
      </label>
      <label class="fb-option">
        <input type="checkbox" name="availability" value="weekends" class="fb-check">
        <span>Weekends</span>
      </label>
    </div>
  </fieldset>
  <fieldset class="fb-field fb-fieldset">
    <legend class="fb-label">
      What would you like to help with?
      <span class="fb-optional">(optional)</span>
    </legend>
    <div class="fb-options">
      <label class="fb-option">
        <input type="checkbox" name="interests" value="events" class="fb-check">
        <span>Events</span>
      </label>
      <label class="fb-option">
        <input type="checkbox" name="interests" value="fundraising" class="fb-check">
        <span>Fundraising</span>
      </label>
      <label class="fb-option">
        <input type="checkbox" name="interests" value="admin-and-office" class="fb-check">
        <span>Admin and office</span>
      </label>
      <label class="fb-option">
        <input type="checkbox" name="interests" value="outreach" class="fb-check">
        <span>Outreach</span>
      </label>
      <label class="fb-option">
        <input type="checkbox" name="interests" value="anything-useful" class="fb-check">
        <span>Anything useful</span>
      </label>
    </div>
  </fieldset>
  <div class="fb-field">
    <label for="fb-motivation" class="fb-label">Why would you like to volunteer with us?</label>
    <textarea id="fb-motivation" name="motivation" class="fb-input" required rows="4"></textarea>
  </div>
  <div class="fb-field">
    <label for="fb-experience" class="fb-label">
      Any relevant experience?
      <span class="fb-optional">(optional)</span>
    </label>
    <textarea id="fb-experience" name="experience" class="fb-input" rows="3"></textarea>
  </div>
  <div class="fb-field">
    <label class="fb-option">
      <input type="checkbox" id="fb-consent" name="consent" value="yes" class="fb-check" required>
      <span>I agree to be contacted about volunteering opportunities</span>
    </label>
  </div>
  <!-- Honeypot: keep it hidden. People never see it; bots fill it in and get flagged as spam. -->
  <div
    aria-hidden="true"
    style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden"
  >
    <label for="fb-honey">Leave this field empty</label>
    <input type="text" id="fb-honey" name="_honey" tabindex="-1" autocomplete="off">
  </div>
  <input type="hidden" name="_subject" value="New volunteer application">
  <button type="submit" class="fb-button">Apply to volunteer</button>
</form>

    About this template

    A volunteer application is closer to a conversation than a job application. This template asks the two things a coordinator plans around — when someone is available and what they would like to do — as multiple-choice questions, so you can filter the export for everyone free on weekends who is interested in events.

    Motivation is the one required free-text question, because it is what a coordinator reads first. Experience is optional: many of the best volunteers have none, and a required experience box quietly tells them not to apply.

    Both multiple-choice questions send arrays from the HTML + JS and React versions, collected with getAll(), so a volunteer who ticks three time slots arrives with all three — not just the last one ticked.

    Fields in this template

    FieldNameTypeRequiredWhy it is there
    Full namenameShort textYesRequired.
    EmailemailEmailYesRequired, named email for Auto Reply.
    PhonephonePhoneNoOptional.
    Town or citycityShort textNoOptional, to match people to local opportunities.
    When are you available?availabilityMultiple choiceNoMultiple choice, sent as an array by the script versions. Optional, because a browser cannot require “at least one box” without JavaScript.
    What would you like to help with?interestsMultiple choiceNoOptional multiple choice, also sent as an array.
    Why would you like to volunteer with us?motivationLong textYesRequired. The answer coordinators read first.
    Any relevant experience?experienceLong textNoOptional, so nobody is put off for having none.
    I agree to be contacted about volunteering opportunitiesconsentCheckboxYesRequired permission to contact them.

    Each name becomes a column in your dashboard and a row in the notification email. The hidden _honey field is the honeypot; _subject sets the email's subject line. Both are reserved fields and never appear in the field table.

    Make it yours

    • Replace the interest areas with your organisation's real roles.
    • Add an over_18 checkbox if some roles require adult volunteers.
    • Link to your safeguarding or volunteer policy next to the consent checkbox.
    • Ask about references or background checks in your follow-up conversation, not on the form: it keeps the first step light, and those details belong in a more private channel.
    • Use the success message to say what happens next — an introductory call, a training date — so applicants are not left wondering.

    Where the submissions go

    • Each application is stored and emailed to the coordinator; export to CSV on every plan.
    • On Starter and above, build a volunteer roster in Google Sheets automatically.
    • Welcome every applicant straight away with Auto Reply on Starter and above.

    Job Application Forms: plans, destinations and a worked setup →

    Before you publish it

    1. Create a form in the Formboost dashboard and replace YOUR_ENDPOINT_ID with its ID.
    2. Pick one variant: HTML posts and reloads, HTML + JS and React send JSON with fetch() and stay on the page.
    3. For the plain HTML version, add a hidden _redirect with an https:// thank-you page on the same site as the form — anything else falls back to Formboost's page.
    4. Submit it once from the live page and check the submission in your dashboard. Every request is acknowledged, so the dashboard is the real test. Troubleshooting covers the rest.

    More form templates

    Put the volunteer application form live

    Free forever: 500 submissions a month across 10 forms, no card.

    Get a free endpointOpen the form generator