React Mailchimp Form Vs React Mailchimp Subscribe Vs Rimp, How To Build A Mailchimp Form With React

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 gmailaccount.coelopers. 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.

Watching: React

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

basic knowledge of react and javascript.

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
Enter fullscreen mode Exit fullscreen mode
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> );
Enter fullscreen mode Exit fullscreen mode
Now that we have a blank canvas to work with,

Let”s install a few packages.

npm i dotenv react-mailchimp-subscribe
Enter fullscreen mode Exit fullscreen mode
dotenv is for environment wide variables, so that you don”t push your mailchimp url to git hub.

react-mailchimp-subscribe

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”
Enter fullscreen mode Exit fullscreen mode
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”
Enter fullscreen mode Exit fullscreen mode
Now add the mailchimp component.

SubscribeMailchimpSubscribe url={process.env.REACT_APP_MAILCHIMP_URL} />
Enter fullscreen mode Exit fullscreen mode
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.

See more: 150+ Free Gmail Accounts And Latest Passwords 2021, Gmail: Setting Up A Gmail Account

See Also:  How to add sms to google's gmail

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;”
Enter fullscreen mode Exit fullscreen mode
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.

finished website

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 gmailaccount.co days ahead!!

Discussion (12)

Subscribe

*

Upload image
Templates Editor guide
Personal Moderator

Create template Templates let you quickly answer FAQs or store snippets for re-use.

Submit Preview Dismiss
Collapse

Expand

*

Jahnavi Jainwal • Jun 7 '20
Dropdown menu
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

Favorite heart outline button

Favorite heart outline button 3 likes Comment button Reply
Collapse Expand

Tallan Groberg Author • Jun 13 '20
Dropdown menu
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.

Favorite heart outline button

Favorite heart outline button 6 likes Comment button Reply
Collapse Expand

*

Cassiano Gobbet • Oct 13 '20
Dropdown menu
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?

See Also:  How do i edit the subject in gmail when forwarding or replying?

Favorite heart outline button

Favorite heart outline button 1 like Comment button Reply
Collapse Expand

Tallan Groberg Author • Oct 13 '20
Dropdown menu
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

Favorite heart outline button

Favorite heart outline button 2 likes Comment button Reply
Collapse Expand
Raphaël Pinel • Mar 4
Dropdown menu
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

Favorite heart outline button

Favorite heart outline button 1 like Comment button Reply
Collapse Expand
Raphaël Pinel • Mar 4
Dropdown menu
From what I read, you don”t need dotenv anymore with create-react-app. It is supported out of the boxCreate 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

Favorite heart outline button

Favorite heart outline button 1 like Comment button Reply
Collapse Expand
Tobi Omotayo • May 21 '20 • Edited on May 21
Dropdown menu
How do I style the form?

Favorite heart outline button

Favorite heart outline button 2 likes Comment button Reply
Collapse Expand
Tallan Groberg Author • Jun 13 '20
Dropdown menu
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.

Favorite heart outline button

Favorite heart outline button 4 likes Comment button Reply
Collapse Expand
Inioluwa Sogelola • Aug 14 '20
Dropdown menu
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.

See Also:  How to find archived emails in gmail: 3 methods

Favorite heart outline button

Favorite heart outline button 1 like Comment button Reply
Collapse Expand
Tanisha Dalwadi • May 10 • Edited on May 10
Dropdown menu
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

Favorite heart outline button

Favorite heart outline button Like Comment button Reply
Collapse Expand
cordial • Apr 23
Dropdown menu
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?

Favorite heart outline button

Favorite heart outline button 1 like Comment button Reply
Collapse Expand
Saia Fonua • Dec 9 '20
Dropdown menu
I”d like to figure out how I can send email newletters like how smore.com/ does it.

Favorite heart outline button

Favorite heart outline button 1 like Comment button Reply
Code of Conduct • Report abuse

Read next

KotlinJS and MULTIPLE State Hooks (Part two)

skalable-gmailaccount.co – Mar 29

React Pre-rendering and Potential Hydration Issue

Jannik Wempe – May 2

React: Marquee using Framer Motion

Rahul – May 2

React internationalization with react-intl

Zoran Luledzija – Apr 21

*

ITNEXT

ITNEXT is founded by LINKIT. We also have a publication on Medium.com, monthly meetups in the Netherlands and an annual summit.

ITNEXT on Medium.com

More from ITNEXT

How YOU can use Gatsby, React and GraphQL to author blazingly fast static apps
#gatsby #react #tutorial #javascript
Scroll effects with react and styled-components
#react #styledComponents
How to make amazing transitions with React Tiger Transition.
#transitions #react #tutorial
Home Listings Podcasts Videos Tags Code of Conduct FAQ gmailaccount.co Shop Sponsors About Privacy Policy Terms of use Contact Sign In/Up
Twitter

Facebook Github Instagram Twitch
gmailaccount.co Community – A constructive and inclusive social network for software gmailaccount.coelopers. With you every step of your journey.

Built on Forem — the open source software that powers gmailaccount.co and other inclusive communities.

See more: Tinder Steps Up Its Matchmaking With New Snapchat Style Feature

Made with love and Ruby on Rails. gmailaccount.co Community © 2016 – 2021.

Forem logo

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create new account

We strive for transparency and don”t collect excess data.

Leave a Reply

Your email address will not be published.