Contact From for Alpine.js

<form x-data="contactForm()" @submit.prevent="submit">
  <div>
    <input
      type="email"
      name="email"
      id="email"
      placeholder="Your Email"
      required
    />
  </div>

  <div>
    <input
      type="text"
      name="subject"
      id="subject"
      placeholder="Your subject"
      required
    />
  </div>

  <div>
    <textarea
      name="message"
      id="message"
      rows="6"
      placeholder="Your Message"
      required
    ></textarea>
  </div>

  <div>
    <button type="submit" :disabled="loading">Submit</button>
  </div>

  <div x-text="status"></div>
</form>

<script>
  function contactForm() {
    return {
      loading: false,
      status: "",
      async submit(event) {
        let formData = new FormData(event.target);
        let object = Object.fromEntries(formData);
        const json = JSON.stringify(object);

        this.loading = true;

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

        if (response.ok) {
          this.status = result.message || "Success";
          event.target.reset();
        }
        this.status = result.message || "Something went wrong";
        this.loading = false;
        setTimeout(() => (this.status = ""), 3000);
      },
    };
  }
</script>