https://github.com/gndx/react-mailchimp-form
React subscribe form for Mailchimp
https://github.com/gndx/react-mailchimp-form
hacktoberfest mailchimp react
Last synced: 6 months ago
JSON representation
React subscribe form for Mailchimp
- Host: GitHub
- URL: https://github.com/gndx/react-mailchimp-form
- Owner: gndx
- License: mit
- Created: 2018-02-27T06:04:30.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-14T18:37:14.000Z (over 2 years ago)
- Last Synced: 2025-04-09T07:41:44.662Z (6 months ago)
- Topics: hacktoberfest, mailchimp, react
- Language: JavaScript
- Size: 12.7 KB
- Stars: 62
- Watchers: 3
- Forks: 46
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-mailchimp-form
It provides an easy-to configure component to add a mailchimp form to your react project
# Install
```npm
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 Fields"
4. Copy the HTML and extract the action from "Signup Forms > Embedded forms"
The action URL will look like this ("YOUR-USER" may be "twitter" on certain accounts - just subsitute it with your username in this case):
```
https://.us16.list-manage.com/subscribe/post?u=XXXXXXXXXXXXX&id=XXXXXX
```
We will use this URL to configure the component, by adding it to the action prop of the component.
```js
import React, { Component } from "react"
// import the component
import Mailchimp from "react-mailchimp-form"
class App extends Component {
render() {
return (
)
}
}
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
```js
```
# Demo
Check here: [react-mailchimp-form](https://arepa-dev.github.io/reactMailchimp/)
# Contributing
If someone wants to add or improve something, I invite you to collaborate directly in this repository: [react-mailchimp-form](https://github.com/gndx/react-mailchimp-form/)
# License
React-mailchimp-form is released under the [MIT License](https://opensource.org/licenses/MIT).