Stylish customizable popup email newsletter subscription box

Having an email newsletter subscription box enabled on your website is the most beneficial way to engage visitor repeatedly when a new article published. By default, bloggers have the alternative to letting email newsletter subscription box through Google serviced Feedburner service. Nevertheless, the default email subscription box do the job flawlessly despite having a very simple yet formidable look. Conveniently we have a choice to convert this artless look into a very elegant styling email subscription box. Here, I have shared one popup email subscription box which is beautiful looking and customizable.

            The key feature of this email subscription box is it is fully optimized to achieve Google page speed score. The inline CSS and HTML subscription form code for this email subscription box will load the email subscription box at a lighting fast speed. I have coded this email subscription box green colored albeit you have the preference to change according to your test and website matching. I have added the popular social network link at the bottom of the email subscription box to show your social network presence.

Here how to install this email subscription box:

            I must say you to take a backup of your current template before making any change so there you have a choice to revert your last saved template. Take a backup of the template is very easy. Go to blogger dashboard then template then clicks on Edit HTML and select the whole HTML template code. Copy the selected HTML code and save to a new notepad. If you need to revert to your previous template, then copy the HTML code from the notepad and replace and save your template HTML code. Okay, now find this one ]]></b:skin> in your template and paste the CSS code just before on it.

See Also: Make money with custom search engine

CSS Code for the popup email subscription box:

/***** Stylish PopUp Email Subscription Form CSS *****/
#popup-wrap .popup-button { background: #A5E114 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHgz2Uw5U_u9bN_GOA66Uz-vwEIReEN7_0P7IvtvyoBviACDDrgHzgNj_nDdvktIFw3fQwxNG8eZqsoomFFqJELr7ZaGIVJNycSzItxl8Gpt7YxZWoSyWMCqSj62iraaCnh6QYnGtw_kLP/s1600/envelop.png") no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 60px; left: 25px; position: fixed; width: 60px; z-index: 99999; }
#popup-wrap .popup-button:hover { background-color: #1DA1F2; }
#popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, .8); transition: opacity .25s ease; z-index: 999999; }
#popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
#popup-wrap .popup-trigger { display: none; }
#popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; }
#popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; }
#popup-wrap .popup-form { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; max-width: 500px; margin: auto; overflow: auto; padding: 2.5em; max-height: 460px; background: #19D133; text-align: center; }
#popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: "Century Gothic", sans-serif; font-weight: bold; line-height: normal; }
#popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; }
#popup-wrap .popup-content { font-size: 16px; line-height: 26px; }
#popup-wrap .popup-footer { font-size: 75%; font-style: italic; }
#popup-wrap #mailbox,
#popup-wrap #subbutton { background: #88FA98; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: "Century Gothic",sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; }
#popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; }
#popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; }
#popup-wrap #subbutton:hover { background: #68E57A; }
#popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
#popup-wrap .popup-form-close:after,
#popup-wrap .popup-form-close:before { content: ''; position: absolute; width: 5px; height: 1.5em; background: #0D81C8; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }
#popup-wrap .popup-form-close:hover:after,
#popup-wrap .popup-form-close:hover:before { background: #19D133; }
#popup-wrap .popup-form-close:before { transform: rotate(-45deg); }

            The green colored text in the CSS code is the color code of the email subscription box. Change this according to your test and website matching. However all our effort to make more reader for our site or blog. Keep in mind the user preference first then change the subscription box color.

            Next, find the closing body tag </body> in your template HTML code and paste the bellow subscription form code just above on the closing </body> tag.

HTML code for the popup email subscription box:

<div id='popup-wrap'>
  <!-- Subscribe Trigger -->
       <label class='popup-button' for='popup-trigger'/>
  <!-- Subscribe Content -->
  <input class='popup-trigger' id='popup-trigger' type='checkbox'/>
  <div class='popup-bg'>
            <label class='popup-bg-close' for='popup-trigger' id='popup-close'/>
            <div class='popup-form'>
                <label class='popup-form-close' for='popup-trigger' id='popup-close'/>
                <div class='popup-inner'>
                    <!-- Opt-In Subscribe -->
                    <span class='popup-title'>Subscribe Via Email</span>
                    <span class='popup-content'>Subscribe to our newsletter to get the latest updates to your inbox.</span>
                    <br/><br/>
                    <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=digitaldoubt&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                        <input name='uri' type='hidden' value='digitaldoubt'/>
                        <input name='loc' type='hidden' value='en_US'/>
                        <input id='mailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Example@yourmail.com&quot;;}' onfocus='if (this.value == &quot;Example@yourmail.com&quot;) {this.value = &quot;&quot;}' required='' type='text' value='Example@yourmail.com'/>
                        <input id='subbutton' title='' type='submit' value='Subscribe'/>
                    </form>
                    <br/>
                  <span class='popup-footer'>Your email address is completely safe with us!</span><br/>
<span class='popup-footer'>We will send a mail to confirm you are real.</span><br/>
                  <span class='popup-footer'>Remember to confirm your action after subscribe</span><br/><br/>
<span class='popup-footer'><a href='https://www.facebook.com/Digitaldoubt' target='_blank' title='Like Our Facebook'><i class='fa fa-facebook fa-fw'/> Like</a></span> |
<span class='popup-footer'><a href='https://twitter.com/Digitaldoubt' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> Follow</a></span> |
<span class='popup-footer'><a href='https://plus.google.com/114334617555483459936' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'/> Circle</a></span>
                </div>
            </div><!-- .popup-form -->
  </div><!-- .popup-bg -->
    </div><!-- #popup-wrap -->

            Change all green highlighted values with your ID. Those highlighted values represent the value of following by email FeedBurner ID, Facebook fan page username, Twitter ID, and Google Plus profile ID.

Need Help: How to fix Feedburner email subscription error.

            That's all you have now the stylish popup on click email newsletter subscription box on your blog or website. Try it, if you find there any difficulties to configure the email subscription box then please let me know. Leave your feedback in the comment box. If you love this article subscribe us to help to post the future article or support us by sharing this with your friends on the social network.