Buttondown logo

Alpine.jsAre.naBloggerBlueskyCarrddaisyUIDiscordDudaFathomFramerLinkedInLinktreeMantinePlausibleshadcn/uiShopifySimpleAnalyticsStripeTwitterTumblrUmamiWebflowWordPress

Buttondown logo

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:

<!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 x-data="contactForm()" @submit.prevent="submit">
      <label>
        <span>Email address</span>
        <input type="email" name="email" x-model="data.email" />
      </label>
      <button type="submit" x-text="buttonText" :disabled="loading">
        Subscribe
      </button>
    </form>

    <script>
      // replace this with your own unique endpoint URL
      const BUTTONDOWN_ENDPOINT =
        "https://buttondown.com/api/emails/embed-subscribe/YOUR-BUTTONDOWN-USERNAME";

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

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.