How to Create Subscribe Form Using FeedBurner

Want to create subscribe form on WordPress or on Blogger Blogspot. Here’s how to do it your own using Google FeedBurner subscribe form widget without using any plugins.

FeedBurner is maybe the oldest ‘feed burner’ and ya, it’s still relevant to use it nowadays for you to make your visitor become a loyal reader. By asking them to subscribe to your Newsletters.

Wait!

Please take your time and don’t get a hurry and just copy and paste the code into your blog. Because you will copy the code of my subscribe form. That will be a mess, you know 🙂

So please read carefully while learning how to modify it step by step. And know how to do it by your self.

Ok! Let’s go!

How to Modify the default Google FeedBurner and make it looks good

If you already activate your blog feed on Google feed burner then great. Haven’t activated yet?

Then go to FeedBurner.Google.com and burn your blog feed there. Psst… it’s also good for your blog SEO performance.

Anyway, you can see the result of how Google FeedBurner subscribe form looks like below this post.

When your blog feed has been registered on FeedBurner. Go to your FeedBurner account and then go to tab > Publicize > Email subscription > Subscription management.

And copy your subscribe form code from there. See the screenshot below for an example.

Now go back to your blog and paste the code in your widget. Yep! it looks to flat. So that’s why you’ll need to tweak it a little bit to make it looks good.

Change the background color etc

First, we will change the background color. To do it find this line in the top of default FeedBurner form style.

<form style="border:1px solid #ccc;padding:3px;text-align:center;"

You can add a background color that matches with your blog theme. Remove the border or make the ‘text’ align to left rather than to the center.

Below is the code lines example after I change the CSS style;

<form style="text-align:left;color: #fff;background-color:#fff;padding:20px 10px;"

Change the background color with your own preferable color. For example, change from #fff to transparent to make the background color become transparent.

You got the idea right?

Ok, next! change the default text style and make the form width from 140px into 100% and responsive. So we will change this line;

<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>

Into this;

<h3 style="color:#fefefe;"><i class="icon ion-paper-airplane"></i> Newsletters</h3><p>Subscribe to receive Digimanx's latest post update directly from your inbox.</p><p><input type="text" style="width:100%;color:#aaa;" name="email" onfocus="this.value=''" value="Enter E-mail Here"/></p>

I also add a ‘text’ in the e-mail form. And make it automatically cleared when someone clicks on it by adding this code line onfocus=”this.value=””

Note! please change the <p></p> section into your own desired words. Something like: Subscribe and be the first to know of our latest posts update etc.

I also adding icons by ionic frameworks here. Make sure your theme supports Ion Icon.

You can also change it with DashIcon if you like. So change the <i></i> section with this; 

<span class="dashicons dashicons-email-alt"></span>

If you want to use Font Awesome change into this;

<i class="fa fa-paper-plane-o" aria-hidden="true"></i>

Change the Button’s text and width

Next, change the button text input and make it width to 100% and also responsive. Below is the default code line;

<input type="submit" value="Subscribe" />

Here you can change the button value from ‘Subscribe’ to something else. Like ‘Let’s go’ or whatever you like.

And ya! adding style to change the button background color and 100% width. The code will be something like this;

<input type="submit" value="Let's go!" style="width:100%;"/>

And last, change the default form footer text. Below is the default code lines;

<p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p>

You can either remove it, let it by default or change it. Below is the example of a modified code;

<p style="padding-top:14px;">We respect your <a style="color: #f4f4f4;" href="https://digimanx.com/privacy-policy/" target="_blank">Privacy.</a> You can unsubscribe at anytime.</p>

And that’s it! you can let the rest by its default. I also adding div in the modified FeedBurner forms.

So! overall the whole code will looks like this;

<div><form style="text-align:center;color: #333;background-color:#fff;padding:0;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Digimanx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><h3 style="color:#333;"><i class="icon ion-paper-airplane"></i> Newsletters</h3><p>Subscribe to receive Digimanx's latest post update directly from your inbox.</p><p><input type="text" style="width:100%;color:#777;text-align:center;" name="email" onfocus="this.value=''" value="Enter E-mail Here"/></p><input type="hidden" value="Digimanx" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Let's go!" style="width:100%;"/><p style="padding-top:14px;text-align:center;">We respect your <a style="color: #e85555;" href="https://digimanx.com/privacy-policy/" target="_blank">Privacy.</a> You can unsubscribe at anytime.</p></form></div>

Don’t forget to change the URL of privacy policy page with your own on this line: href=”https://digimanx.com/privacy-policy/”

Conclusion

Okay, that’s how you can create your blog subscribe form using Google FeedBurner.

It will still look catchy when you aim to make your hand a little bit dirty by modifying it. And yeah! it’s FREE! anyway.

You can place it on your blog sidebar on the footer or make it popup subscribe form by using Boxzilla. It will look good 🙂

Additional note

Please make sure you activate the Summary burner in your Google FeedBurner account. Below is how to do it;

To activate the Summary burner go to Feed Burner > Optimize > Summary Burner. And activate it.  This will make your feed summary only, and not whole content.