Survey form template

    Four question types — a 0–10 score, single choice, multiple choice and an open answer — in one page.

    Reviewed by Ritu Fadadu · Last reviewed

    Customize in the generatorGet a free endpoint

    Preview and code

    Preview

    How likely are you to recommend us to a friend? (0 = not at all, 10 = extremely)
    What do you use us for? (optional)

    Tick all that apply.

    Leave it if you are happy for us to follow up.

    Code — replace YOUR_ENDPOINT_ID with your form's ID

    <style>
  .fb-form { display: grid; gap: 1rem; max-width: 36rem; }
  .fb-field { display: flex; flex-direction: column; gap: 0.375rem; }
  .fb-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  .fb-label { font-weight: 600; }
  .fb-optional { font-weight: 400; color: #6b7280; }
  .fb-help { margin: 0; font-size: 0.875rem; color: #6b7280; }
  .fb-input { box-sizing: border-box; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; color: #111827; font: inherit; }
  .fb-input:focus { border-color: #2563eb; outline: 2px solid #2563eb; outline-offset: 1px; }
  .fb-options { display: flex; flex-direction: column; gap: 0.5rem; }
  .fb-option { display: flex; align-items: center; gap: 0.5rem; }
  .fb-check { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: #2563eb; }
  .fb-button { justify-self: start; min-height: 44px; padding: 0.625rem 1.25rem; border: 0; border-radius: 0.5rem; background: #2563eb; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
  .fb-button:hover { background: #1d4ed8; }
  .fb-button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
  .fb-button:disabled { opacity: 0.6; cursor: wait; }
  .fb-status { margin: 0; min-height: 1.5em; }
  @media (min-width: 640px) {
    .fb-form { grid-template-columns: 1fr 1fr; }
    .fb-field, .fb-button, .fb-status { grid-column: 1 / -1; }
    .fb-field--half { grid-column: auto; }
  }
</style>

<form id="fb-form" class="fb-form" action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
  <fieldset class="fb-field fb-fieldset">
    <legend class="fb-label">
      How likely are you to recommend us to a friend? (0 = not at all, 10 = extremely)
    </legend>
    <div class="fb-options">
      <label class="fb-option">
        <input type="radio" name="recommend" value="0" class="fb-check" required>
        <span>0</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="recommend" value="1" class="fb-check" required>
        <span>1</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="recommend" value="2" class="fb-check" required>
        <span>2</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="recommend" value="3" class="fb-check" required>
        <span>3</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="recommend" value="4" class="fb-check" required>
        <span>4</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="recommend" value="5" class="fb-check" required>
        <span>5</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="recommend" value="6" class="fb-check" required>
        <span>6</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="recommend" value="7" class="fb-check" required>
        <span>7</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="recommend" value="8" class="fb-check" required>
        <span>8</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="recommend" value="9" class="fb-check" required>
        <span>9</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="recommend" value="10" class="fb-check" required>
        <span>10</span>
      </label>
    </div>
  </fieldset>
  <div class="fb-field">
    <label for="fb-role" class="fb-label">Which best describes you?</label>
    <select id="fb-role" name="role" class="fb-input" required>
      <option value="">Choose…</option>
      <option value="developer">Developer</option>
      <option value="designer">Designer</option>
      <option value="founder-or-manager">Founder or manager</option>
      <option value="student">Student</option>
      <option value="other">Other</option>
    </select>
  </div>
  <fieldset class="fb-field fb-fieldset" aria-describedby="fb-uses-help">
    <legend class="fb-label">
      What do you use us for?
      <span class="fb-optional">(optional)</span>
    </legend>
    <div class="fb-options">
      <label class="fb-option">
        <input type="checkbox" name="uses" value="contact-forms" class="fb-check">
        <span>Contact forms</span>
      </label>
      <label class="fb-option">
        <input type="checkbox" name="uses" value="lead-capture" class="fb-check">
        <span>Lead capture</span>
      </label>
      <label class="fb-option">
        <input type="checkbox" name="uses" value="surveys" class="fb-check">
        <span>Surveys</span>
      </label>
      <label class="fb-option">
        <input type="checkbox" name="uses" value="internal-tools" class="fb-check">
        <span>Internal tools</span>
      </label>
    </div>
    <p id="fb-uses-help" class="fb-help">Tick all that apply.</p>
  </fieldset>
  <div class="fb-field">
    <label for="fb-comment" class="fb-label">
      Anything else you would like to tell us?
      <span class="fb-optional">(optional)</span>
    </label>
    <textarea id="fb-comment" name="comment" class="fb-input" rows="4"></textarea>
  </div>
  <div class="fb-field">
    <label for="fb-email" class="fb-label">Email <span class="fb-optional">(optional)</span></label>
    <input
      type="email"
      id="fb-email"
      name="email"
      class="fb-input"
      autocomplete="email"
      aria-describedby="fb-email-help"
    >
    <p id="fb-email-help" class="fb-help">Leave it if you are happy for us to follow up.</p>
  </div>
  <!-- Honeypot: keep it hidden. People never see it; bots fill it in and get flagged as spam. -->
  <div
    aria-hidden="true"
    style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden"
  >
    <label for="fb-honey">Leave this field empty</label>
    <input type="text" id="fb-honey" name="_honey" tabindex="-1" autocomplete="off">
  </div>
  <input type="hidden" name="_subject" value="New survey response">
  <button type="submit" class="fb-button">Submit answers</button>
</form>

    About this template

    This template shows every question type a short survey needs, wired correctly. The 0–10 question is the standard “how likely are you to recommend us” scale, built as radio buttons so each score is one column value you can count.

    The multiple-choice question is the one most hand-written forms get wrong. Several checkboxes share one name, and a plain HTML post sends every ticked value; the HTML + JS and React versions collect them with getAll() and send them as an array, because Object.fromEntries() alone would quietly keep only the last box.

    Keep surveys to one screen. If you need more than six or seven questions, split them into two forms and link the second from the first form's thank-you page with a custom redirect.

    Fields in this template

    FieldNameTypeRequiredWhy it is there
    How likely are you to recommend us to a friend? (0 = not at all, 10 = extremely)recommendSingle choiceYesRequired. Eleven radio buttons give one value per score, ready to count promoters (9–10) and detractors (0–6).
    Which best describes you?roleDropdownYesRequired. A dropdown keeps answers to a fixed set, so they group cleanly in the export.
    What do you use us for?usesMultiple choiceNoOptional multiple choice: one name, several values, sent as an array by the script versions.
    Anything else you would like to tell us?commentLong textNoOptional. The free-text answer is where the useful surprises are.
    EmailemailEmailNoOptional, for follow-up interviews.

    Each name becomes a column in your dashboard and a row in the notification email. The hidden _honey field is the honeypot; _subject sets the email's subject line. Both are reserved fields and never appear in the field table.

    Make it yours

    • Keep option values short and stable (contact-forms), and change only the labels when you reword a question — old and new responses stay comparable.
    • Add a hidden field such as campaign with a different value per mailing, so you can compare responses by where people came from.
    • Mark the multiple-choice question required only in the script versions: browsers cannot require “at least one box” on their own.

    Where the submissions go

    • Responses are stored in your dashboard and exported to CSV on every plan — the simplest way to analyse them.
    • On Starter and above, send each response to Google Sheets as a row, so the analysis updates itself.
    • The hidden honeypot and spam screening run on every plan; anything flagged stays in the spam tab and is never forwarded.

    Survey Forms: plans, destinations and a worked setup →

    Before you publish it

    1. Create a form in the Formboost dashboard and replace YOUR_ENDPOINT_ID with its ID.
    2. Pick one variant: HTML posts and reloads, HTML + JS and React send JSON with fetch() and stay on the page.
    3. For the plain HTML version, add a hidden _redirect with an https:// thank-you page on the same site as the form — anything else falls back to Formboost's page.
    4. Submit it once from the live page and check the submission in your dashboard. Every request is acknowledged, so the dashboard is the real test. Troubleshooting covers the rest.

    More form templates

    Put the survey form live

    Free forever: 500 submissions a month across 10 forms, no card.

    Get a free endpointOpen the form generator