Svelte Contact Form That Posts With Fetch

<!-- src/lib/ContactForm.svelte (works in SvelteKit too) -->
<script>
  let loading = false;
  let status = "";

  async function handleSubmit(event) {
    event.preventDefault();
    loading = true;

    const payload = Object.fromEntries(new FormData(event.currentTarget));

    try {
      const response = await fetch("https://formbold.com/s/FORM_ID", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(payload),
      });
      const result = await response.json();

      if (response.ok) {
        status = result.message || "Message sent.";
        event.currentTarget.reset();
      } else {
        status = result.message || "Something went wrong.";
      }
    } catch {
      status = "Could not reach Formbold.";
    } finally {
      loading = false;
      setTimeout(() => (status = ""), 4000);
    }
  }
</script>

<form on:submit={handleSubmit}>
  <label>
    Email
    <input type="email" name="email" required />
  </label>
  <label>
    Subject
    <input type="text" name="subject" required />
  </label>
  <label>
    Message
    <textarea name="message" rows="5" required></textarea>
  </label>
  <button type="submit" disabled={loading}>
    {loading ? "Sending..." : "Send message"}
  </button>
  {#if status}
    <p>{status}</p>
  {/if}
</form>