splitforms.com
FEEDBACK · CONTACT FORM TEMPLATE

NPS Survey Form (Net Promoter Score)

An NPS survey form with the standard 0-10 likelihood-to-recommend question plus an open-ended follow-up. Pure HTML radio scale, no survey-software dependency.

1,000/mo free·no card·works on any host
form.htmlhtml27 lines
01<form action="https://splitforms.com/api/submit" method="POST">
02 <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
03 <input type="hidden" name="subject" value="New feedback submission">
04
05 <label for="rating">How would you rate your experience? *</label>
06 <select id="rating" name="rating" required>
07 <option value="">Choose…</option>
08 <option>★★★★★</option>
09 <option>★★★★☆</option>
10 <option>★★★☆☆</option>
11 <option>★★☆☆☆</option>
12 <option>★☆☆☆☆</option>
13 </select>
14 <label for="feedback">What can we do better? *</label>
15 <textarea id="feedback" name="feedback" placeholder="Be honest — we won't take it personally." required></textarea>
16 <label for="email">Email (optional, for follow-up)</label>
17 <input id="email" type="email" name="email" placeholder="you@example.com">
18
19 <!-- honeypot — bots fill every field -->
20 <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
21
22 <button type="submit">Send</button>
23</form>
24
25<p style="margin-top:12px;font-size:11px;color:#888;text-align:right">
26 Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
27</p>
1,000
submissions / mo, free
3
fields, ready to ship
5
code outputs
60s
from copy to inbox
§ 01Why it mattersthe qualifying-fields argument

NPS is one of the few customer-feedback metrics that survived its own hype cycle. The standard form is simple — a 0-10 rating and one open-ended follow-up. You don't need Typeform or SurveyMonkey to ship it; an HTML radio scale and a textarea do the job. Calculate NPS in a spreadsheet from the exported submissions: % Promoters (9-10) − % Detractors (0-6).

0-10 scale, open follow-up, NPS calculation in two spreadsheet formulas.
✦ at a glance
  • Feedback · 3 fields
  • HTML, JS, React, PHP, cURL outputs
  • One POST endpoint, no SDK
  • Honeypot + classifier, no CAPTCHA
§ 02Live previewinteractive · sandboxed · no key required

See exactly what your visitors see — and you’ll receive.

Left: the rendered form, fully interactive in a sandboxed iframe. Right: the email and dashboard view that lands the moment a visitor submits.

preview · nps-survey-formlocalhost:3000
✦ what you’ll see in your inbox

Every submission becomes an email plus a dashboard row. The fields below are the exact payload your form will send. Reply-to is wired to the visitor’s email so hitting reply goes back to them.

dashboard · new submission14ms · 200 OK
SUBJECT · New feedback submission
How would you rate your experience?
★★★★★
What can we do better?
Email (optional, for follow-up)
maya@studio71.co

Iframe is sandboxed — submit doesn’t actually fire. Get your access key to wire it up live.

§ 03Three steps3 steps · ~60 seconds

Generate, embed, receive.

Three actions stand between you and your first lead. None of them require a backend, a database, or a CAPTCHA library.

STEP 01GENERATE

Build the 0-10 rating scale

Eleven radio buttons (values 0 through 10) styled inline. Add CSS-only labeling so each number is clickable and keyboard-navigable.

Create your form
key=sk_live_••••••••
STEP 02EMBED

Add the follow-up question

A textarea labeled 'What's the main reason for your score?' — the open-ended part is where the real insight lives.

snippethtml
<form action="https://splitforms.com/api/submit" method="POST">
  …
</form>
STEP 03RECEIVE

POST to splitforms

Submissions land in your dashboard with the score as a number — export to CSV, calculate NPS in a spreadsheet, or webhook into your analytics stack.

inbox · 1 newjust now
FROM contact@yoursite.com
New feedback submission
Maya Iyer maya@studio71.co
Loved your last open house in Hayes — looking for similar with parking. Pre-approved through Wells Fargo.
§ 04Copy & ship5 languages · same endpoint

Five outputs. One backend.

HTML by default. Click open the language you ship in — every variant POSTs to the same /api/submit endpoint.

01HTMLform.html27 lines
<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="subject" value="New feedback submission">

  <label for="rating">How would you rate your experience? *</label>
  <select id="rating" name="rating" required>
    <option value="">Choose…</option>
    <option>★★★★★</option>
    <option>★★★★☆</option>
    <option>★★★☆☆</option>
    <option>★★☆☆☆</option>
    <option>★☆☆☆☆</option>
  </select>
  <label for="feedback">What can we do better? *</label>
  <textarea id="feedback" name="feedback" placeholder="Be honest — we won't take it personally." required></textarea>
  <label for="email">Email (optional, for follow-up)</label>
  <input id="email" type="email" name="email" placeholder="you@example.com">

  <!-- honeypot — bots fill every field -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">

  <button type="submit">Send</button>
</form>

<p style="margin-top:12px;font-size:11px;color:#888;text-align:right">
  Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
</p>
02JavaScriptform.js43 lines
<form id="lf-form">
  <label for="rating">How would you rate your experience? *</label>
  <select id="rating" name="rating" required>
    <option value="">Choose…</option>
    <option>★★★★★</option>
    <option>★★★★☆</option>
    <option>★★★☆☆</option>
    <option>★★☆☆☆</option>
    <option>★☆☆☆☆</option>
  </select>
  <label for="feedback">What can we do better? *</label>
  <textarea id="feedback" name="feedback" placeholder="Be honest — we won't take it personally." required></textarea>
  <label for="email">Email (optional, for follow-up)</label>
  <input id="email" type="email" name="email" placeholder="you@example.com">
  <button type="submit">Send</button>
</form>

<p style="margin-top:12px;font-size:11px;color:#888;text-align:right">
  Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
</p>

<script>
  document.getElementById('lf-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
    data.set('access_key', 'YOUR_ACCESS_KEY');
    data.set('subject', 'New feedback submission');

    const res = await fetch('https://splitforms.com/api/submit', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    });

    const json = await res.json();
    if (json.success) {
      e.target.reset();
      alert('Sent!');
    } else {
      alert('Error: ' + (json.message || 'Try again'));
    }
  });
</script>
03React / Next.jsForm.tsx58 lines
'use client';

import { useState, type FormEvent } from 'react';

export default function FeedbackForm() {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('sending');

    const data = new FormData(e.currentTarget);
    data.set('access_key', 'YOUR_ACCESS_KEY');
    data.set('subject', 'New feedback submission');

    const res = await fetch('https://splitforms.com/api/submit', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    });

    const json = await res.json();
    setStatus(json.success ? 'sent' : 'error');
    if (json.success) e.currentTarget.reset();
  }

  if (status === 'sent') return <p>Thanks — we&rsquo;ll be in touch.</p>;

  return (
    <>
    <form onSubmit={onSubmit}>
      <label htmlFor="rating">How would you rate your experience? *</label>
      <select id="rating" name="rating" required>
        <option value="">Choose…</option>
        <option>★★★★★</option>
        <option>★★★★☆</option>
        <option>★★★☆☆</option>
        <option>★★☆☆☆</option>
        <option>★☆☆☆☆</option>
      </select>
      <label htmlFor="feedback">What can we do better? *</label>
      <textarea id="feedback" name="feedback" placeholder="Be honest — we won't take it personally." required />
      <label htmlFor="email">Email (optional, for follow-up)</label>
      <input id="email" type="email" name="email" placeholder="you@example.com" />

      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending…' : 'Send'}
      </button>

      {status === 'error' && <p>Something went wrong. Try again.</p>}
    </form>

      <p style={{ marginTop: 12, fontSize: 11, color: '#888', textAlign: 'right' }}>
        Powered by <a href="https://splitforms.com" target="_blank" rel="noopener" style={{ color: '#888', textDecoration: 'none' }}>splitforms</a>
      </p>
    </>
  );
}
04PHPsubmit.php28 lines
<?php
// Drop into a PHP page. Receives a form POST and proxies it to splitforms.com.
// Useful when you want to add server-side validation or rate limiting.

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $allowed = ['rating', 'feedback', 'email'];
    $payload = ['access_key' => 'YOUR_ACCESS_KEY'];
    $payload['subject'] = 'New feedback submission';

    foreach ($allowed as $f) {
        if (isset($_POST[$f])) $payload[$f] = $_POST[$f];
    }

    $ch = curl_init('https://splitforms.com/api/submit');
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($payload));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Accept: application/json']);
    $response = curl_exec($ch);
    $status   = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    header('Content-Type: application/json');
    http_response_code($status);
    echo $response;
    exit;
}
?>
05cURLtest.sh7 lines
curl -X POST https://splitforms.com/api/submit \
  -H "Accept: application/json" \
  -d "access_key=YOUR_ACCESS_KEY" \
  -d "subject=New feedback submission" \
  -d "rating=★★★★★" \
  -d "feedback=Hello from cURL" \
  -d "email=jane@example.com" 

Replace YOUR_ACCESS_KEY with the key from your dashboard. That’s the only edit.

§ 04bUse this template with…25 frameworks · same backend

One template. Every framework.

The same field set works on every framework splitforms supports. HTML, React, Next.js, Vue, Astro, Hugo, WordPress — same POST, same backend.

§ 06FAQ4 answered

Things people ask before they ship.

Direct answers, no marketing fluff. Missing one? Email hello@splitforms.com.

01Is NPS still considered a valid metric?
It's debated. NPS is a directional sentiment indicator, not a precise measurement. Used in isolation it's misleading; tracked over time alongside churn and product metrics, it's useful. The form mechanics are simple either way — what you do with the data is the harder question.
02How do I calculate NPS from the submissions?
Export CSV from the splitforms dashboard. Bucket scores: 9-10 = Promoter, 7-8 = Passive, 0-6 = Detractor. NPS = (% Promoters) − (% Detractors). Excel or Google Sheets handles this in two formulas.
03Should I send the survey by email or embed on a page?
Both work. Email link (one-click into the form) gets higher response rates for transactional NPS (post-purchase). Embedded surveys (logged-in dashboard, app onboarding) get higher response rates for relationship NPS (general satisfaction). The form HTML is the same; the distribution channel changes.
04Can I send a webhook to my analytics tool?
Yes — splitforms ships signed webhooks with retries on every plan. POST every NPS submission to your data warehouse, BigQuery, Snowflake, or Mixpanel, and join with user metadata downstream.
✻ ✻ ✻

Ship your nps survey form (net promoter score) in 60 seconds.

1,000 free submissions per month. No credit card. Copy the snippet, paste your access key, watch leads land in your inbox.

Get free access key →Browse all 67 templates →
v0.1 · founders pricing locked in · early access open