Mastodon

Alpine.js is a JavaScript framework that lets you compose behaviors, like forms, directly in the markup of a file.

You can use Alpine.js forms to collect your subscribers' email addresses or other information. Because Buttondown has a traditional <form> endpoint, you can take advantage of the built-in Alpine.js support for action and method attributes and get up and running in seconds.

Here's a code example:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Alpine.js Buttondown Example</title>
    <script
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
      defer
    ></script>
  </head>
  <body>
    <form 
      action="https://buttondown.com/api/emails/embed-subscribe/{username}" 
      method="post"
      x-data="contactForm()" 
      @submit="handleSubmit"
    >
      <label>
        <span>Email address</span>
        <input type="email" name="email" x-model="email" required />
      </label>
      <button type="submit" x-text="buttonText" :disabled="loading">
        Subscribe
      </button>
    </form>

    <script>
      function contactForm() {
        return {
          email: "",
          buttonText: "Subscribe",
          loading: false,
          handleSubmit() {
            this.buttonText = "Submitting...";
            this.loading = true;
          },
        };
      }
    </script>
  </body>
</html>

And that's it!

Building a newsletter subscription form with Alpine.js

Use Alpine.js to build newsletter subscription forms that integrate seamlessly with Buttondown.