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&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&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&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.