Job application form template

    The role, a link to the résumé, portfolio and LinkedIn, and consent to keep the application on file.

    Reviewed by Ritu Fadadu · Last reviewed

    Preview and code

    Preview

    A Google Drive, Dropbox or personal-site link. Check that it can be opened without signing in.

    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">
        <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-role" class="fb-label">Role you are applying for</label>
        <select id="fb-role" name="role" class="fb-input" required>
          <option value="">Choose…</option>
          <option value="frontend-engineer">Frontend engineer</option>
          <option value="backend-engineer">Backend engineer</option>
          <option value="product-designer">Product designer</option>
          <option value="open-application">Open application</option>
        </select>
      </div>
      <div class="fb-field">
        <label for="fb-resume" class="fb-label">Link to your résumé</label>
        <input
          type="url"
          id="fb-resume"
          name="resume"
          class="fb-input"
          required
          placeholder="https://"
          aria-describedby="fb-resume-help"
        >
        <p id="fb-resume-help" class="fb-help">
          A Google Drive, Dropbox or personal-site link. Check that it can be opened without signing in.
        </p>
      </div>
      <div class="fb-field fb-field--half">
        <label for="fb-portfolio" class="fb-label">
          Portfolio or GitHub
          <span class="fb-optional">(optional)</span>
        </label>
        <input type="url" id="fb-portfolio" name="portfolio" class="fb-input" placeholder="https://">
      </div>
      <div class="fb-field fb-field--half">
        <label for="fb-linkedin" class="fb-label">
          LinkedIn profile
          <span class="fb-optional">(optional)</span>
        </label>
        <input type="url" id="fb-linkedin" name="linkedin" class="fb-input" placeholder="https://">
      </div>
      <div class="fb-field fb-field--half">
        <label for="fb-start" class="fb-label">
          Earliest start date
          <span class="fb-optional">(optional)</span>
        </label>
        <input type="date" id="fb-start" name="start" class="fb-input">
      </div>
      <div class="fb-field">
        <label for="fb-note" class="fb-label">
          Anything you would like us to know?
          <span class="fb-optional">(optional)</span>
        </label>
        <textarea id="fb-note" name="note" class="fb-input" rows="4"></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 my application being stored for this hiring process</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 job application">
      <button type="submit" class="fb-button">Submit application</button>
    </form>
    

    About this template

    Candidates already keep their CV somewhere shareable — Google Drive, Dropbox, a personal site — so this template asks for a link rather than an upload. Formboost's endpoint does not accept file uploads, and a link has two advantages anyway: the candidate controls the version you see, and nothing large lands in your inbox.

    The role is a dropdown rather than a free-text box, so applications sort by position in the export without cleaning up spelling. The consent checkbox is required and says plainly what it is for: keeping the application on file.

    Use one form for every opening and edit the dropdown as roles open and close. Each application email arrives with the role in the field table, so filtering by position works from the inbox as well as the dashboard.

    Fields in this template

    FieldNameTypeRequiredWhy it is there
    Full namenameShort textYesRequired.
    EmailemailEmailYesRequired. Named email so an Auto Reply acknowledgement needs no setup.
    PhonephonePhoneNoOptional, type="tel" so mobiles show a number pad.
    Role you are applying forroleDropdownYesRequired dropdown. Edit the options as roles open and close.
    Link to your résuméresumeLink (URL)YesRequired type="url": the browser checks it is a link. A link, because the endpoint takes no file uploads.
    Portfolio or GitHubportfolioLink (URL)NoOptional link.
    LinkedIn profilelinkedinLink (URL)NoOptional link.
    Earliest start datestartDateNoOptional date picker.
    Anything you would like us to know?noteLong textNoOptional — a short cover note.
    I agree to my application being stored for this hiring processconsentCheckboxYesRequired checkbox, stating exactly what the candidate agrees to.

    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

    • Add role-specific questions as optional fields; a required question that only applies to one role blocks everyone else.
    • Set a custom redirect to a page explaining your hiring steps and timeline.
    • Remove the phone field if you never call before an interview — every field you drop raises completion.

    Where the submissions go

    • Each application is stored and emailed to the hiring inbox; export to CSV on every plan.
    • On Starter and above, forward applications to an applicant-tracking tool with a webhook or Zapier, and acknowledge each candidate with Auto Reply.
    • A Slack message per application keeps the hiring channel in the loop, on any plan.

    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 job application form live

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