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