Adding A Mailchimp SignUp Form To Your React App
Using the react-mailchimp-form package to capture and connect with your users.
Hoping to send newsletters to connect with your audience? Maybe your application has user signup functionality and you have a great database of emails. In this case there are ways to take advantage of that database and use this column to create your contact list directly. Maybe your application does’t require user signup and you’re not capturing those that come to your site. In either case, It’s beneficial to have a quick, easy way to form a contact list and stay connected to potential or existing customers. Let’s let Mailchimp do our heavy lifting.
Whether you want to send out an email newsletter with updates, a link to your most recent blog post, special offers, information or even advice, with Mailchimp’s free account, you have the option to send up to 10,000 emails a month to 2,000 subscribers. Let’s walk through the process of setting up a signup form on your application so you can capture all these valuable visitors and turn them into your network (or even customers!).
Step 1: Go to Mailchimp’s site and sign up for a free account here. Lets now install react-mailchimp-form, you can visit the npm package/doc page here. The github repo can be found here. Assuming that you have your create-react-app already set up and running smoothly, in your terminal you’ll type in the command: npm i react-mailchimp-form . (sidenote: i wasn’t able to find a yarn command to install this package)
Step 2: In your Mailchimp navigate to your dashboard, and to your ‘Audience’ tab. You’ll need to make sure that you have your contact list initiated. It will be called ‘Self’ and should automatically show up. You can choose ‘Settings’ from the ‘Manage Audience’ dropdown to change this name:
Step 3: The package documentation mentions the next step to be ‘Personalize the fields on your list on “Settings > List Fields”. You will find this step in your Audience tab also as such:
You will go into this setting and set up your fields, keeping in mind which fields are ‘Visible’ and the tags you’ll need for setting up your forms in React.
Step 4: “Copy the HTML and extract the action from “Signup Forms > Embedded forms”. This ‘Signup Form’ can be navigated to from the Audience Tab, as well. While in ‘Embedded forms’ you’ll see the section in the right column ‘Copy/paste onto your site’. This page offers a great example of the form created by the HTML given. After copy and pasting this HTML (mailchimp only allows copying the whole code block), you will only need the ‘u=’ and the ‘id=’ of the ‘form action’ code:
Step 5: Next, we’ll need to set up React Component for our Mailchimp Form. First step is to ‘import Mailchimp from “react-mailchimp-form”’ at the top of your React component. To configure the Mailchimp component that we have imported, amongst the other parameters, you’ll need to define your ‘action’ parameter: action=’https://<YOUR-USER>.us16.list-manage.com/subscribe/post?u=XXXXXXXXXXXXX&id=XXXXXX’ — Again, the u=/id= comes directly from your mailchimp HTML action. The picture below will show a side-by-side image of the example form from the docs with how I coded my own form to directly relate to my specific project:
You’ll want to style and then test your form, making sure that all of your signups are hitting your Audience Contact List directly in mailchimp. Before pushing this code to any github repo, MAKE SURE TO MOVE YOUR ‘action=’ value to a .env file to hide your personal, secret mailchimp key. A quick view of an example of this, although most of us know that React .env files are not the most secure, it’s a better option than having your keys directly out in the open:
Good luck setting up your forms! May they bring your client an abundance of new contacts and customers!
