Survey / Feedback Form

A feedback form that demonstrates multiple-choice field types: radio buttons, checkboxes, and a select dropdown. Every browser submits these as standard form fields — Formtorch handles them with no special configuration.

HTML


<form action="https://formtorch.com/f/YOUR_FORM_ID" method="POST">
  <input
    type="hidden"
    name="_redirect"
    value="https://yoursite.com/thank-you"
  />
 
  <!-- Overall satisfaction -->
  <fieldset>
    <legend>How satisfied are you overall?</legend>
    <label>
      <input type="radio" name="satisfaction" value="very_satisfied" required />
      Very satisfied
    </label>
    <label>
      <input type="radio" name="satisfaction" value="satisfied" />
      Satisfied
    </label>
    <label>
      <input type="radio" name="satisfaction" value="neutral" />
      Neutral
    </label>
    <label>
      <input type="radio" name="satisfaction" value="dissatisfied" />
      Dissatisfied
    </label>
  </fieldset>
 
  <!-- Features used (multiple selection) -->
  <fieldset>
    <legend>Which features do you use? (select all that apply)</legend>
    <label>
      <input type="checkbox" name="features" value="email_notifications" />
      Email notifications
    </label>
    <label>
      <input type="checkbox" name="features" value="webhooks" />
      Webhooks
    </label>
    <label>
      <input type="checkbox" name="features" value="csv_export" />
      CSV export
    </label>
    <label>
      <input type="checkbox" name="features" value="api" />
      API access
    </label>
  </fieldset>
 
  <!-- Referral source -->
  <label>
    How did you hear about us?
    <select name="referral_source">
      <option value="">Select an option</option>
      <option value="search">Search engine</option>
      <option value="social">Social media</option>
      <option value="friend">Friend or colleague</option>
      <option value="other">Other</option>
    </select>
  </label>
 
  <!-- Open feedback -->
  <label>
    Any other feedback?
    <textarea name="feedback" rows="4" placeholder="Optional"></textarea>
  </label>
 
  <button type="submit">Submit feedback</button>
</form>

React


"use client";
 
import { useState } from "react";
 
export default function SurveyForm() {
  const [status, setStatus] = useState("idle"); // idle | submitting | success | error
 
  async function handleSubmit(event) {
    event.preventDefault();
    setStatus("submitting");
 
    try {
      const res = await fetch("https://formtorch.com/f/YOUR_FORM_ID", {
        method: "POST",
        headers: { "X-Requested-With": "XMLHttpRequest" },
        body: new FormData(event.target),
      });
 
      setStatus(res.ok ? "success" : "error");
    } catch {
      setStatus("error");
    }
  }
 
  if (status === "success") {
    return <p>Thanks for your feedback!</p>;
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <fieldset>
        <legend>How satisfied are you overall?</legend>
        {[
          { value: "very_satisfied", label: "Very satisfied" },
          { value: "satisfied", label: "Satisfied" },
          { value: "neutral", label: "Neutral" },
          { value: "dissatisfied", label: "Dissatisfied" },
        ].map(({ value, label }) => (
          <label key={value}>
            <input type="radio" name="satisfaction" value={value} required />
            {label}
          </label>
        ))}
      </fieldset>
 
      <fieldset>
        <legend>Which features do you use? (select all that apply)</legend>
        {[
          { value: "email_notifications", label: "Email notifications" },
          { value: "webhooks", label: "Webhooks" },
          { value: "csv_export", label: "CSV export" },
          { value: "api", label: "API access" },
        ].map(({ value, label }) => (
          <label key={value}>
            <input type="checkbox" name="features" value={value} />
            {label}
          </label>
        ))}
      </fieldset>
 
      <label>
        How did you hear about us?
        <select name="referral_source">
          <option value="">Select an option</option>
          <option value="search">Search engine</option>
          <option value="social">Social media</option>
          <option value="friend">Friend or colleague</option>
          <option value="other">Other</option>
        </select>
      </label>
 
      <label>
        Any other feedback?
        <textarea name="feedback" rows={4} placeholder="Optional" />
      </label>
 
      <button type="submit" disabled={status === "submitting"}>
        {status === "submitting" ? "Submitting..." : "Submit feedback"}
      </button>
 
      {status === "error" && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}

How checkboxes work

When multiple checkboxes share the same name, the browser submits each checked value as a separate entry. Formtorch stores them as a comma-separated string:


features: "email_notifications,webhooks"

If no checkboxes are checked, the field is absent from the submission entirely. Account for this when reading the data.

Required radio buttons

Adding required to any option in a radio group requires the user to select one before submitting. The browser enforces this — no JavaScript needed.

Select dropdowns

A <select> works exactly like a text input. The selected option’s value attribute is submitted as the field value.

Replace YOUR_FORM_ID with your actual form ID from the dashboard .