Job Application Form
A free job application form template for React: name, email, phone, portfolio link, role, experience, resume upload with PDF/Word and size checks, cover letter and consent, built with React Hook Form and Zod.
Installation
Install the form libraries, then copy the code above into your project.
npm i react-hook-form zod @hookform/resolversAbout the Job Application Form
A complete application form for a careers page: contact details, an optional LinkedIn or portfolio link, role and experience dropdowns, a resume upload that checks the file type and size, an optional cover letter and a consent checkbox.
When to use it
Use it on a careers page, a job post, or a freelancer or ambassador application page.
How to use the Job Application Form
- 1Install the dependencies: npm i react-hook-form zod @hookform/resolvers.
- 2Copy the code into components/job-application-form.tsx (or anywhere in your project).
- 3Render <JobApplicationForm /> on any page.
- 4Replace the placeholder in onSubmit with your server action or API call.
Send submissions by email
In Next.js, a server action can email every submission with Resend. Call it from onSubmit: await submitForm(values).
// app/actions.ts
"use server";
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);
export async function submitForm(values: Record<string, unknown>) {
await resend.emails.send({
from: "Website <hello@yourdomain.com>",
to: "you@yourdomain.com",
subject: "New form submission",
text: JSON.stringify(values, null, 2),
});
}Job Application Form FAQ
- How is the resume upload validated?
- Zod checks that a file was attached, that it's a PDF or Word document, and that it's under 5 MB, and shows the error under the field.
- How do I send the file to my server?
- onSubmit builds a FormData object that includes the file. Post it to a server action or API route and store it in S3, R2 or Vercel Blob.
- Can I change the roles?
- Yes. Edit the ROLES array; the dropdown and the Zod enum both read from it.
More form templates
All forms →Multi-step Signup Form
A four-step signup wizard with a stepper, per-step validation and a review screen.
Contact Form
Name, email, topic and message with validation, consent and a success state.
Waitlist Form
Email signup with an optional role and a referral link on success.
Login Form
Email and password sign in with show password, remember me and social buttons.
Appointment Booking Form
Service cards, date and time slots, contact details and a confirmation.
Feedback & NPS Form
A 0–10 recommend score, reason, improvement topics and optional email.
Newsletter Signup Form
Email signup with topic checkboxes, frequency and double opt-in message.
Event Registration Form
Ticket types with prices, quantity, dietary needs and terms.
Support Ticket Form
Category, priority, description and an optional attachment.