Formserve
Features Templates Pricing Docs Blog FAQ
Sign in Create endpoint
← All templates

File upload · supports file uploads

Job application

Receive candidate details with CV upload. Ready-to-deploy careers form.

Get started free 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Apply for this role</title>
  <style>
    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f9fafb; color: #111827; }
    .wrap { max-width: 600px; margin: 48px auto; padding: 0 16px; }
    .role { background: #4f46e5; color: #fff; padding: 22px 24px; border-radius: 14px 14px 0 0; }
    .role h1 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
    .role p { margin: 4px 0 0; color: #c7d2fe; font-size: 14px; }
    form { background: #fff; padding: 28px; border-radius: 0 0 14px 14px; border: 1px solid #e5e7eb; border-top: 0; }
    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin: 14px 0 6px; }
    label:first-of-type, .row label { margin-top: 0; }
    input, textarea { width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 8px; box-sizing: border-box; font-family: inherit; background: #fff; }
    input:focus, textarea:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
    textarea { min-height: 110px; resize: vertical; }
    input[type=file] { padding: 8px; background: #f3f4f6; cursor: pointer; }
    button { margin-top: 22px; width: 100%; padding: 12px; background: #4f46e5; color: #fff; border: 0; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
    button:hover { background: #4338ca; }
    .hint { font-size: 12px; color: #6b7280; margin-top: 4px; }
    @media (max-width: 480px) { .row { grid-template-columns: 1fr; } }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="role">
      <h1>Senior Designer</h1>
      <p>Remote · Full-time</p>
    </div>
    <form action="https://formserve.io/f/your-endpoint-key" method="POST" enctype="multipart/form-data">
      <div class="row">
        <div>
          <label for="first_name">First name</label>
          <input id="first_name" name="first_name" type="text" required>
        </div>
        <div>
          <label for="last_name">Last name</label>
          <input id="last_name" name="last_name" type="text" required>
        </div>
      </div>

      <div class="row" style="margin-top:14px;">
        <div>
          <label for="email">Email</label>
          <input id="email" name="email" type="email" required>
        </div>
        <div>
          <label for="phone">Phone</label>
          <input id="phone" name="phone" type="tel">
        </div>
      </div>

      <label for="portfolio">Portfolio URL</label>
      <input id="portfolio" name="portfolio" type="url" placeholder="https://">

      <label for="linkedin">LinkedIn</label>
      <input id="linkedin" name="linkedin" type="url" placeholder="https://www.linkedin.com/in/…">

      <label for="resume">Résumé / CV</label>
      <input id="resume" name="resume" type="file" accept=".pdf,.doc,.docx" required>
      <p class="hint">PDF, DOC, or DOCX. 10 MB max.</p>

      <label for="cover_letter">Why are you a great fit?</label>
      <textarea id="cover_letter" name="cover_letter" required></textarea>

      <button type="submit">Submit application</button>
    </form>
  </div>
</body>
</html>

Make it yours

  1. Copy the HTML above and paste it into your page.
  2. Replace your-endpoint-key in the action attribute with the endpoint key from your Formserve dashboard.
  3. Style it to match your site — every class is yours to override.

Don't have a Formserve account yet? Create one free.