Job application form template

Free job application form
template, HTML and React.

An online application form for your careers page. It collects what a hiring manager reads first: the role, a resume, a link to previous work and a short cover note.

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 job 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

job-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: #ffffff; color: #233c34; font: 16px/1.5 system-ui, sans-serif; border: 1px solid #233c3430; border-radius: 8px; }
.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 20px; overflow-wrap: anywhere; }
.formkoi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 15px; }
.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 #233c3470; border-radius: 8px; background: #ffffff; color: #233c34; font: inherit; }
.formkoi-fields select { appearance: auto; }
.formkoi-fields textarea { min-height: 120px; resize: vertical; }
.formkoi-fields input::placeholder, .formkoi-fields textarea::placeholder { color: #233c3480; }
.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: #233c34; }
.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: 12px; padding: 12px 22px; border: 0; border-radius: 8px; background: #233c34; 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 #233c34; outline-offset: 3px; }
@media (max-width: 480px) { .formkoi-field--half { grid-column: 1 / -1; } }
</style>
<section class="formkoi-form" aria-label="Apply to join the team.">
<h2>Apply to join the team.</h2>
<p>Tell us about yourself. We read every application and reply to all of them.</p>
<form class="formkoi-fields" action="https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY" method="POST" enctype="multipart/form-data">
  <div class="formkoi-field formkoi-field--half">
  <label for="name">Full 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" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="position">Position</label>
  <select id="position" name="position" required>
    <option value="">Choose one</option>
    <option value="Designer">Designer</option>
    <option value="Engineer">Engineer</option>
    <option value="Account manager">Account manager</option>
    <option value="Other">Other</option>
  </select>
  </div>
  <div class="formkoi-field">
  <label for="portfolio">Portfolio or LinkedIn</label>
  <input id="portfolio" name="portfolio" type="url" autocomplete="url" placeholder="https://">
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="start_date">Earliest start date</label>
  <input id="start_date" name="start_date" type="date">
  </div>
  <div class="formkoi-field">
  <label for="resume">Resume</label>
  <input id="resume" name="resume" type="file" multiple accept=".pdf,.png,.jpg,.jpeg,.webp,.txt,.csv" aria-describedby="resume-help" required>
  <p class="formkoi-help" id="resume-help">PDF preferred. Up to 5 MiB.</p>
  </div>
  <div class="formkoi-field">
  <label for="message">Cover note</label>
  <textarea id="message" name="message" placeholder="A few lines about why this role."></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">Submit 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 job application form.

The resume field is a file upload, which needs uploads enabled on the form and is part of Pro. The portfolio field is a URL so the browser checks it is a link.

Label	Field name	Type	Required
Full name	`name`	Short text	Yes
Email address	`email`	Email	Yes
Phone number	`phone`	Phone	Yes
Position	`position`	Dropdown: Designer, Engineer, Account manager, Other	Yes
Portfolio or LinkedIn	`portfolio`	Website	No
Earliest start date	`start_date`	Date	No
Resume	`resume`	File upload	Yes
Cover note	`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

Job application form
questions.

Where are resumes stored?

Attachments stay with the message in your workspace and download privately. Choose an automatic expiry so files are not kept longer than needed.

Which file types are accepted?

PDF, PNG, JPEG, WebP, plain text and CSV, up to three files per application and five megabytes each.

Can applications for one role go to its hiring manager?

Yes. Add a routing rule on the position field so each role notifies the right person.

Start with Form Koi Free

Start receiving
form submissions.

Use this template Read the quickstart

Free job application formtemplate, HTML and React.