Building a newsletter subscription form with Alpine.js

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. Replace {username} with your Buttondown username:

<!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>

Preview

And that's it!

Next steps

After you have subscribers flowing through your website (and your newsletter), you can start sending emails to them. Or, if you're interested in classifying and enriching your subscribers to get a better understanding of who they are and how they subscribed to your newsletter, you can set up tags and metadata fields.

Building a newsletter subscription form with Alpine.js

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

Next steps