Building a newsletter subscription form with Alpine.js

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

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>

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.

daisyUI

Build a newsletter subscription form with daisyUI and Tailwind CSS. Link


Mantine

Add a subscription form to your Mantine application using Buttondown's API. Link


shadcn/ui

Build a newsletter subscription form with shadcn/ui components. Link

Buttondown is the last email platform you’ll switch to.