NPS-Umfrageformular
Fragen Sie, wie wahrscheinlich eine Empfehlung ist, von 0 bis 10, danach ein optionaler Kommentar. Eine Einsendung, zwei Schritte, wenn JavaScript läuft.
Nutzen Sie Tilda? Fügen Sie den Code in einen T123-Block ein (bezahlter Tarif) oder verwenden Sie den Webhook ohne Code.
Was Sie kopieren
Diese Vorlage fragt, wie wahrscheinlich ein Besucher Sie als Inhaber der Website weiterempfehlen würde, auf einer Skala von 0 bis 10, und bietet danach einen optionalen Kommentar an.
Es ist eine Umfrage unter Ihren Besuchern. Es ist keine Bewertung von Formgong, und diese Website veröffentlicht keine Punktzahl für das Produkt.
Mit JavaScript steht der Kommentar auf einem zweiten Schritt. Das Skript zeigt diesen Schritt erst, nachdem eine Zahl gewählt wurde.
Ohne JavaScript zeigt ein kleiner Stil in noscript beide Schritte auf einmal. Der Besucher kann trotzdem ein einziges Formular absenden.
Es gibt einen einzigen POST, und der liegt am Ende. Der erste Schritt sendet keine unvollständige Einsendung.
Felder, die Telegram anzeigt
Die Zahl ist eine Gruppe von Radioschaltflächen mit dem Namen score. Telegram setzt score und danach die Zahl, von 0 bis 10.
Das Feld für den Kommentar heißt comment. Die E-Mail ist optional und heißt email, damit Sie antworten können, wenn jemand eine Adresse hinterlässt.
Fügen Sie keine zweite Gruppe mit dem Namen score hinzu. Radioschaltflächen mit demselben Namen sind eine einzige Antwort.
Das Honeypot botcheck ist enthalten, leer und außerhalb des Bildschirms. Ein ausgefülltes Honeypot gilt als Spam und wird nicht zugestellt.
Das zusätzliche Snippet sendet dieselben Antworten als JSON mit fetch, nachdem die Schritte durchlaufen sind. Der Zugriffsschlüssel muss trotzdem im Formular stehen.
Turnstile bleibt im Kommentar, bis Sie es bewusst einschalten und einen Site-Key einfügen. YOUR_TURNSTILE_SITE_KEY ist ein Platzhalter und kein funktionierender Schlüssel.
Was diese Vorlage nicht behauptet
Die Vorlage berechnet keinen Index der Weiterempfehlung, kein Diagramm und keinen Vergleichswert. Die Zahlen lesen Sie im Posteingang oder in Telegram.
Die Vorlage vergibt keine Punkte für Anfragen und sendet die Antworten nicht an ein Modell. Die Zahl ist nur ein Feld.
Der Free-Tarif behält Einsendungen 30 Tage und erlaubt 300 im Monat. Telegram ist sofort. Im Free-Tarif kommt zu jeder Einsendung eine E-Mail.
Die Speicherung liegt in der EU. Formgong ist der Betreiber. Schreiben Sie an support@formgong.com, wenn es um das Produkt geht.
Wenn Sie statt dieser Frage in zwei Schritten ein langes Branchenformular brauchen, nutzen Sie die Branchenvorlagen auf dem Hub.
Vorschau
Formularcode
<form id="fg-nps" action="https://formgong.com/submit" method="POST" style="position:relative">
<input type="hidden" name="access_key" value="fk_your_access_key">
<input type="hidden" name="_lang" value="de">
<fieldset data-step="1">
<legend>Wie wahrscheinlich ist eine Empfehlung?</legend>
<p><span>Unwahrscheinlich</span> <span>Sehr wahrscheinlich</span></p>
<label><input type="radio" name="score" value="0" required> 0</label>
<label><input type="radio" name="score" value="1" required> 1</label>
<label><input type="radio" name="score" value="2" required> 2</label>
<label><input type="radio" name="score" value="3" required> 3</label>
<label><input type="radio" name="score" value="4" required> 4</label>
<label><input type="radio" name="score" value="5" required> 5</label>
<label><input type="radio" name="score" value="6" required> 6</label>
<label><input type="radio" name="score" value="7" required> 7</label>
<label><input type="radio" name="score" value="8" required> 8</label>
<label><input type="radio" name="score" value="9" required> 9</label>
<label><input type="radio" name="score" value="10" required> 10</label>
<button type="button" data-next>Weiter</button>
</fieldset>
<fieldset data-step="2" hidden>
<label>Was sollten wir wissen? <textarea name="comment"></textarea></label>
<label>E-Mail <input type="email" name="email" autocomplete="email"></label>
<button type="button" data-back>Zurück</button>
<button type="submit">Senden</button>
</fieldset>
<div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
<label>Lassen Sie dieses Feld leer <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Optional. Schalten Sie Turnstile für dieses Formular ein, entfernen Sie diese Kommentarzeichen und fügen Sie den Site-Key ein.
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="de"></div>
-->
</form>
<noscript><style>[data-step]{display:block}</style></noscript>
<script>
(function () {
var form = document.getElementById("fg-nps");
if (!form) return;
var steps = form.querySelectorAll("[data-step]");
function show(index) {
steps.forEach(function (step, i) { step.hidden = i !== index; });
}
var next = form.querySelector("[data-next]");
var back = form.querySelector("[data-back]");
if (next) next.addEventListener("click", function () {
var picked = form.querySelector('input[name="score"]:checked');
if (!picked) return;
show(1);
});
if (back) back.addEventListener("click", function () { show(0); });
})();
</script>Dieselben Antworten als ein JSON-fetch
<form id="fg-nps" action="https://formgong.com/submit" method="POST" style="position:relative">
<input type="hidden" name="access_key" value="fk_your_access_key">
<input type="hidden" name="_lang" value="de">
<fieldset data-step="1">
<legend>Wie wahrscheinlich ist eine Empfehlung?</legend>
<p><span>Unwahrscheinlich</span> <span>Sehr wahrscheinlich</span></p>
<label><input type="radio" name="score" value="0" required> 0</label>
<label><input type="radio" name="score" value="1" required> 1</label>
<label><input type="radio" name="score" value="2" required> 2</label>
<label><input type="radio" name="score" value="3" required> 3</label>
<label><input type="radio" name="score" value="4" required> 4</label>
<label><input type="radio" name="score" value="5" required> 5</label>
<label><input type="radio" name="score" value="6" required> 6</label>
<label><input type="radio" name="score" value="7" required> 7</label>
<label><input type="radio" name="score" value="8" required> 8</label>
<label><input type="radio" name="score" value="9" required> 9</label>
<label><input type="radio" name="score" value="10" required> 10</label>
<button type="button" data-next>Weiter</button>
</fieldset>
<fieldset data-step="2" hidden>
<label>Was sollten wir wissen? <textarea name="comment"></textarea></label>
<label>E-Mail <input type="email" name="email" autocomplete="email"></label>
<button type="button" data-back>Zurück</button>
<button type="submit">Senden</button>
</fieldset>
<div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
<label>Lassen Sie dieses Feld leer <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Optional. Schalten Sie Turnstile für dieses Formular ein, entfernen Sie diese Kommentarzeichen und fügen Sie den Site-Key ein.
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="de"></div>
-->
</form>
<noscript><style>[data-step]{display:block}</style></noscript>
<script>
(function () {
var form = document.getElementById("fg-nps");
if (!form) return;
var steps = form.querySelectorAll("[data-step]");
function show(index) {
steps.forEach(function (step, i) { step.hidden = i !== index; });
}
var next = form.querySelector("[data-next]");
var back = form.querySelector("[data-back]");
if (next) next.addEventListener("click", function () {
var picked = form.querySelector('input[name="score"]:checked');
if (!picked) return;
show(1);
});
if (back) back.addEventListener("click", function () { show(0); });
})();
</script>
<script>
(function () {
var form = document.getElementById("fg-nps");
if (!form) return;
var status = document.createElement("p");
status.setAttribute("role", "status");
form.appendChild(status);
form.addEventListener("submit", function (event) {
event.preventDefault();
var data = Object.fromEntries(new FormData(form));
fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify(data)
}).then(function (res) { return res.json(); }).then(function (result) {
status.textContent = result && result.success ? (result.message || "Gesendet. Vielen Dank!") : ((result && result.message) || "Das Senden ist fehlgeschlagen. Bitte versuchen Sie es erneut.");
if (result && result.success) form.reset();
}).catch(function () {
status.textContent = "Das Senden ist fehlgeschlagen. Bitte versuchen Sie es erneut.";
});
});
})();
</script>Fragen und Antworten
Ist 0 das untere Ende?
Ja. Die Radioschaltflächen laufen von 0 bis 10. Die Beschriftungen sagen, welches Ende niedrig und welches Ende hoch ist. Der gespeicherte Wert ist die Zahl.
Kann ich den Kommentar zur Pflicht machen?
Sie können das Attribut required am textarea setzen. Diese Vorlage lässt den Kommentar optional, damit eine Zahl allein gesendet werden kann.
Speichert der erste Schritt etwas?
Nein. Formgong erhält eine Einsendung, wenn das Formular abgeschickt wird. Der Wechsel zum Kommentar sendet nichts.
Warum ist die E-Mail optional?
Manche Menschen nennen eine Zahl und keine Adresse. Wenn Sie einen Weg für die Antwort brauchen, schreiben Sie das in die Beschriftung und markieren Sie das Feld mit required.