Free Event RSVP Backend

<form action="YOUR_ENDPOINT_URL" method="POST">
  <div>
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" required minlength="2" maxlength="100" placeholder="Your full name" />
    <span class="fd-error" data-fd-error="name"></span>
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required placeholder="you@example.com" />
    <span class="fd-error" data-fd-error="email"></span>
  </div>
  <div>
    <label for="dietary">Dietary Restrictions</label>
    <select id="dietary" name="dietary" required>
      <option value="">Select an option</option>
      <option value="None">None</option>
      <option value="Vegetarian">Vegetarian</option>
      <option value="Vegan">Vegan</option>
      <option value="Gluten-free">Gluten-free</option>
    </select>
    <span class="fd-error" data-fd-error="dietary"></span>
  </div>
  <div>
    <label>
      <input type="checkbox" id="plus_one" name="plus_one" value="yes" />
      I’m bringing a +1
    </label>
    <span class="fd-error" data-fd-error="plus_one"></span>
  </div>
  <button type="submit">RSVP</button>
</form>

<style>
  .fd-error { color: #dc2626; font-size: 0.875rem; margin-top: 0.25rem; display: none; }
  .fd-success { color: #16a34a; padding: 1rem; border: 1px solid #16a34a; border-radius: 4px; display: none; }
  .fd-fail { color: #dc2626; padding: 1rem; border: 1px solid #dc2626; border-radius: 4px; display: none; }
  button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
</style>

<div class="fd-success" id="fd-success">Thanks! Your message has been received.</div>
<div class="fd-fail" id="fd-fail">Something went wrong. Please try again.</div>

<script>
  (function () {
    const form = document.currentScript.closest("form") || document.querySelector("form");
    if (!form) return;

    const fields = {
      name:    { required: true, minlength: 2, maxlength: 100, label: "Name" },
      email:   { required: true, type: "email",                label: "Email" },
      dietary: { required: true,                               label: "Dietary restrictions" },
      plus_one:{ required: false,                              label: "Plus one" },
    };

    function validate(name, value) {
      const rule = fields[name];
      if (!rule) return null;
      if (rule.required && !value.trim()) return `${rule.label} is required.`;
      if (rule.type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
        return "Enter a valid email address.";
      if (rule.minlength && value.trim().length < rule.minlength)
        return `${rule.label} must be at least ${rule.minlength} characters.`;
      if (rule.maxlength && value.trim().length > rule.maxlength)
        return `${rule.label} must be under ${rule.maxlength} characters.`;
      return null;
    }

    function showError(name, message) {
      const el = form.querySelector(`[data-fd-error="${name}"]`);
      if (!el) return;
      el.textContent = message;
      el.style.display = message ? "block" : "none";
    }

    form.querySelectorAll("input, textarea, select").forEach((input) => {
      input.addEventListener("blur", () => {
        showError(input.name, validate(input.name, input.value) || "");
      });
    });

    form.addEventListener("submit", async (e) => {
      e.preventDefault();
      let hasErrors = false;
      form.querySelectorAll("input, textarea, select").forEach((input) => {
        const error = validate(input.name, input.value);
        showError(input.name, error || "");
        if (error) hasErrors = true;
      });
      if (hasErrors) return;

      const btn = form.querySelector("button[type='submit']");
      const originalText = btn.textContent;
      btn.disabled = true;
      btn.textContent = "Sending…";

      try {
        const res = await fetch(form.action, { method: "POST", body: new FormData(form) });
        if (res.ok) {
          form.reset();
          form.style.display = "none";
          document.getElementById("fd-success").style.display = "block";
        } else throw new Error();
      } catch {
        document.getElementById("fd-fail").style.display = "block";
        btn.disabled = false;
        btn.textContent = originalText;
      }
    });
  })();
</script>