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 Mailchimp UI
Install Package
Add Code
Apply CSS

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