A backend for your Alpine.js forms

Keep full control over the look and feel of your Alpine.js forms.

Alpine.js is a rugged, minimal framework for composing JavaScript behavior in your markup.

Getting started with Alpine.js is simple

Start collecting data in a matter of clicks.

Let Formspark take care of the servers, databases, and analytics.

Set up any form in seconds.

markup

<form x-data="contactForm()" @submit.prevent="submit">
  <label>
    <span>Message</span>
    <textarea name="message" x-model="data.message"></textarea>
  </label>
  <button type="submit" x-text="buttonText" :disabled="loading">
    Submit
  </button>
</form>

<script>
  const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

  function contactForm() {
    return {
      data: {
        message: "",
      },
      buttonText: "Submit",
      loading: false,
      submit() {
        this.buttonText = "Submitting...";
        this.loading = true;
        fetch(FORMSPARK_ACTION_URL, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Accept": "application/json",
          },
          body: JSON.stringify(this.data),
        })
          .then(() => {
            alert("Form submitted");
          })
          .catch(() => {
            alert("Something went wrong");
          })
          .finally(() => {
            this.data.message = ""
            this.buttonText = "Submit";
            this.loading = false;
          });
      },
    };
  }
</script>

A backend for your Alpine.js forms

Getting started with Alpine.js is simple

Links