Alpine.js

Overview

You can use Alpine.js to create a simple and dynamic contact form with FormsLite.io. This approach allows for a seamless user experience with custom form validation and submission handling without needing to reload the page.

Example Code

Here is a sample contact form using Alpine.js with FormsLite.io. Modify it according to your needs.

HTML and Alpine.js Setup

htmlCopy code<form x-data="contactForm()" @submit.prevent="submit">
    <input type="hidden" name="access_key" value="ACCESS_KEY">
    <input type="text" name="name" required />
    <input type="email" name="email" required />
    <textarea name="message" required rows="3"></textarea>
    <button type="submit" :disabled="loading">Submit</button>
    <div x-text="status"></div>
</form>

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

      this.status = "Submitting...";
      this.loading = true;

      const response = await fetch("https://api.formslite.io/submission", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json"
        },
        body: json
      });
      const result = await response.json();
      if (result.success) {
        console.log(result);
        this.status = result.message || "Success";
      } else {
        this.status = "Something went wrong!";
      }
      this.loading = false;
    }
  };
}
</script>

Summary

Using Alpine.js with FormsLite.io allows you to create interactive and responsive forms. The provided example shows how to set up a contact form, handle submission, and provide feedback to users. Customize the code to suit your specific requirements and enhance your form's functionality.