Gatsby & Mailchimp integrations Easy way

MD. Jahid Hasan — Tue, 14 Jan 2020 06:57:59 +0000

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/

Images:

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.

DEV Community: MD. Jahid Hasan

Gatsby & Mailchimp integrations Easy way

Email signup forms with Gatsby & Mailchimp