react-mailchimp-form

react-mailchimp-form

It provides an easy-to configure component to add a mailchimp form to your react project

Install

npm install react-mailchimp-form

Be sure to include the --save option to add this as a dependency in your application's package.json

Usage

First you have to configure your Mailchimp account:

• Create a new account or use an existing one
• Add a new list or use an existing one
• Personalize the fields on your list on "Settings > List Fieds"
• Copy the HTML and extract the action from "Signup Forms > Embedded forms"

The action URL will look like this:

https://<YOUR-USER>.us16.list-manage.com/subscribe/post?u=XXXXXXXXXXXXX&amp;id=XXXXXX

We will use this URL to configure the component

import React, { Component } from 'react';
// import the component
import Mailchimp from 'react-mailchimp-form'

class App extends Component {
  render() {
    return (
        <Mailchimp
        action='https://<YOUR-USER>.us16.list-manage.com/subscribe/post?u=XXXXXXXXXXXXX&amp;id=XXXXXX'
        fields={[
          {
            name: 'EMAIL',
            placeholder: 'Email',
            type: 'email',
            required: true
          }
        ]}
        />
    );
  }
}

export default App;

Options

Multiple fields

You can add all the fields you need for your Mailchimp form, just remember you have to configure them on "Settings > List Fields"

Messages

Personalize or change the message language by default

ClassName

Add a personalized class to personalize your form

  <Mailchimp
  action='https://<YOUR-USER>.us16.list-manage.com/subscribe/post?u=XXXXXXXXXXXXX&amp;id=XXXXXX' 
  
  //Adding multiple fields:
  fields={[
    {
      name: 'EMAIL',
      placeholder: 'Email',
      type: 'email',
      required: true
    },
    {
      name: 'FNAME',
      placeholder: 'name',
      type: 'text',
      required: true
    }
  ]}
  // Change predetermined language
  messages = {
    {
      sending: "Sending...",
      success: "Thank you for subscribing!",
      error: "An unexpected internal error has occurred.",
      empty: "You must write an e-mail.",
      duplicate: "Too many subscribe attempts for this email address",
      button: "Subscribe!"
    }
  }
  // Add a personalized class
  className='<YOUR_CLASSNAME>'
  />

Demo

Check here: react-mailchimp-form

Contributing

If someone wants to add or improve something, I invite you to collaborate directly in this repository: react-mailchimp-form

License

React-mailchimp-form is released under the MIT License.