Embed Components: Mailchimp Subscribe Form

This component improves the default Mailchimp embed form by keeping the layout and design consistent with the rest of the site. Current this component supports the Embedded form option, with a simple email input and submit button:

Demo

Newsletter

Want to stay up to date with new blog posts? Sign up to my newsletter below to receive emails when I share something new!

* indicates required

Email Address *

Usage

1. Log in to your Mailchimp account.
2. Go to the Audience tab > Signup forms > Create new form > Embedded form
3. Keep the default settings, continue, and copy the embed code.
4. Hold on to this code, you will need to grab three pieces of information from it:
   • Action URL
   • Hidden Field Name
   • Referral Link

See the details below for how to find these values.

---

Action URL:

The url will be in a format similar to the following:

• https://gmail.us10.list-manage.com/subscribe/post?u=SOME_ID
• https://github.us16.list-manage.com/subscribe/post?u=SOME_ID
• etc.

Look for the URL in this part of the embed code:

<div id="mc_embed_signup">
    <form action="https://SOME_URL">        # This is the action URL
    ...
    </form>
</div>

---

Hidden Field Name:

This will be a hidden input field in the form, which is used by Mailchimp to prevent spam. The format will be similar to the following:

• b_SOME_ID

Look for the name value in this part of the embed code:

<div style="position: absolute; left: -5000px;" aria-hidden="true">
    /* real people should not fill this in and expect good things - do not remove this or risk form bot signups */
    <input 
        type="text" 
        name="b_SOME_ID"                 # This is the hidden field name
        tabindex="-1" 
        value=""
    >
</div>

---

Referral Link:

This is the link that Mailchimp uses to credit your account for new signups (if you enabled this feature). The format will be similar to the following:

• http://eepurl.com/SOME_ID

Look for the link in this part of the embed code:

<div class="optionalParent">
    <div class="clear foot">
        <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Subscribe">
        <p style="margin: 0px auto;">
            <a href="http://eepurl.com/SOME_ID"  # This is the referral link
               title="Mailchimp - email marketing made easy and fun">
                ...
            </a>
        </p>
    </div>
</div>

Simple Usage:

<EmbedMailchimpSubscribe
  :actionUrl="'https://SOME_URL'"
  :hiddenFieldName="'b_SOME_ID'"
  :show-referral="false"
/>

Which will display the following

Subscribe

* indicates required

Email Address *

Note that this component will be nonfunctional since we used the placeholder values above.

Props

• title - The title of the form. (optional, default: "Subscribe")
• description - Text to display below the title. (optional, default: blank)
• actionUrl - The URL to submit the form to. (required)
• hiddenFieldName - The name of the hidden field in the form. (required)
• referralLink - The referral link for Mailchimp. (optional, but required if the following prop is true)
• showReferral - Whether to show the referral link. (optional, default: true)
• buttonText - The text to display on the submit button. (optional, default: "Subscribe")

Here is a silly example using all the props:

<EmbedMailchimpSubscribe
  title="Book Club Newsletter"
  description="Want to stay up to date with new book club meetings? Sign up to our newsletter below to receive emails when we share something new!"
  :actionUrl="'https://SOME_URL'"
  :hiddenFieldName="'b_SOME_ID'"
  :show-referral="true"
  :referralLink="'http://eepurl.com/SOME_ID'"
  :buttonText="'Join the Club'"
/>

Which will display the following

Book Club Newsletter

Want to stay up to date with new book club meetings? Sign up to our newsletter below to receive emails when we share something new!

* indicates required

Email Address *