Form builder

<style>
#fg-form{position:relative;box-sizing:border-box;display:grid;gap:16px;width:100%;max-width:520px;padding:28px;border:1px solid #dbe2ea;border-radius:8px;background:#fff;color:#0f172a;font:16px/1.5 system-ui,sans-serif}
#fg-form *{box-sizing:border-box}
#fg-form h2{margin:0;font-size:24px;line-height:1.3}
#fg-form .fg-field{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0}
#fg-form label,#fg-form legend{font-weight:500}
#fg-form legend{padding:0;margin-bottom:2px}
#fg-form input,#fg-form select,#fg-form textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid #94a3b8;border-radius:8px;background:#fff;color:inherit;font:inherit}
#fg-form textarea{min-height:120px;resize:vertical}
#fg-form .fg-choice{display:flex;align-items:center;gap:10px;font-weight:400}
#fg-form .fg-choice input{width:20px;min-height:20px;margin:0;flex-shrink:0}
#fg-form [aria-invalid=true]{border-color:#b91c1c}
#fg-form .fg-error{margin:0;color:#b91c1c;font-size:14px}
#fg-form .fg-status{margin:0}
#fg-form .fg-error:empty,#fg-form .fg-status:empty{display:none}
#fg-form button{min-height:48px;padding:12px 20px;border:0;border-radius:8px;background:#4338ca;color:#fff;font:inherit;font-weight:600;cursor:pointer}
#fg-form button:disabled{opacity:.7;cursor:wait}
#fg-form :focus-visible{outline:3px solid #4338ca;outline-offset:3px}
#fg-form .fg-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
</style>
<form id="fg-form" action="https://formgong.com/submit" method="POST">
  <h2>Contact us</h2>
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="en">
  <div class="fg-field">
    <label for="fg-name">Name *</label>
    <input type="text" id="fg-name" name="name" autocomplete="name" required aria-describedby="fg-name-error" placeholder="Jane Smith">
    <p class="fg-error" id="fg-name-error"></p>
  </div>
  <div class="fg-field">
    <label for="fg-email">Email *</label>
    <input type="email" id="fg-email" name="email" autocomplete="email" required aria-describedby="fg-email-error" placeholder="jane@example.com">
    <p class="fg-error" id="fg-email-error"></p>
  </div>
  <div class="fg-field">
    <label for="fg-message">Message *</label>
    <textarea id="fg-message" name="message" required aria-describedby="fg-message-error" placeholder="How can we help?" rows="4"></textarea>
    <p class="fg-error" id="fg-message-error"></p>
  </div>
  <div class="fg-trap" aria-hidden="true"><label>Leave this empty <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label></div>
  <button type="submit">Send message</button>
  <p class="fg-status" data-fg-status role="status"></p>
</form>
<script>
// Optional. Without it the browser posts the form and Formgong shows its own thank-you or error page.
(function () {
  var form = document.getElementById("fg-form");
  var status = form.querySelector("[data-fg-status]");
  form.noValidate = true;
  form.addEventListener("submit", function (event) {
    event.preventDefault();
    var first = null, seen = {};
    Array.prototype.forEach.call(form.elements, function (field) {
      var id = field.getAttribute("aria-describedby");
      if (!id || seen[id]) return;
      seen[id] = true;
      var ok = field.checkValidity();
      field.setAttribute("aria-invalid", ok ? "false" : "true");
      document.getElementById(id).textContent = ok ? "" : field.validationMessage;
      if (!ok && !first) first = field;
    });
    if (first) { first.focus(); return; }
    var button = form.querySelector("[type=submit]");
    button.disabled = true;
    status.textContent = "Sending…";
    fetch(form.action, { method: "POST", headers: { Accept: "application/json" }, body: new FormData(form) })
      .then(function (response) { return response.json().catch(function () { return {}; }); })
      .then(function (data) {
        if (data.success === true) { form.reset(); status.textContent = "Thank you. Your message was sent."; }
        else status.textContent = data.message || "Could not send. Please try again.";
      })
      .catch(function () { status.textContent = "Could not reach the server. Check your connection and try again."; })
      .then(function () { button.disabled = false; });
  });
})();
</script>