Adding newsletter component on Astro using Mailchimp πŸ—žοΈ
Blog / Adding newsletter component on Astro using Mailchimp πŸ—žοΈ
2 Minutes Read
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

  1. Create Mailchimp UI
  2. Install Package
  3. Add Code
  4. 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.

Select Hosting Service



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

Select Hosting Service

That’s all folks, happy hacking πŸ™Œ