# 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](https://docs.buttondown.com/sending-emails). 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](https://docs.buttondown.com/tags) and [metadata](https://docs.buttondown.com/subscriber-metadata) fields.

\
\
daisyUI\
\
Build a newsletter subscription form with daisyUI and Tailwind CSS. [Link](/content/features/integrations/daisyui/index.html)  
\
\
Mantine\
\
Add a subscription form to your Mantine application using Buttondown's API. [Link](/content/features/integrations/mantine/index.html)  
\
\
shadcn/ui\
\
Build a newsletter subscription form with shadcn/ui components. [Link](/content/features/integrations/shadcn-ui/index.html)

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