Volunteer form template

Free volunteer application form
template, HTML and React.

A volunteer form for charities, clubs and community groups. Volunteers say when they are free, what they would like to help with and what experience they bring.

Use this template Preview the template

250 submissions/month free. No credit card required.

Preview, restyle and copy the code.

Preview only. Nothing is sent from this page.

Your volunteer application form, ready to make your own.

The code includes the fields, the CSS for the style you chose and a hidden anti-spam field. Replace the placeholder endpoint with your own before publishing, or open it in the designer to change fields, colors and wording without touching code.

Customize in Form Koi

volunteer-application-form.html

<style>
.formkoi-form, .formkoi-form * { box-sizing: border-box; }
.formkoi-form { width: 100%; max-width: 560px; padding: clamp(20px, 5vw, 36px); background: #f6f7fb; color: #2b2d42; font: 16px/1.5 system-ui, sans-serif; border: 1px solid #2b2d4230; border-radius: 14px; }
.formkoi-form h2 { margin: 0 0 8px; font: inherit; font-size: 28px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.formkoi-form > p { margin: 0 0 18px; overflow-wrap: anywhere; }
.formkoi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.formkoi-field { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; }
.formkoi-field--half { grid-column: span 1; }
.formkoi-fields label, .formkoi-fields legend { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.formkoi-fields input:not([type=checkbox]):not([type=radio]):not([hidden]), .formkoi-fields textarea, .formkoi-fields select { display: block; width: 100%; min-width: 0; padding: 12px; border: 1px solid transparent; border-radius: 14px; background: #2b2d4212; color: #2b2d42; font: inherit; }
.formkoi-fields select { appearance: auto; }
.formkoi-fields textarea { min-height: 120px; resize: vertical; }
.formkoi-fields input::placeholder, .formkoi-fields textarea::placeholder { color: #2b2d4280; }
.formkoi-fields input[type=file] { padding: 10px; }
.formkoi-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.formkoi-choices legend { padding: 0; margin-bottom: 6px; }
.formkoi-choices label, .formkoi-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; }
.formkoi-choices label + label { margin-top: 8px; }
.formkoi-choices input, .formkoi-check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: #4f46e5; }
.formkoi-help { margin: 0; font-size: 13px; opacity: .75; overflow-wrap: anywhere; }
.formkoi-fields .cf-turnstile { grid-column: 1 / -1; }
.formkoi-fields button { grid-column: 1 / -1; justify-self: start; margin-top: 10px; padding: 12px 22px; border: 0; border-radius: 14px; background: #4f46e5; color: #ffffff; font: inherit; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; max-width: 100%; }
.formkoi-fields button:hover { filter: brightness(.94); }
.formkoi-fields :focus-visible { outline: 2px solid #4f46e5; outline-offset: 3px; }
@media (max-width: 480px) { .formkoi-field--half { grid-column: 1 / -1; } }
</style>
<section class="formkoi-form" aria-label="Volunteer with us.">
<h2>Volunteer with us.</h2>
<p>Tell us a little about yourself and when you’re free.</p>
<form class="formkoi-fields" action="https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY" method="POST">
  <div class="formkoi-field formkoi-field--half">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="phone">Phone number</label>
  <input id="phone" name="phone" type="tel" autocomplete="tel">
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="area">City or area</label>
  <input id="area" name="area">
  </div>
  <fieldset class="formkoi-field formkoi-choices">
    <legend>Availability</legend>
    <label><input type="checkbox" name="availability" value="Weekday mornings"> Weekday mornings</label>
    <label><input type="checkbox" name="availability" value="Weekday evenings"> Weekday evenings</label>
    <label><input type="checkbox" name="availability" value="Weekends"> Weekends</label>
  </fieldset>
  <fieldset class="formkoi-field formkoi-choices">
    <legend>I’d like to help with</legend>
    <label><input type="checkbox" name="interests" value="Events"> Events</label>
    <label><input type="checkbox" name="interests" value="Fundraising"> Fundraising</label>
    <label><input type="checkbox" name="interests" value="Mentoring"> Mentoring</label>
    <label><input type="checkbox" name="interests" value="Admin"> Admin</label>
  </fieldset>
  <div class="formkoi-field">
  <label for="message">Relevant experience</label>
  <textarea id="message" name="message"></textarea>
  </div>

  <!-- Leave this hidden anti-spam field empty. -->
  <input type="text" name="botcheck"
    tabindex="-1" autocomplete="off" style="display:none" hidden>

  <button type="submit">Send application</button>
</form>
</section>

New to connecting a form? The HTML contact form guide and the React contact form guide walk through pointing any of these templates at your endpoint.

Fields in this volunteer application form.

Availability and interests are checkboxes because volunteers often pick several. Experience is free text so nobody is turned away by a form.

Label	Field name	Type	Required
Your name	`name`	Short text	Yes
Email address	`email`	Email	Yes
Phone number	`phone`	Phone	No
City or area	`area`	Short text	No
Availability	`availability`	Checkboxes: Weekday mornings, Weekday evenings, Weekends	Yes
I’d like to help with	`interests`	Checkboxes: Events, Fundraising, Mentoring, Admin	Yes
Relevant experience	`message`	Long text	No

Field names are what arrive with each message and what routing rules match on. The email field is used for replies and auto-replies.

Make it yours in minutes.

Change fields without code

Open the template in the visual designer to add, remove or reorder fields, switch input types, and set labels, placeholders and help text.

Explore

Match your website

Pick a style preset, then adjust colors, typography, corners and spacing. Copy fresh HTML or a React component whenever you change it.

Connect one endpoint

Create a form, verify a recipient, and paste the code. Submissions land in your inbox with spam review, routing and delivery tracking.

Explore

Related templates.

Frequently asked questions

Volunteer application form
questions.

Can coordinators get only their area?

Yes. Route on the interests or area field so each coordinator receives the applications they handle.

Can applicants get a confirmation?

Yes. Turn on Turnstile and auto-replies for the form, then add an unchecked consent checkbox. Applicants who tick it receive an acknowledgement automatically.

Is there a cost for a nonprofit?

The free plan includes a monthly allowance of submissions. Larger volumes and file uploads are on Pro.

Start with Form Koi Free

Start receiving
form submissions.

Use this template Read the quickstart

Free volunteer application formtemplate, HTML and React.