Free tool

Job application form generator

Accept job applications on your careers page without a backend. Build a form for applicant details and a cover letter, style it, and copy the code.

Template

Fields

Leave as-is to keep the placeholder, or create a free form to get a real endpoint.

On submit
Styling

Adds Tailwind utility classes. Your project needs Tailwind installed.

contact-form.html
<form class="flex w-full max-w-md flex-col gap-4" action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST">
  <label class="flex flex-col gap-1.5">
    <span class="text-sm font-medium text-neutral-200">Full name <span class="text-red-500">*</span></span>
    <input class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30" type="text" name="name" required />
  </label>
  <label class="flex flex-col gap-1.5">
    <span class="text-sm font-medium text-neutral-200">Email <span class="text-red-500">*</span></span>
    <input class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30" type="email" name="email" placeholder="[email protected]" required />
  </label>
  <label class="flex flex-col gap-1.5">
    <span class="text-sm font-medium text-neutral-200">Phone</span>
    <input class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30" type="tel" name="phone" />
  </label>
  <label class="flex flex-col gap-1.5">
    <span class="text-sm font-medium text-neutral-200">LinkedIn / portfolio</span>
    <input class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30" type="url" name="linkedin" placeholder="https://" />
  </label>
  <label class="flex flex-col gap-1.5">
    <span class="text-sm font-medium text-neutral-200">Cover letter <span class="text-red-500">*</span></span>
    <textarea class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30 min-h-[120px]" name="message" placeholder="Tell us about yourself…" required></textarea>
  </label>
  <input type="hidden" name="_subject" value="New job application" />
  <!-- Anti-spam honeypot, leave this empty -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px" />
  <button class="rounded-lg cursor-pointer bg-[#ffffff] px-4 py-2.5 text-sm font-semibold text-black transition-opacity hover:opacity-90" type="submit">Submit application</button>
</form>

Live preview

How it works

  1. Choose a template and fields. Pick a template, then add, remove, or reorder fields and mark the required ones.
  2. Style it. Pick CSS, Tailwind, or unstyled output and tune the theme: accent color, light or dark, rounded corners.
  3. Copy your framework's code. Switch to HTML, React, Vue, Svelte, Astro, or a fetch() version and copy, download, or open it in CodePen.
  4. Connect an endpoint. Create a free ShipMyForm form to get a real endpoint, then drop your form ID in so submissions actually arrive.

Want the background? Read what a form backend is and how to stop form spam without reCAPTCHA.

Frequently asked questions

Is this job application form generator free?
Yes. Generating and copying the code is completely free and needs no signup. You only create a free ShipMyForm account when you want the form to actually receive submissions.
Does the job application form need a backend?
No. The form posts to a hosted endpoint, so it works on any static site. Submissions are stored, spam-filtered, and emailed to you without a server.
Can I use it with React, Vue, Svelte or Astro?
Yes. Switch the output tab to your framework: the generator produces ready-to-paste code for HTML, React, Vue, Svelte, Astro, and a fetch() version, all pointing at the same endpoint.
How does spam protection work?
The generator adds an invisible honeypot field that bots fill but humans never see. Combined with server-side rate limiting it stops most spam without a CAPTCHA, and you can add a Cloudflare Turnstile key too.