Complaint form

Let customers file a formal complaint.

Why these fields

Name: Name captures a short, searchable answer and is required to complete the request.
Email: Email provides a validated reply address and is required to complete the request.
Order / reference number: Order / reference number captures a short, searchable answer but remains optional.
Complaint type: Complaint type keeps answers consistent for filtering and routing but remains optional.
Describe the issue: Describe the issue leaves room for context and detail and is required to complete the request.

Fields

NametextrequiredEmailemailrequiredOrder / reference numbertextComplaint typeselectDescribe the issuetextarearequired

Preview

Code

import { useState } from "react";

export function ComplaintFormForm() {
  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="order_number">Order / reference number</label>
      <input type="text" name="order_number" id="order_number" />
      <label htmlFor="type">Complaint type</label>
      <select name="type" id="type">
        <option value="Product">Product</option>
        <option value="Service">Service</option>
        <option value="Billing">Billing</option>
        <option value="Staff">Staff</option>
        <option value="Other">Other</option>
      </select>
      <label htmlFor="details">Describe the issue</label>
      <textarea name="details" id="details" required />
      <input
        type="text"
        name="_gotcha"
        tabIndex={-1}
        autoComplete="off"
        style={{ position: "absolute", left: "-9999px" }}
        aria-hidden="true"
      />
      <button type="submit">Send</button>
    </form>
  );
}

Customize before publishing

Remove fields you do not need and mark only essential answers as required.
Replace placeholder wording with terms your audience already understands.
Add your privacy notice, retention details and expected response time.
Test keyboard focus, validation errors and the confirmation state on mobile.

Use this with Formward

Create a form, copy your endpoint, and replace https://forms.formward.eu/f/your-form-id in the code above.

Get started free →