Last Updated:
Email Field
Cover Tejas Sawant

How to add mailchimp to gatsbyjs ? 

Tejas Sawant
Tejas Sawant GatsbyJS

This article show how you can add mailchimp to your gatsbyjs project. 

First install mailchimp package using npm to gatsby project. 

npm install gatsby-plugin-mailchimp

Add following config object to your gatsby-config.js

{
  "resolve": "gatsby-plugin-mailchimp",
  "options": {
    "endpoint": "",
    "timeout": 3500
  }
}
  • Login to mailchimp account.

  • Then look for Audience > Embedded Forms.

  • Click on Select

  • Grab url in form action https://******.list-manage.com/subscribe/post?u=****************

  • Paste that url into endpoint in gatsby-config.js
URL
URL
{
  "resolve": "gatsby-plugin-mailchimp",
  "options": {
    "endpoint": "https://******.list-manage.com/subscribe/post?u=****************",
    "timeout": 3500
  }
}

Last create text field for adding email id.

import addToMailchimp from "gatsby-plugin-mailchimp"

export default class MyGatsbyComponent extends React.Component {
  // Since `addToMailchimp` returns a promise, you
  // can handle the response in two different ways:

  // Note that you need to send an email & optionally, listFields
  // these values can be pulled from React state, form fields,
  // or wherever.  (Personally, I recommend storing in state).

  // 1. via `.then`
  _handleSubmit = e => {
    e.preventDefault()
    addToMailchimp(email, listFields) // listFields are optional if you are only capturing the email address.
      .then(data => {
        // I recommend setting data to React state
        // but you can do whatever you want (including ignoring this `then()` altogether)
        console.log(data)
      })
      .catch(() => {
        // unnecessary because Mailchimp only ever
        // returns a 200 status code
        // see below for how to handle errors
      })
  }

  // 2. via `async/await`
  _handleSubmit = async e => {
    e.preventDefault()
    const result = await addToMailchimp(email, listFields)
    // I recommend setting `result` to React state
    // but you can do whatever you want
  }

  render() {
    return <form onSubmit={this._handleSubmit(email, { listFields })}>...</form>
  }
}

Reference :- https://www.gatsbyjs.com/plugins/gatsby-plugin-mailchimp

Authors

Tags