Documentation feedback

Collect feedback on docs and help articles.

Why these fields

  • Page or article: Page or article captures a short, searchable answer and is required to complete the request.
  • Was this page helpful?: Was this page helpful? keeps answers consistent for filtering and routing but remains optional.
  • Email (optional): Email (optional) provides a validated reply address but remains optional.
  • What can we improve?: What can we improve? leaves room for context and detail and is required to complete the request.

Fields

Page or articletextrequiredWas this page helpful?selectEmail (optional)emailWhat can we improve?textarearequired

Preview

Code

import { useState } from "react";

export function DocumentationFeedbackForm() {
  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="page">Page or article</label>
      <input type="text" name="page" id="page" required />
      <label htmlFor="helpful">Was this page helpful?</label>
      <select name="helpful" id="helpful">
        <option value="Yes">Yes</option>
        <option value="Somewhat">Somewhat</option>
        <option value="No">No</option>
      </select>
      <label htmlFor="email">Email (optional)</label>
      <input type="email" name="email" id="email" />
      <label htmlFor="comments">What can we improve?</label>
      <textarea name="comments" id="comments" 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.

Documentation feedback template, copy-paste code | Formward