BLOG // May 5, 2021

Gatsby MailChimp email list signup

Integrating with Mailchimp to allow your readers to sign up to a newsletter (or automatic RSS feed new post notifications like we do here) is made extremely easy by the Gatsby Mailchimp plugin.

This guide will provide you with an easy <SubscribeForm /> component you can include anywhere on your site to show a signup box and display a nice message from the signup API.

Install the plugin

First things first, we need to install the Gatsby plugin for Mailchimp. Run the following in your Gatsby directory:

npm install gatsby-plugin-mailchimp

Update gatsby-config.js

Add the plugin to your gatsby-config.js plugins[] array as shown below. You need to specify the endpoint that you get from Mailchimp. To find it get their embedded form for your site and copy it out. The below one is just an example.

# gatsby-config.js changes
{
  resolve: 'gatsby-plugin-mailchimp',
  options: {
    endpoint: 'https://xxxx.us1.list-manage.com/subscribe/post?u=123123123123123&amp;id=123123123'
  }
}

Create the Signup Form Component

Below is my signup form component, which I keep in components/subscribe/Form.js. It expects that you have Tailwind as a CSS package, but you can easily change the className's to something else. It also provides a message box for replies from Mailchimp (e.g. signup successful, etc).

# components/subscribe/Form.js
import React from 'react';
import addToMailchimp from 'gatsby-plugin-mailchimp';

export class SubscribeForm extends React.Component {
      state = {
        email: '',
        message: '',
        display: 'none',
    };

    handleInputChange = (event) => {
        const target = event.target;
        const value = target.value;
        const name = target.name;
        this.setState({
            [name]: value
        });
    };

    handleSubmit = async (e) => {
        e.preventDefault();
        const result = await addToMailchimp(this.state.email);
        this.setState({ message: result.msg });
        this.setState({ display: 'block' });
    };
  

    render() {
        return (          
          <form name="subscribeForm" onSubmit={this.handleSubmit} method="POST" id="subscribe-form" className="subscribe-form">
            <p className="mt-6 max-w-sm md:max-w-md lg:max-w-7xl text-2xl font-medium leading-10 space-y-10 mb-6 text-gray-600 prose prose-lg">
              If you enjoy my content, consider subscribing. You will only receive new blog stories, no other email.
            </p>

            <div style={{ display: this.state.display }} className="message rounded-md bg-blue-50 p-4 text-sm text-blue-700 mb-5 hidden" dangerouslySetInnerHTML={{ __html: this.state.message }} />

            <div className="flex items-flex">                            
                <div className="form-row">
                    <label>
                        <input
                          className="subscribe-email shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full text-lg border-gray-300 rounded-md"
                          type="email"
                          name="email"
                          placeholder="Enter Email Address..."
                          value={this.state.email}
                          onChange={this.handleInputChange}
                      />
                    </label>
                </div>
                <button className="button ml-3 inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" type="submit">
                    Subscribe
                </button>
              </div>
          </form>          
        );
    }
}

Using the Component

You can now edit your blog, website, index.js, whatever to include it. Here is a full example using Tailwind on this site:

<div className="bg-white pt-16 pb-0 px-4 sm:px-6 lg:pb-28">
	<div className="relative mx-auto lg:max-w-7xl border-t-2 border-gray-200 pt-10">
	  <div>
	    <h2 className="text-4xl leading-none font-extrabold text-gray-900 tracking-tight -mb-5">
	      Subscribe to new articles
	    </h2>
	  </div>
	  <div className="mt-6 grid">
	    <div className="mt-6 max-w-sm md:max-w-md lg:max-w-4xl text-2xl font-medium leading-10 mb-6 text-gray-600">
	      <SubscribeForm />
	    </div>
	  </div>
	</div>
</div>

Specifically, you need to add this to the top of your file:

import { SubscribeForm } from "../components/subscribe/Form"

And then use this to include the component somewhere on your page:

<SubscribeForm />

Final Thoughts

This makes the signup extremely easy. From there you can either manually email your members, or like we do, automatically send them either a daily or weekly feed of new content on your site based on an RSS feed.

Comments

Subscribe to new articles

If you enjoy my content, consider subscribing. You will only receive new blog stories, no other email.