Custom mailchimp signup form in React
I have a react app that I would like to add mailchimp signup form to. I am building a custom signup form and have user sign up by entering their first and last name and email. I am not dealing with any campaign stuff. All I am trying to achieve is that once they sign up, they get an email to confirm subscription.
I have done what's in the mailchimp guide http://kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms but it's always giving me error 500.
Here's the code for the send event
subscribe(event) {
event.preventDefault();
axios({
url: 'https://xxxxxx.us15.list-manage.com/subscribe/post',
method: 'post',
data: this.state,
dataType: 'json'
})
.then(() => {
console.log('success');
});
}
and here's the form
<form onSubmit={this.subscribe.bind(this)}>
<input type="hidden" name="u" value="xxxxxxxxxxx" />
<input type="hidden" name="id" value="xxxxxxxxxxx" />
<label>First Name</label>
<input name="FNAME" type="text" onChange={this.handler.bind(this, 'FNAME')} required="true"/>
<label>Last Name</label>
<input name="LNAME" type="text" onChange={this.handler.bind(this, 'LNAME')} required="true"/>
<label>Email</label>
<input name="EMAIL" type="email" onChange={this.handler.bind(this, 'EMAIL')} required="true"/>
<button type="submit" name="submit">Subscribe</button>
</form>
I have also tried the suggestion in this link AJAX Mailchimp signup form integration
basically passing the u and id along with the url instead of input in the form. but that didn't work either.
Anyone has idea on how to make this work? Thanks!!
Answer
It is possible. [1]
As you mentioned in your link, MailChimp allows you to post the values of form elements on our client to subscribe people to your mailing list. Anything more advanced than that, and you need to use their API, thus requiring CORS (i.e. the API can't be utilized by the client).
If you aren't using React – you can simply copy/paste MailChimp's embedded form builder. But if you are in React, here's what you can do:
1) Get the u and id value
This is outlined in the link above. Or, You can go into your form builder and find the action field: it will be something like https://cool.us16.list-manage.com/subscribe/post?u=eb05e4f830c2a04be30171b01&id=8281a64779 where u and id are in the query arguments.
2) Add onChange and value attributes to form elements
If you just have some simple form elements, you'll notice that typing doesn't do anything. Typing doesn't render any text inside the input elements. Read https://reactjs.org/docs/forms.html to understand why. (React needs a single source of truth for state).
The value needs to be updated. You can do this by updating state in a function that's bind'd.
<input
value={this.state.emailValue}
onChange={ (e)=>{this.setState({emailValue: e.target.value});} }
/>
3) Bonus: include MailChimp's antispam fields
If you read the code inside the embedded forms, you'll notice things like:
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_eb05e4f830c2a04be30171b01_8281a64779" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
You can include these in React by changing the appropriate fields for Babel and JSX. class needs to be className. the <input> tag needs to be closed, and style needs to be passed as an object.
In sum: here's an entire component
import React from 'react'
class SubscribePage extends React.Component {
constructor(props) {
super(props);
this.state = {
emailValue: '',
fNameValue: '',
lNameValue: '',
};
}
render() {
return (
<form action="https://cool.us16.list-manage.com/subscribe/post" method="POST" noValidate>
<input type="hidden" name="u" value="eb05e4f830c2a04be30171b01"/>
<input type="hidden" name="id" value="8281a64779"/>
<label htmlFor='MERGE0'>
Email
<input
type="email"
name="EMAIL"
id="MERGE0"
value={this.state.emailValue}
onChange={ (e)=>{this.setState({emailValue: e.target.value});} }
autoCapitalize="off"
autoCorrect="off"
/>
</label>
<label htmlFor='MERGE1'>
First name
<input
type="text"
name="FNAME"
id="MERGE1"
value={this.state.fNameValue}
onChange={(e)=>{this.setState({fNameValue: e.target.value});}}
/>
</label>
<label htmlFor='MERGE2'>
Last name
<input
type="text"
name="LNAME"
id="MERGE2"
value={this.state.lNameValue}
onChange={(e)=>{this.setState({lNameValue: e.target.value});}}
/>
</label>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" className="button"/>
<div style={{position: 'absolute', left: '-5000px'}} aria-hidden='true' aria-label="Please leave the following three fields empty">
<label htmlFor="b_name">Name: </label>
<input type="text" name="b_name" tabIndex="-1" value="" placeholder="Freddie" id="b_name"/>
<label htmlFor="b_email">Email: </label>
<input type="email" name="b_email" tabIndex="-1" value="" placeholder="[email protected]" id="b_email"/>
<label htmlFor="b_comment">Comment: </label>
<textarea name="b_comment" tabIndex="-1" placeholder="Please comment" id="b_comment"></textarea>
</div>
</form>
)
}
}
export default SubscribePage
[1]: Note that the user will be taken to a MailChimp page, and asked to verify the subscription by clicking on a link in their email. To avoid this, you gotta use the API