By @akash_dathan
Adding newsletter component on Astro using Mailchimp ποΈ
If you are looking to create a newsletter component on astro, its really easy using mailchimp, letβs see how to can achieve this on Astro
Steps
Create an embedded form using the Mailchimp UI
Dont focus on the the UI, just create a simple one so that we can copy the
action
URL from the generated embedded code.

Install the react-mailchimp-subscribe
package
I will be using the react package react-mailchimp-subscribe
to create the
component.
If react is not setup in your project.Refer to this article on how to integrate react.
- Use the following command to Install the npm package
npm install react-mailchimp-subscribe
Add the component code
I have added the code in the footer of my site, add the following code to add the component to your prefered parent componet.
client:idle
hydration mode is chosen, since the component is loaded
in the footer, so the hydration can be done for the newsletter component
once all the other tasks are done
<div>
ποΈ Subscribe to newsletter
<MailchimpSubscribe url={url} client:idle/>
</div>
Apply CSS
The above code will just give you the raw input element and a button. Following are the css I have used.
input {
padding: 12px 15px;
background-color: black;
border: none;
margin: 8px 10px 60px 0;
border-radius: 0px;
}
button {
cursor: pointer;
border-radius: 0px;
padding: 9px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
And, the following is my end product

Thatβs all folks, happy hacking π