Optimize your Mailchimp pop-up for Tumblr.

Newsletters are important for your business, and Mailchimp made it easy for anyone who wishes to build up the newsletter. The plugin is very easy to implement. However, on Tumblr, it needs some plugin optimizations to pull the best performance and interface design.


/** Note that the form generated from the subscribe builder doesn't work as the script is not compatible on Tumblr, or it's blocked from their side.


1. Login first into the mail chimp


2. Click Lists > Stats > Singup Forms

3. Copy the form action value. 

My from action value is //themecloset.us8.list-manage.com/subscribe/post u=5a192f3ff13e6b0051b08c8a6&id=da91d61355


4. Go to your edit theme page.


5. Click 'Edit HTML'


6. Find <body> (Ctrl+F or Command +F on Mac)

7. Paste this optimize code after <body>

<script src="http://static.tumblr.com/pnazptg/i1woazdue/option-modal.js"></script>

<script src="http://static.tumblr.com/pnazptg/lueoazd70/embed_cc.js">
<link href='http://static.tumblr.com/pnazptg/J75oazdp2/new_modal.css' rel='stylesheet' type='text/css'>

<!-- Begin MailChimp Signup Form -->
<div class="mc_embed_overlay"></div>
<div id="mc_embed_signup">
<div class="close-embed-modal">X</div>
<div class="mc_embed_image_container" style="background-image:url('{image:Mailchimp Side Image}');"></div>
<div class="mc_content">
<form action="{text:Mailchimp Form Action Address}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>{text:Mailchimp Header Title}</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
<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_5a192f3ff13e6b0051b08c8a6_6921f4c8dd" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" style="background-color:{color:Mailchimp Button Color};"></div>

<!--End mc_embed_signup-->
<!--End mc_embed_signup--> {/block:ifMailchimpFormActionAddress}

<meta name="image:Mailchimp Side Image" content="https://images.unsplash.com/photo-1428931996691-a5108d4cdbf5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=14cfa2dc55055feff45e341b0c9dc9e6" />
<meta name="text:Mailchimp Subscription Second" content="4000" />
<meta name="text:Mailchimp Form Action Address" content="" />
<meta name="text:Mailchimp Header Title" content="Subscribe to my new letter" />
<meta name="if:Disable Mailchimp on Customize Page" content="" />
<meta name="color:Mailchimp Button Color" content="#f5c74a" />
<input type="hidden" value="{text:Mailchimp Subscription Second}" id="mailchimp_seconds">




/** Don't forget to update and save. Click the 'Go back' icon on the left side.


8. Paste your action value into this text input:


Option lists:

Mailchimp Subscription Second. Set the time for the pop-up to fade in on the screen. 1000 value is 1 second.

Mailchimp Form Action Adress. Basic set up link for the pop-up to work properly.

Mailchimp Header Title. Message for your visitor. 'Subscribe for my newletter' is a default value.

Disable Mailchimp on customize page: Disables the pop-up on the customize page only. (Available in the switch option lists)

MailChimp Button color : Changes the 'Subscribe' button color. ( Available in the color options)

Mailchimp Side image: Change the image on the left side of the popup. (Available in the image upload options)




Don't forget to update and save!


Have more questions? Submit a request