Document upload form template

03 / Make it yours

Choose your stack. Copy your form.

Replace the example endpoint with your Formward endpoint, then adapt the fields to your needs.

<form action="https://forms.formward.eu/f/your-form-id" method="POST" enctype="multipart/form-data">
  <label for="name">Name</label>
  <input type="text" name="name" id="name" required />
  <label for="email">Email</label>
  <input type="email" name="email" id="email" required />
  <label for="reference">Reference number</label>
  <small id="reference-help">The case, order or application number from our email.</small>
  <input type="text" name="reference" id="reference" aria-describedby="reference-help" required />
  <label for="document">Document</label>
  <small id="document-help">PDF, JPG or PNG. Send only the pages we asked for.</small>
  <input type="file" name="document" id="document" accept=".pdf,.jpg,.jpeg,.png" aria-describedby="document-help" required />
  <label for="notes">Notes</label>
  <textarea name="notes" id="notes"></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true" />
  <button type="submit">Send</button>
</form>

Accessibility

Accessible by default, and how to keep it that way

• Every field in the code has a visible label tied to it with for and id, so screen readers announce what to enter and a click on the label focuses the field.
• Required fields carry the required attribute, so the browser explains a missing answer before anything is sent. Say “required” in words as well; an asterisk or a colour alone is easy to miss.
• The spam trap field (_gotcha) is hidden from screen readers with aria-hidden and skipped by the Tab key, so people never meet it.
• In the JavaScript versions, show the confirmation or error in an element with role="status" so the result is announced, and keep the entered answers when sending fails.

Changed the fields? Paste your version into the HTML form tester to see exactly what it sends, or run it through the GDPR form checker.

04 / Implementation

How the code talks to Formward

Next.js client component

Copy"use client";

import { useState } from "react";

export function DocumentUploadForm() {
  const [sent, setSent] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const res = await fetch("https://forms.formward.eu/f/your-form-id", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    if (res.ok) {
      setSent(true);
      form.reset();
    }
  }

  if (sent) return <p>Thanks! Your message has been sent.</p>;

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="name">Name</label>
      <input type="text" name="name" id="name" required />
      <label htmlFor="email">Email</label>
      <input type="email" name="email" id="email" required />
      <label htmlFor="reference">Reference number</label>
      <small id="reference-help">The case, order or application number from our email.</small>
      <input type="text" name="reference" id="reference" aria-describedby="reference-help" required />
      <label htmlFor="document">Document</label>
      <small id="document-help">PDF, JPG or PNG. Send only the pages we asked for.</small>
      <input type="file" name="document" id="document" accept=".pdf,.jpg,.jpeg,.png" aria-describedby="document-help" required />
      <label htmlFor="notes">Notes</label>
      <textarea name="notes" id="notes" />
      <input
        type="text"
        name="_gotcha"
        tabIndex={-1}
        autoComplete="off"
        style={{ position: "absolute", left: "-9999px" }}
        aria-hidden="true"
      />
      <button type="submit">Send</button>
    </form>
  );
}

Questions

Which file types can people upload?

Images (JPEG, PNG, GIF and WebP), PDF, plain text and CSV, and Office and OpenDocument files. Anything else is refused. This template narrows it further to PDF, JPG and PNG.

Can I accept uploads on the free plan?

No. Uploads start on Professional. On lower plans, ask for a link to the file instead, or have people reply to your email with it.

Related

• Forms with file uploads

  Setup, limits and where files live.

• File uploads and the GDPR

  Minimisation, retention and access control.

• File uploads reference

  Types, size caps and error codes.

• Request templates

  Other structured requests.