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
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>
<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>
<p class="fb-status" role="status" aria-live="polite" data-fb-status></p>
</form>
<script>
document.getElementById("fb-form").addEventListener("submit", async (event) => {
event.preventDefault();
const form = event.currentTarget;
const status = form.querySelector("[data-fb-status]");
const button = form.querySelector('button[type="submit"]');
const fields = new FormData(form);
// Formboost accepts JSON or url-encoded bodies, not multipart, so send JSON.
const data = Object.fromEntries(fields);
// Makes the notification email replyable; the address still shows in the field table.
if (data.email) data._replyto = data.email;
button.disabled = true;
status.textContent = "Sending…";
try {
const response = await fetch(form.action, {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify(data),
});
if (response.ok) {
form.reset();
status.textContent = "Thanks — your application has been received.";
} else if (response.status === 429) {
status.textContent = "Too many attempts. Please wait a minute and try again.";
} else {
status.textContent = "Something went wrong. Please try again.";
}
} catch {
status.textContent = "Could not send. Check your connection and try again.";
} finally {
button.disabled = false;
}
});
</script>
import { useState } from "react";
// Your form's endpoint, from the Formboost dashboard.
const ENDPOINT = "https://formboost.app/f/YOUR_ENDPOINT_ID";
export default function JobApplicationForm() {
const [sending, setSending] = useState(false);
const [message, setMessage] = useState("");
async function handleSubmit(event) {
event.preventDefault();
const form = event.currentTarget;
const fields = new FormData(form);
// Formboost accepts JSON or url-encoded bodies, not multipart, so send JSON.
const data = Object.fromEntries(fields);
// Makes the notification email replyable; the address still shows in the field table.
if (data.email) data._replyto = data.email;
setSending(true);
setMessage("Sending…");
try {
const response = await fetch(ENDPOINT, {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify(data),
});
if (response.ok) {
form.reset();
setMessage("Thanks — your application has been received.");
} else if (response.status === 429) {
setMessage("Too many attempts. Please wait a minute and try again.");
} else {
setMessage("Something went wrong. Please try again.");
}
} catch {
setMessage("Could not send. Check your connection and try again.");
} finally {
setSending(false);
}
}
return (
<form
className="grid max-w-xl gap-4 sm:grid-cols-2"
action={ENDPOINT}
method="POST"
onSubmit={handleSubmit}
>
<div className="flex flex-col gap-1.5">
<label htmlFor="fb-name" className="text-sm font-semibold text-gray-900">Full name</label>
<input
type="text"
id="fb-name"
name="name"
className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
required
autoComplete="name"
/>
</div>
<div className="flex flex-col gap-1.5 sm:col-span-2">
<label htmlFor="fb-email" className="text-sm font-semibold text-gray-900">Email</label>
<input
type="email"
id="fb-email"
name="email"
className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
required
autoComplete="email"
/>
</div>
<div className="flex flex-col gap-1.5">
<label htmlFor="fb-phone" className="text-sm font-semibold text-gray-900">
Phone
<span className="font-normal text-gray-500">(optional)</span>
</label>
<input
type="tel"
id="fb-phone"
name="phone"
className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
autoComplete="tel"
/>
</div>
<div className="flex flex-col gap-1.5">
<label htmlFor="fb-role" className="text-sm font-semibold text-gray-900">
Role you are applying for
</label>
<select
id="fb-role"
name="role"
className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
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 className="flex flex-col gap-1.5 sm:col-span-2">
<label htmlFor="fb-resume" className="text-sm font-semibold text-gray-900">
Link to your résumé
</label>
<input
type="url"
id="fb-resume"
name="resume"
className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
required
placeholder="https://"
aria-describedby="fb-resume-help"
/>
<p id="fb-resume-help" className="text-sm text-gray-500">
A Google Drive, Dropbox or personal-site link. Check that it can be opened without signing in.
</p>
</div>
<div className="flex flex-col gap-1.5">
<label htmlFor="fb-portfolio" className="text-sm font-semibold text-gray-900">
Portfolio or GitHub
<span className="font-normal text-gray-500">(optional)</span>
</label>
<input
type="url"
id="fb-portfolio"
name="portfolio"
className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
placeholder="https://"
/>
</div>
<div className="flex flex-col gap-1.5">
<label htmlFor="fb-linkedin" className="text-sm font-semibold text-gray-900">
LinkedIn profile
<span className="font-normal text-gray-500">(optional)</span>
</label>
<input
type="url"
id="fb-linkedin"
name="linkedin"
className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
placeholder="https://"
/>
</div>
<div className="flex flex-col gap-1.5">
<label htmlFor="fb-start" className="text-sm font-semibold text-gray-900">
Earliest start date
<span className="font-normal text-gray-500">(optional)</span>
</label>
<input
type="date"
id="fb-start"
name="start"
className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
/>
</div>
<div className="flex flex-col gap-1.5 sm:col-span-2">
<label htmlFor="fb-note" className="text-sm font-semibold text-gray-900">
Anything you would like us to know?
<span className="font-normal text-gray-500">(optional)</span>
</label>
<textarea
id="fb-note"
name="note"
className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
rows={4}
></textarea>
</div>
<div className="flex flex-col gap-1.5 sm:col-span-2">
<label className="flex items-center gap-2 text-gray-800">
<input
type="checkbox"
id="fb-consent"
name="consent"
value="yes"
className="h-4 w-4 accent-blue-600"
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 htmlFor="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" defaultValue="New job application" />
<button
type="submit"
className="min-h-11 justify-self-start rounded-lg bg-blue-600 px-5 py-2.5 font-semibold text-white hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:opacity-60 sm:col-span-2"
disabled={sending}
>
Submit application
</button>
<p className="min-h-6 text-sm text-gray-700 sm:col-span-2" role="status" aria-live="polite">
{message}
</p>
</form>
);
}
<form
id="fb-form"
class="grid max-w-xl gap-4 sm:grid-cols-2"
action="https://formboost.app/f/YOUR_ENDPOINT_ID"
method="POST"
>
<div class="flex flex-col gap-1.5">
<label for="fb-name" class="text-sm font-semibold text-gray-900">Full name</label>
<input
type="text"
id="fb-name"
name="name"
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
required
autocomplete="name"
>
</div>
<div class="flex flex-col gap-1.5 sm:col-span-2">
<label for="fb-email" class="text-sm font-semibold text-gray-900">Email</label>
<input
type="email"
id="fb-email"
name="email"
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
required
autocomplete="email"
>
</div>
<div class="flex flex-col gap-1.5">
<label for="fb-phone" class="text-sm font-semibold text-gray-900">
Phone
<span class="font-normal text-gray-500">(optional)</span>
</label>
<input
type="tel"
id="fb-phone"
name="phone"
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
autocomplete="tel"
>
</div>
<div class="flex flex-col gap-1.5">
<label for="fb-role" class="text-sm font-semibold text-gray-900">
Role you are applying for
</label>
<select
id="fb-role"
name="role"
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
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="flex flex-col gap-1.5 sm:col-span-2">
<label for="fb-resume" class="text-sm font-semibold text-gray-900">Link to your résumé</label>
<input
type="url"
id="fb-resume"
name="resume"
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
required
placeholder="https://"
aria-describedby="fb-resume-help"
>
<p id="fb-resume-help" class="text-sm text-gray-500">
A Google Drive, Dropbox or personal-site link. Check that it can be opened without signing in.
</p>
</div>
<div class="flex flex-col gap-1.5">
<label for="fb-portfolio" class="text-sm font-semibold text-gray-900">
Portfolio or GitHub
<span class="font-normal text-gray-500">(optional)</span>
</label>
<input
type="url"
id="fb-portfolio"
name="portfolio"
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
placeholder="https://"
>
</div>
<div class="flex flex-col gap-1.5">
<label for="fb-linkedin" class="text-sm font-semibold text-gray-900">
LinkedIn profile
<span class="font-normal text-gray-500">(optional)</span>
</label>
<input
type="url"
id="fb-linkedin"
name="linkedin"
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
placeholder="https://"
>
</div>
<div class="flex flex-col gap-1.5">
<label for="fb-start" class="text-sm font-semibold text-gray-900">
Earliest start date
<span class="font-normal text-gray-500">(optional)</span>
</label>
<input
type="date"
id="fb-start"
name="start"
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
>
</div>
<div class="flex flex-col gap-1.5 sm:col-span-2">
<label for="fb-note" class="text-sm font-semibold text-gray-900">
Anything you would like us to know?
<span class="font-normal text-gray-500">(optional)</span>
</label>
<textarea
id="fb-note"
name="note"
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/30"
rows="4"
></textarea>
</div>
<div class="flex flex-col gap-1.5 sm:col-span-2">
<label class="flex items-center gap-2 text-gray-800">
<input
type="checkbox"
id="fb-consent"
name="consent"
value="yes"
class="h-4 w-4 accent-blue-600"
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="min-h-11 justify-self-start rounded-lg bg-blue-600 px-5 py-2.5 font-semibold text-white hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:opacity-60 sm:col-span-2"
>
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
| Field | Name | Type | Required | Why it is there |
|---|---|---|---|---|
| Full name | name | Short text | Yes | Required. |
email | Yes | Required. Named email so an Auto Reply acknowledgement needs no setup. | ||
| Phone | phone | Phone | No | Optional, type="tel" so mobiles show a number pad. |
| Role you are applying for | role | Dropdown | Yes | Required dropdown. Edit the options as roles open and close. |
| Link to your résumé | resume | Link (URL) | Yes | Required type="url": the browser checks it is a link. A link, because the endpoint takes no file uploads. |
| Portfolio or GitHub | portfolio | Link (URL) | No | Optional link. |
| LinkedIn profile | linkedin | Link (URL) | No | Optional link. |
| Earliest start date | start | Date | No | Optional date picker. |
| Anything you would like us to know? | note | Long text | No | Optional — a short cover note. |
| I agree to my application being stored for this hiring process | consent | Checkbox | Yes | Required 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
- Create a form in the Formboost dashboard and replace
YOUR_ENDPOINT_IDwith its ID. - Pick one variant: HTML posts and reloads, HTML + JS and React send JSON with
fetch()and stay on the page. - For the plain HTML version, add a hidden
_redirectwith anhttps://thank-you page on the same site as the form — anything else falls back to Formboost's page. - 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
Quote request form template
Service, budget range, timeline and the brief — enough to reply with a real number.
Event registration form template
Attendee details, how they will attend, and the two questions organisers always forget to ask.
Support ticket form template
Category, urgency, where it happened and how to reproduce it — the details a first reply usually has to ask for.
All form templates
Every template, in HTML, React and Tailwind.
Put the job application form live
Free forever: 500 submissions a month across 10 forms, no card.