Trying to collect email addresses from an Alpine.js form? Buttondown makes it easy — because we expose 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 an 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!
Once you have subscribers flowing through your website (and your newsletter), you'll probably want to 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 why/where they subscribed, you may want to set up tags and metadata fields.