How To Add An Email Subscription Popup Widget in Blogger?

Hello Everyone! Welcome Back to TechiFeed. I have written a new informative post for you to read. So, Keep reading to find out more!

Email marketing is an effective way to connect with your audience and promote products/services. Use tools like Mailchimp or Convertkit and an email signup form/popup on your website. 

The popup is more effective as it draws attention and makes it easy for visitors to join your email list.

Add email addresses to your marketing tool and send customized emails to subscribers. For affiliate marketing, consider using email autoresponders. 

Here's how to add an email subscription popup to a Blogger website and integrate it with Mailchimp.

Steps to Add Email Subscription Popup Widget in Blogger

To add an email subscription popup widget in Blogger:

1. Go to the Blogger dashboard
2. Click on the theme section
3. Click on the Edit HTML section
4. Find the </body> tag
5. Paste the given code above it, replace Mailchimp form action link

<style>
.email-subscription-overlay {display: flex;align-items: center;justify-content: center;position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0);z-index: -100;transition: all 400ms;}
.email-subscription-overlay.active {background: rgba(0, 0, 0, 0.9);z-index: 200;}
.email-subscription-container {background: #fff;padding: 32px;text-align: center;display: flex;box-shadow: 0 2px 12px 3px rgba(0, 0, 0, 0.3);border-radius: 8px;transform: translateY(-200px);opacity: 0;transition: all 200ms;}
.email-subscription-overlay.active .email-subscription-container {transform: translateY(0);opacity: 1;}
.email-subscription-container form {display: flex;flex-direction: column;margin-top: 32px;}
.email-subscription-overlay .email-close-btn {top: 24px;right: 24px;position: fixed;font-size: 50px;font-weight: 600;color:#eee;background: none;border: none;cursor: pointer;pointer-events: none;transition: all 400ms;opacity: 0;}
.email-subscription-overlay.active .email-close-btn {opacity: 1;pointer-events: auto;}
.email-subscription-container img {width: 300px;object-fit: contain;}
.email-subscription-container h2 {font-size: 35px;text-transform: uppercase;margin-bottom: 15px;margin-top: 12px;color: #0a0908;}
.email-subscription-container p {margin-top: 10px;font-weight: bold;color: #1d3557;font-size:16px;}
.email-subscription-container .text-content {padding: 48px;}
.email-subscription-container form .email-input-field {margin-bottom: 16px;padding: 12px 24px;font-size: 16px;border: 1px solid #777;}
.email-subscription-container form .email-submit-btn {background: #f50057;border: none;font-weight: 600;font-size: 20px;color: #fff;padding: 10px 60px; cursor: pointer;text-transform: uppercase;transition: all 400ms;}
.email-subscription-container form .email-submit-btn:hover {background: #069b7a;}
@media (max-width: 800px) {.email-subscription-container {flex-direction: column;width: 400px;align-items: center;}.email-subscription-container .text-content {padding: 0;width: 100%;}}
@media (max-width: 500px) {.email-subscription-container {width: 75%;}}

#mc_embed_signup div.mce_inline_error {margin: 0 0 1em 0;z-index: 1;color: #000;}
#mc_embed_signup div.mce_inline_error {padding: 5px 10px;font-weight: bold;background-color: white;}
.response {font-weight: 600;color: black;margin: -5px 0 5px 0;}
  </style>

<!-- Email Subscription Popup-->
<div class='email-subscription-overlay'>
<button class='email-close-btn'>&#215;</button>
<div class='email-subscription-container'>
<img alt='email-signup-form-Image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TPAOsLb2-sDqk1TUCfkg_Qj2vnK9KnDPPEd94_TKlHtTw6iVhMMwIG7NjdQYseYXG4cCsdNKhkM7zEEe9qwrORpFvQ54cgqDViw7SSXEVFraofdZItMXStgo_2z_LJCXEebwopU0Pf7FWPAlaBkuxjibbvn8zmTLZZ9X81LYFsqUZU4eIjSs6MHJFw/s1600/undraw_Opened_re_i38e%20%281%29.png'/>

<div class='text-content'>
<h2>Subscribe</h2>
<p>Techyleaf for Latest SEO Updates</p>

<div class='container'>
<div id='mc_embed_signup'>
<form action='#' class='validate' id='mc-embedded-subscribe-form' method='post' name='mc-embedded-subscribe-form' target='_blank'>
<div id='mc_embed_signup_scroll'><div class='mc-field-group'><input class='email-input-field required email' id='mce-EMAIL' name='EMAIL' placeholder='Your Email Address' type='email' value=''/></div>
<div class='clear' id='mce-responses'><div class='response' id='mce-error-response' style='display:none'/><div class='response' id='mce-success-response' style='display:none'/>
</div><!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div aria-hidden='true' style='position: absolute; left: -5000px;'><input name='b_ac52e8b1ce2a06907e0091d7c_63bf572981' tabindex='-1' type='text' value=''/></div>
<div class='clear'><input class='email-submit-btn subscribe' id='mc-embedded-subscribe' name='subscribe' type='submit' value='Subscribe'/></div>
</div></form></div>
<script src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js' type='text/javascript'/><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=&#39;EMAIL&#39;;ftypes[0]=&#39;email&#39;;fnames[1]=&#39;NAME&#39;;ftypes[1]=&#39;text&#39;;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
</div></div></div></div>

  <script>
    const emailSubscriptionOverlay = document.querySelector(&quot;.email-subscription-overlay&quot;);
const emailCloseButton = document.querySelector(&quot;.email-close-btn&quot;);

setTimeout(() =&gt; {
    if (!localStorage.getItem(&#39;popupClosed&#39;)) {
        emailSubscriptionOverlay.classList.add(&quot;active&quot;);
        localStorage.setItem(&#39;popupClosed&#39;, &#39;true&#39;);
    }
}, 3000);

emailCloseButton.addEventListener(&quot;click&quot;, () =&gt; {
    emailSubscriptionOverlay.classList.remove(&quot;active&quot;);
});
  </script>

Integrating Mailchimp with Popup Form

Change the form action link in your code to your Mailchimp signup form URL. To obtain the URL, sign up for a free MailChimp account and create a signup form. Then, copy the form action link from the generated code.

Next, access the source code of your website and find the section where the popup form is located. 

Replace the current form action value (e.g., <form action="#" class='validate'>) with the Mailchimp form action link you just obtained. 

Save your changes and test the form to ensure it's properly integrated with your Mailchimp account.

Popup Signup Form Customization

To adjust the popup width for mobile devices, adjust the CSS code for the email-subscription-container class:

@media (max-width: 500px) {.email-subscription-container {width: 75%;}}

Customize the header text and paragraphs by changing the h2 and paragraph tags in the code.

To change the popup duration, refer to the video tutorial. By default, it is set to 3 seconds.

To change the image, find the "email-signup-form-Image" in the code and replace the source URL (src) with the URL of the desired image. Upload the image to your website and get its URL by right-clicking it.

Frequently Asked Questions

What is an email subscription popup widget in Blogger?

An email subscription popup widget is a feature in Blogger that displays a popup window asking visitors to subscribe to your blog's email updates.

Why should I add an email subscription popup widget to my Blogger blog?

Adding an email subscription popup widget can increase the number of subscribers to your blog, allowing you to reach a wider audience and keep them informed of your latest content.

What are the different email subscription popup widgets available for Blogger?

Blogger provides various email subscription popup widgets, including the built-in Popup Subscription Widget, Feedburner Subscription Widget, and third-party widgets from providers such as SumoMe and Hello Bar.

Can I customize the appearance of the email subscription popup widget in Blogger?

Yes, you can customize the appearance of the email subscription popup widget in Blogger by adjusting its colors, font, and size.

How can I test my email subscription popup widget in Blogger?

To test your email subscription popup widget in Blogger, visit your blog and see if the popup window appears as expected. Before publishing, you can preview your changes in your Blogger account's "Layout" section.

Stay Connected

I hope you liked the above informative content. Please share this post and follow our blog for more great content.

If you have any questions or problems, feel free to ask in the comments section.

© Copyright: TechiFeed

Go to Link