Custom mailchimp signup form in React

Question

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

Answer 1

I ran into a lot of issues trying to get the form to work in React and not open a confirmation page.

There are a few ways to get around this, the easiest method is to use the react-mailchimp-subscribe package. This is super strait forward and the package is fairly light. The only thing needed to get this form to work is the action URL that Mailchimp provides you on the Embed Form page for your list.

If you don't want to use the package, you can dive into the source and recreate what is being done very simply. The few things that have to be changed are the URL from

http://xxxxx.us#.list.com/subscribe/post?u=xxxxx&id=xxxx

to

http://xxxxx.us#.list.com/subscribe/post-json?u=xxxxx&id=xxxx

In addition to adding the -json, you will need to add param c that is blank (this can be done in the jsonp request or added to the url by adding &c=?).

With this implementation you should no longer get redirected and all messages will come back in JSON format. Also note that you do not need to have their script tag on your page for this to work.

References:

1. AJAX Mailchimp signup form integration