In this tutorial, we are going to leverage mailchimp’s API to set up a sign up for a news letter.
If you follow any of my other tutorials, you will find this one to be my easiest yet. This is because mailchimp is designed for Marketers, not developers. Because of that fact, it is extremely friendly to set up.
Who is this tutorial for?
Everyone that is trying to set up a mailing list within a react application.
What does this tutorial teach?
We strive for simplicity, so to make sure that this tutorial isn't wasting anyone's time. Visit this site to see exactly what it does and sign up for my news-letter
Prerequisites
create-react-app installed globally
basic knowledge of react and javascript.
npm installed globally so that we can install packages.
First thing we need to do is make a new react app. we can do this on the command line.
This is what it looks like on mac.
create-react-app news-letter
cd into that folder and open it with the text editor of your choice. i will be using vs code.
In the src folder, open the App.js and delete the react boiler plate. inside the return statement.
return (
<div>
//blank
</div>
);
Now that we have a blank canvas to work with,
Let's install a few packages.
npm i dotenv react-mailchimp-subscribe
dotenv is for environment wide variables, so that you don't push your mailchimp url to git hub.
This is so that we can use mailchimp's subscribe component to capture emails for us.
Next, if you are using vs code, right-click the src folder to make a .env file to keep our url private.
In the .env file, lets add the environment wide variable for our url.
These variables have to start with REACT_APP in screaming snake case in order to work.
REACT_APP_MAILCHIMP_URL='url goes here'
Now lets add mailchimp subscribe to the App.js
Used almost all from the docs.
import "react-mailchimp-subscribe" in the App.js at the top.
import MailchimpSubscribe from "react-mailchimp-subscribe"
Now add the mailchimp component.
Subscribe
<MailchimpSubscribe url={process.env.REACT_APP_MAILCHIMP_URL} />
We need our url, to do this, go to mailchimps site.
You will have to make an account and this can be a long process.
Once everything is set up and you have a mailchimp dashboard, we can finish the tutorial.
Now that you have a mailchimp dashboard, we should make our first email.
Click the create-button in the top right corner.
At the bottom click on the signup form.
click begin.
we have to find the action url in the copy and paste for the embedded form.
press cmd + f or on windows crl + f and type action into the field.
In the mess of HTML elements is the action url on the form, copy everything inside the quotations.
Go back to the .env file and paste the action url in the quotations for the variable.
REACT_APP_MAILCHIMP_URL='https://https://codeharp.us19.list-manage.com/subscribe/post?u=ca'sdo;dea'sdfha;lkajsd;lfkajs;dlfkja;slkfja;lj;'
Now when you enter an email into your input field in your react app. It will add that email to your email list.
Be sure to restart your server and put the .env file in the root of your directory and not the src folder.
I hope you found this helpful.
This was really hard to slowly poke around and figure out but now that it is in this tutorial, It should save you a lot of time!
Please Like and follow if you found this helpful.
Comment if you have questions or feed back.
May you have Happy dev days ahead!!
Top comments (12)
hello I wanted to ask that since this is the mailchimp component
Subscribe
,
Do I directly put this in app.js? And if I do then I red squiggly lines under the code, so what is " Subscribe" exactly like just a piece of text, a message? i tried putting a semicolon after it and it resolves the squiggly lines issue but its still an error
Sorry for the late response,
Where I wrote subscribe is intended to be seen as text to the user saying indicating what the box is for.
Best practice is to put this in an HTML tag.
This was an oversight on my part because it didn’t cause my machine to crash.
Tallan, thanks for the tutorial. I created a separated component, but I still have a problem: the component does not find the URL on the .env file, it says it's undefined. Does .env must have only REACT_APP_MAILCHIMP_URL='Mailchimp_URL' and nothing else?
So you can have more than one environment variable. A good way to trouble shoot this would be to see if you could console log the process.env. REACT_APP_MAILCHIMP_URL If you think other things in your .env could be causing problems, my suggestion would be to take out everything that wasn’t an env variable in the file. No commas or semi colons etc.
I hope this helps
You need to put the .env file in the root folder, not in src and restart your server. Also the dotenv package is not needed anymore, it should work out of the box.
The .env file can contain multiple variables
How do I style the form?
I hope I’m not to late to answer your question.
This is an nmp package that gives you a little more control over the form But does the same subscription functionality.
npmjs.com/package/react-mailchimp-...
React-mail-chimp-form is more declarative meaning you have to write more code but you can style it and get more Info from your users.
I didn’t use it in my tutorial Because I try and show examples that are as simple as possible but you could replace what you did in this tutorial with the new npm package very easily by following what is in the link at the top.
I believe reactmailchimpsubscribe has a render prop where you can pass a function that returns a jsx Element. The function accepts 3 arguments, I can't remember all of them but it's in the doc.
From what I read, you don't need dotenv anymore with create-react-app. It is supported out of the box
Create your .env file in the root folder, not in src.
And be sure to restart your server.
Source: stackoverflow.com/questions/491081...
I also noticed that react-mailchimp-subscribe 2.1.1 was not yet supporting React 17, and I had to install it with npm i react-mailchimp-subscribe --force
Hello, Where can I find the source code of your tutorial. I have set up the mailchimp but I want to take a look at the whole thing. Because when I hit the subscribe button it just reloads the whole page. I do not know where I am wrong as it does not give any errors...
Please let me know thank you
I'm getting a CORS error is i try this in a next.js react app. does react-mailchimp-subscribe actually work in next.js?
I'd like to figure out how I can send email newletters like how smore.com/ does it.