# Job application form template A free job application form with role, portfolio link, start date and cover letter. Copy the HTML, CSS and JS, or use it in React, Next.js, Vue or Svelte. This form collects contact details, the role, a link to a portfolio or LinkedIn profile, an optional start date and a short cover letter. Live preview, field editor, four themes and styled versions for every framework: https://nisuform.com/templates/job-application-form ## Fields | Field | Name | Type | Required | | --- | --- | --- | --- | | Full name | `name` | Short text | Yes | | Email | `email` | Email | Yes | | Phone | `phone` | Phone | No | | Position | `role` | Dropdown (Product designer, Frontend engineer, Customer support, Open application) | Yes | | LinkedIn or portfolio | `portfolio` | Website | Yes | | Earliest start date | `startDate` | Date | No | | Why do you want to join? | `letter` | Long text | Yes | ## How to use it 1. Create a free form at https://app.nisuform.com and copy its form key. 2. Paste the code where the form should appear and replace `YOUR_FORM_KEY` with your key. 3. Submit the form once. The submission appears in your Nisuform inbox and you get an email. ## Styled HTML, CSS and JavaScript The form with its styles and a small script that sends it without a page reload and shows the success message. ```html

Apply for a role

Tell us about yourself. We reply to every application.

``` ## Unstyled HTML Bare markup that picks up your own CSS. It posts without JavaScript and keeps the hidden `_gotcha` field that stops bots. ```html
``` ## Framework components ### React ```jsx import { useRef, useState } from 'react' export function JobApplicationForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks for applying! We’ll be in touch.

return (
{status === 'error' &&

Something went wrong. Please try again.

}
) } ``` ### Next.js ```jsx 'use client' import { useRef, useState } from 'react' export function JobApplicationForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks for applying! We’ll be in touch.

return (
{status === 'error' &&

Something went wrong. Please try again.

}
) } ``` ### Vue ```vue ``` ### Svelte ```svelte {#if status === 'sent'}

Thanks for applying! We’ll be in touch.

{:else}
{#if status === 'error'}

Something went wrong. Please try again.

{/if}
{/if} ``` ### Astro ```astro --- const endpoint = "https://api.nisuform.com/s/YOUR_FORM_KEY" ---
``` ## When to use it - A careers or jobs page on a company website - Internship and graduate programs - Freelancer and contractor applications - Volunteer and ambassador programs ## Customize it ### Accept CVs as files On Pro, turn on file uploads, add `` and set `enctype="multipart/form-data"` on the form. Each application can include up to 5 PDFs or images. ### Set the role from the job page If each job has its own page, replace the position dropdown with ``. ### Send applications to your hiring channel On Pro, post each application to Slack or Discord, or send it to your applicant tracking system with a webhook. ## Frequently asked questions ### Can applicants upload a resume? Yes, on Pro. Turn on file uploads for the form and add a file input. Each submission can include up to 5 files, which are stored privately and shared only through links that expire after 15 minutes. ### Is it safe to collect job applications this way? Submissions are encrypted in transit and at rest and are only used to run the service. You can turn off IP address storage and delete applications once you no longer need them. A Data Processing Agreement is included with every account. ### Can more than one person get the applications? On Pro, notifications can go to several email addresses or to a Slack, Discord or Telegram channel, so the whole hiring team sees new applications.