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.

Goals

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

Questions

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 <usernme>.github.io subdomain? (Yes)
• 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

Under the 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.

Under the 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 Form options:

• Include form title (no, I'll add this myself)
• Show only required fields (For now, email is the only field I will be capturing. It can be helpful to include a First and/or Last name to avoid having your emails go to users' spam folders.)
• Unselect everything else

Here's the HTML that we can use in our Subscribe.vue component:

    <!-- 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.

Settings

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

In the 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 Form builder

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

Next Steps

• Form validation: we can validate that the user has entered a valid email address
• GDPR considerations
• Captcha

Resources

• Single vs Double Opt-in: https://www.sendinblue.com/blog/double-opt-in/