How to Make Email Subscribe Box in AMP Blogger Template

How to Make a SubscribeBox Email on Google AMP Page

One of the keys to a website's success is loyal visitors. Why? Because with more and more visitors returning to our website, the conversation rate is getting better. Then how do you get customers back to visit our website, and read every new article?

One effective way is to create a subscribe box. This subscription box is useful for getting visitors' databases, especially email databases. So when there is a new article that you create, the email notification will enter the user's email.

This time, I will explain the tutorial on How to create a Google Feedburner subscribe box that you can apply to your website's AMP page. By utilizing the amp-form component.

Crete FeedBurner Account

First, please create a Google Feedburner account here. Log in with your google account, and create a new feed by entering your Blogger feed URL. Examples of Blogger feed urls are as below:
http://www.amp-blogger.com/feeds/posts/default

Then click next, and fill in your FeedBurner name in the available column. Then please activate the email subscriber  in the publicize panel. See the picture for more detailed explanation.


Name of your Google FeedBurner account that we will use when integrating with the subscriber column. Keep it safe.

Make Subscriber Box with amp-form

Put the javascript component amp-form before the code </ head> on your blog. Ignore if you have previously placed amp-form.js.  Copy this following code:

<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'></script>

Customize your subscribtion box with CSS, copy and paste this code below <style amp-custom='amp-custom'> :

/* Subscribe Box */

#subscribeBOX{overflow:hidden;margin:20px 0;width:100%}

#subscribeBOX p{margin:1em 0}

#subscribeBOX .emailCol{margin:auto;text-align:center}

#subscribeBOX .emailCol form{margin:0;padding:0;border:0}

#subscribeBOX .emailCol input{background:rgba(255,255,255,1);padding:9px 12px;color:#999;font-size:14px;margin-bottom:0;border:1px solid rgba(0,0,0,0.14);transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;width:73%}

#subscribeBOX .emailCol input:hover{border-color:rgba(0,0,0,.34)}

#subscribeBOX .emailCol input:focus{color:#000;outline:none;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}

#subscribeBOX .emailCol .Submitter{background:#e74c3c;color:#fff;margin:0 0 0 4px;font-size:14px;cursor:pointer;border:0 solid rgba(0,0,0,0.05);border-radius:3px;transition:all .3s;width:25%}

#subscribeBOX .emailCol .Submitter:active,#subscribeBOX .emailCol .Submitter:hover{background:#c0392b;color:#fff}

The next step, you just install the Subscribe Box. Copy and paste the following code according to the place you want.

<div id='subscribeBOX'>

<div class='emailCol'>

<form action='https://feedburner.google.com/fb/a/mailverify?' method='get' novalidate='' target='_blank'>

<input name='email' placeholder='Your Email' required='required' type='email'/>

<input name='uri' type='hidden' value='GoogleAmpForBlogger'/>

<input class='Submitter' type='submit' value='Subscribe'/>

</form>

</div>
</div>

Warning! Change the yellow mark with your Google Feedburner account name, as you have previously made.

SAVE your template changes, and try to see the results. Please see the demo results in my Codepen.

DEMO

For higher subscribe values, make sure you place the Subscriber Box in the visible place. For example in the widget or at the end of the article.

Good luck, and hopefully useful :)