نموذج استطلاع 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="ar">
  <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="ar"></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>