NPSアンケートフォーム

<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="ja">
  <fieldset data-step="1">
    <legend>おすすめする可能性はどのくらいですか？</legend>
    <p><span>低い</span> <span>高い</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>次へ</button>
  </fieldset>
  <fieldset data-step="2" hidden>
    <label>伝えておきたいことはありますか？ <textarea name="comment"></textarea></label>
    <label>メールアドレス <input type="email" name="email" autocomplete="email"></label>
    <button type="button" data-back>戻る</button>
    <button type="submit">送信</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>この欄は空のままにしてください <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
任意です。このフォームで Turnstile をオンにしてから、このコメント記号を外し、サイトキーを貼ってください。
<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="ja"></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 || "送信しました。ありがとうございます。") : ((result && result.message) || "送信できませんでした。もう一度お試しください。");
      if (result && result.success) form.reset();
    }).catch(function () {
      status.textContent = "送信できませんでした。もう一度お試しください。";
    });
  });
})();
</script>