How to add an email signup form to a Nuxt site with MailChimp
Last Updated on October 11, 2020
This is a guide for setting up a MailChimp-powered newsletter signup form on a static Nuxt site hosted on GitHub Pages. I wanted to implement this on my personal blog to grow a mailing list so I can update readers when I puslish a new blog article. I haven't done too much work with MailChimp before, but I've definitely subscribed to plenty of MailChimp mailing lists.
I'm hoping to acheive some of the following:
- Build a list of emails from people who visit my site and want get
- Include a simple newletter signup form (Vue) component in the Footer of my site
- Send customized emails (campaigns) to a mailing list that I can track
Here are some of the questions (and answers) that I had going into this:
- Do I need to use the MailChimp API or MailChimp API keys? (No)
- Is Double Opt-In possible with a static GitHub pages site hosted on a
- What is the signup flow? Will a new subscriber be sent to a MailChimp page first, and then back to my site? (Yes)
- How do I setup a "Thank you" page to show users after they subscribe?
- How much will this cost? (Free up to 2,000 subscribers)
- Should I create a new campaign for each new blog post email update I send out? (Yes)
I'll touch on these questions as I describe how to set things up.
Creating the form
Audience > Signup forms menu, I selected the
Embedded Forms option:
Embedded forms Generate HTML code to embed in your site or blog to collect signups.
Most of the MailChimp Admin that I have been using seems to have 4 different menus: 2 vertical menus and 2 horizontal.
Embedded forms menu, I selected
Unstyled since I want to add my own Tailwind CSS classes to keep the style of my signup form consistent with the different color schemes available on my site.
I'll start with an Unstyled Embedded form. Let's go through the
- Include form title (no, I'll add this myself)
- Show only required fields (For now,
- Unselect everything else
Here's the HTML that we can use in our
<!-- Begin Mailchimp Signup Form --> <div id="mc_embed_signup"> <form action="https://github.us2.list-manage.com/subscribe/post?u=43a795784ca963e25903a0da6&amp;id=9937fe4fc5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate > <div id="mc_embed_signup_scroll"> <div class="mc-field-group"> <!-- <label for="mce-EMAIL">Email Address </label> --> <!-- Added placeholder --> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter your email address" /> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display: none" ></div> <div class="response" id="mce-success-response" style="display: none" ></div> </div> <!-- 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_43a795784ca963e25903a0da6_9937fe4fc5" tabindex="-1" value="" /> </div> <div class="clear"> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" /> </div> </div> </form> </div> <!--End mc_embed_signup-->
Now we can create a Vue component that contains the HTML form generated by the MailChimp admin. For now, just put the embed HTML in the template of a Vue component.
Styling the form
Next you can add styles to the form. You can reference the
Subscribe.vue file in the repo for this site to see how I have added styles using TailwindCSS.
Next let's look at some settings around Double Opt-in.
To navigate to the page where these settings can be set, go to:
Audience > Signup forms > Settings > Audience name and defaults
Form Settings of this menu, you can select
Enable double opt-in
Next, let's configure the redirect to a custom "Thank you for subscribing page" on our static site. Go to
Audience > Signup forms > Signup forms and select
Select Signup thank you page from the dropdown menu and add a custom URL that you will show users when they first submit their email to the form.
Next, also on the
Form Builder menu, select Confirmation thank you page from the dropdown menu and enter the URL of the page that you want to redirect to after a user confirms their subscription where it says:
Instead of showing this thank you page, send subscribers to another URL
- Form validation: we can validate that the user has entered a valid email address
- GDPR considerations
- Single vs Double Opt-in: https://www.sendinblue.com/blog/double-opt-in/