react-mailchimp-form

1.0.2 • Public • Published

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:

  1. Create a new account or use an existing one
  2. Add a new list or use an existing one
  3. Personalize the fields on your list on "Settings > List Fieds"
  4. 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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.2
    546
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.2
    546
  • 1.0.1
    2
  • 1.0.0
    0

Package Sidebar

Install

npm i react-mailchimp-form

Weekly Downloads

548

Version

1.0.2

License

MIT

Unpacked Size

15.8 kB

Total Files

5

Last publish

Collaborators

  • gndx