Email signup forms with Gatsby & Mailchimp
In the article, I'll provide sample code to creating a Mailchimp signup form for Gatsby.
Demo Link: https://gatsbymailchimp.netlify.com/
Install the plugin
Install the plugin to get it working on your machine:
npm i gatsby-plugin-mailchimp
Add the plugin to your Gatsby config file
{
resolve: 'gatsby-plugin-mailchimp',
options: {
endpoint: 'Copy the endpoint link from Mailchimp',
},
},
Images:
Copy the action link paste it to the endpoint.
Component Code
state = {
nam1: null,
nam2: null,
email: null,
}
_handleChange = (e) => {
console.log({
[`${e.target.name}`]: e.target.value,
});
this.setState({
[`${e.target.name}`]: e.target.value,
});
}
_handleSubmit = (e) => {
e.preventDefault();
console.log('submit', this.state);
addToMailchimp(this.state.email, {
FIRSTNAME: this.state.nam1,
LASTNAME: this.state.nam2
})
.then(({
msg,
result
}) => {
console.log('msg', `${result}: ${msg}`);
if (result !== 'success') {
throw msg;
}
alert(msg);
})
.catch((err) => {
console.log('err', err);
alert(err);
});
}
Need Any Help
Contact: contact@developerjahid.com
Make your modern website with Developer Jahid,
Website: https://developerjahid.com
Thanks.
Top comments (1)
nice article