Formularz ankiety NPS

Zapytaj, na ile odwiedzający poleciłby ciebie, od 0 do 10, i opcjonalnie o komentarz. Jedno zgłoszenie, dwa kroki, gdy działa JavaScript.

Używasz Tildy? Wklej do bloku T123 (płatny plan) albo użyj webhooka bez kodu.

Co kopiujesz

Ten szablon pyta, jak bardzo prawdopodobne jest, że odwiedzający cię poleci, na skali od 0 do 10, a potem proponuje opcjonalny komentarz.

To ankieta twoich odwiedzających. To nie jest ocena Formgong i ta strona nie publikuje oceny produktu.

Z JavaScript komentarz stoi na drugim kroku. Skrypt pokazuje ten krok dopiero po wybraniu liczby.

Bez JavaScript niewielki styl w noscript pokazuje oba kroki naraz. Odwiedzający nadal może wysłać jeden formularz.

POST jest jeden, na końcu. Pierwszy krok nie wysyła częściowego zgłoszenia.

Pola, które pokaże Telegram

Ocena to grupa pól radio o nazwie score. Telegram wypisuje score, a potem liczbę od 0 do 10.

Pole komentarza nazywa się comment. E-mail jest opcjonalny, z nazwą email, żeby dało się odpisać, gdy ktoś zostawi adres.

Nie dodawaj drugiej grupy o nazwie score. Pola radio o tej samej nazwie to jedna odpowiedź.

Honeypot botcheck jest dołączony, pusty i poza ekranem. Wypełniony honeypot jest spamem i nie jest dostarczany.

Dodatkowy fragment wysyła te same odpowiedzi jako JSON przez fetch, po krokach. I tak potrzebuje klucza dostępu w formularzu.

Turnstile zostaje w komentarzu, dopóki go nie włączysz i nie wkleisz klucza witryny. YOUR_TURNSTILE_SITE_KEY to symbol zastępczy, a nie działający klucz.

Czego ten szablon nie obiecuje

Szablon nie liczy indeksu promotorów, wykresu ani punktu odniesienia. Liczby czytasz w skrzynce albo na Telegramie.

Nie ocenia leadów i nie wysyła odpowiedzi do modelu. Liczba to po prostu pole.

Darmowy plan trzyma zgłoszenia przez 30 dni i pozwala na 300 miesięcznie. Telegram przychodzi od razu. E-mail w darmowym planie przychodzi przy każdym zgłoszeniu.

Przechowywanie jest w UE. Operatorem jest Formgong. W sprawie produktu napisz na support@formgong.com.

Jeśli zamiast tego pytania na dwa kroki potrzebujesz długiego formularza branżowego, weź szablony branżowe na hubie.

Podgląd

Jak bardzo prawdopodobne jest, że nas polecisz?

Mało prawdopodobne · Bardzo prawdopodobne

Kod formularza

HTML
<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="pl">
  <fieldset data-step="1">
    <legend>Jak bardzo prawdopodobne jest, że nas polecisz?</legend>
    <p><span>Mało prawdopodobne</span> <span>Bardzo prawdopodobne</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>Dalej</button>
  </fieldset>
  <fieldset data-step="2" hidden>
    <label>Co powinniśmy wiedzieć? <textarea name="comment"></textarea></label>
    <label>E-mail <input type="email" name="email" autocomplete="email"></label>
    <button type="button" data-back>Wstecz</button>
    <button type="submit">Wyślij</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>Pozostaw to pole puste <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
Opcjonalnie. Włącz Turnstile dla tego formularza, usuń te znaczniki komentarza i wklej klucz witryny.
<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="pl"></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>
Te same odpowiedzi jednym żądaniem JSON przez fetch
Te same odpowiedzi jednym żądaniem JSON przez 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="pl">
  <fieldset data-step="1">
    <legend>Jak bardzo prawdopodobne jest, że nas polecisz?</legend>
    <p><span>Mało prawdopodobne</span> <span>Bardzo prawdopodobne</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>Dalej</button>
  </fieldset>
  <fieldset data-step="2" hidden>
    <label>Co powinniśmy wiedzieć? <textarea name="comment"></textarea></label>
    <label>E-mail <input type="email" name="email" autocomplete="email"></label>
    <button type="button" data-back>Wstecz</button>
    <button type="submit">Wyślij</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>Pozostaw to pole puste <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
Opcjonalnie. Włącz Turnstile dla tego formularza, usuń te znaczniki komentarza i wklej klucz witryny.
<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="pl"></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 || "Wysłano. Dziękujemy!") : ((result && result.message) || "Nie udało się wysłać. Spróbuj ponownie.");
      if (result && result.success) form.reset();
    }).catch(function () {
      status.textContent = "Nie udało się wysłać. Spróbuj ponownie.";
    });
  });
})();
</script>

Pytania i odpowiedzi

Czy 0 to niski koniec?

Tak. Pola radio idą od 0 do 10. Etykiety mówią, który koniec jest niski, a który wysoki. Zapisana wartość to liczba.

Czy mogę wymagać komentarza?

Możesz dodać atrybut required na textarea. Ten szablon zostawia go opcjonalnym, żeby dało się wysłać samą liczbę.

Czy pierwszy krok coś zapisuje?

Nie. Formgong dostaje jedno zgłoszenie, gdy formularz zostanie wysłany. Przejście do komentarza nic nie wysyła.

Dlaczego e-mail jest opcjonalny?

Część osób zostawi liczbę i nie zostawi adresu. Jeśli potrzebujesz ścieżki do odpowiedzi, napisz to w etykiecie i oznacz pole jako required.