How to Add FeedBurner Optin form to WordPress Blog

Share This Article:

How to Add FeedBurner Optin form to WordPress Blog. If you are looking to get more subscribers for your blog, then opt-in forms or sign-up forms will surely help you. An optin form is a subscription form that provides readers an instant access to fresh content on your blog.  Whenever a visitor subscribe to your blog feeds using an op-tin form, then he will receive email update every time you publish a new article.

add-feedburner-optin-form-wordpress

How to Add Feed Burner Optin form to WordPress

Generally, optin forms are created for popular mailing list services like Aweber, Mailchimp etc, which are premium services and need membership to access their features. Here we have created a simple optin forms for FeedBurner, a free feed management service from Google.

Also Read: How to Display Facebook, Twitter and RSS Counts in Plain Text

Add Feed Burner Optin form to WordPress Sidebar

add-sidebar-optin-form-wordpress

You need to edit these files in your theme folder:

style.css

Hence, it is recommended to backup your theme.

Here is the step-by-step guide on how to add optin form in WordPress Sidebar:

  • Login to WordPress dashboard and navigate to widgets section.
  • Drag and drop “Text Widget” to primary sidebar section.
  • Add below code to sidebar text widget and save it.
<div id="optin-sidebar">
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=wpsquare', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" name="uri" value="wpsquare"><input type="hidden" value="en_US" name="loc">
<input type="text" id="name" name="name" onfocus="this.value=''" value="Enter Your Name" placeholder="Enter Your Name">
<input type="text" id="email" name="email" onfocus="this.value=''" value="Enter Your Email Address" placeholder="Enter Your Email Address">
<input type="submit" value="Get Instant Access" id="submit" name="submit">
</form>
</div>

Replace “wpsquare” with your feed burner ID.

  • Go to Appearance Menu > Editor and edit Style.css file.
  • Add below code to it and click on “Update File” button.
  • You have added required CSS to your theme file.
  • Also, it is recommended to upload images to your own server.

Name – http://i.imgur.com/XrHTe.png

Email - http://i.imgur.com/2BCD0.png

#optin-sidebar {
background: #DDDDDD;
border-bottom: 1px dashed #CCCCCC;
padding: 15px 0;
text-align: center;
width: 300px;
}
#optin-sidebar h4 {
font-weight: bold;
margin: 10px 0 20px;
}
#optin-sidebar input[type="text"] {
border: 1px solid #AAAAAA;
font-size: 13px;
margin: 0 0 15px 0;
padding: 10px;
width: 80%;
color:#888;
}
#optin-sidebar input {
box-shadow: 0 2px 2px #AAAAAA;
-moz-box-shadow: 0 2px 2px #AAAAAA;
-webkit-box-shadow: 0 2px 2px #AAAAAA;
}
#optin-sidebar input.name {
background: url(http://i.imgur.com/XrHTe.png) no-repeat scroll right center #FFFFFF;
}
#optin-sidebar input.email {
background: url(http://i.imgur.com/2BCD0.png) no-repeat scroll right center #FFFFFF;
}
#optin-sidebar input[type="submit"] {
background: #DF6001;
border: 1px solid #B63C00;
color: #FFFFFF;
cursor: pointer;
font-family: arial;
font-size: 16px;
font-weight: bold;
height: 40px;
margin-top: 5px;
padding: 8px 0;
text-shadow: -1px -1px #B63C00;
text-transform: capitalize;
width: 87%;
}
#optin-sidebar input[type="submit"]:hover {
background: none repeat scroll 0 0 #B63C00;
}

 

Add Feed Burner Optin form to Single Post in WordPress

add-sidebar-optin-form-single-page-wordpress

You need to edit these files in your theme folder:

style.css and single.php

Hence, it is recommended to backup your theme.

Here is the step-by-step guide on how to add optin form to single post in WordPress:

  • Login to WordPress dashboard and navigate to Appearance menu.
  • Open Editor and edit single.php file in your theme.
  • At the end of single.php, add below code and click on “Update File” button.
  • You have successfully added HTML code to single post page.
  • Its time to style optin form and lets move onto next step.
<div id="optin-single">
<h4>Like this Article ? Subscribe to Our Feeds</h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=wpsquare', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" name="uri" value="wpsquare"><input type="hidden" value="en_US" name="loc">
<input type="text" id="name" name="name" onfocus="this.value=''" value="Enter Your Name" placeholder="Enter Your Name">
<input type="text" id="email" name="email" onfocus="this.value=''" value="Enter Your Email Address" placeholder="Enter Your Email Address">
<input type="submit" value="Sign Up" id="submit" name="submit">
</form>
</div>

Replace “wpsquare” with your feed burner ID.

  • You have just edited single.php file using theme editor, simply edit style.css file also in the same manner.
  • Add below code to it and click on “Update File” button.
  • You have added required CSS to your theme file.
  • Also, it is recommended to upload images to your own server.

Name – http://i.imgur.com/XrHTe.png

Email - http://i.imgur.com/2BCD0.png

#optin-single {
background: none repeat scroll 0 0 #F7F7F7;
border-color: #DDDDDD;
border-style: solid;
border-width: 1px;
padding: 10px 10px 15px 20px;
width:95%;
margin:15px 0;
}
#optin-single h4 {
font-weight: bold;
margin: 0 0 10px 0;
font-size:16px;
}
#optin-single input[type="text"] {
box-shadow: 0 2px 2px #DDDDDD;
-moz-box-shadow: 0 2px 2px #DDDDDD;
-webkit-box-shadow: 0 2px 2px #DDDDDD;
border: 1px solid #CCCCCC;
font-size: 13px;
margin: 0 0 10px 0;
padding: 10px;
width: 35%;
color:#888;
}
#optin-single input.name {
background: url(http://i.imgur.com/XrHTe.png) no-repeat scroll right center #FFFFFF;
margin-right: 5px;
}
#optin-single input.email {
background: url(http://i.imgur.com/2BCD0.png) no-repeat scroll right center #FFFFFF;
margin-right: 5px;
}
#optin-single input[type="submit"] {
background: #DF6001;
border: 1px solid #B63C00;
color: #FFFFFF;
cursor: pointer;
font-family: arial;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
padding: 8px 0;
text-shadow: -1px -1px #B63C00;
text-transform: capitalize;
width:17%;
}
#optin-single input[type="submit"]:hover{
background: none repeat scroll 0 0 #B63C00;
}

If you need any help in adding optin form to WordPress blog, drop a comment and we are glad to help you. Meanwhile, subscribe to our feeds by using the form below.

Genesis is the most flexible WordPress theme framework that comes with tons of options. We have been using Genesis on all of our blogs and recommending the same to you. Every bit of it is coded according to the standards. Give it a try!

Comments

  1. Sir, First of all thanks for the post. I added the code in header.php and added CSS. But it looks creepy, please have a look and help me to solve this.

    • Checked your blog and you need to add CSS code to style.css file.

  2. Thanks for sharing !
    I was looking for this since long.

  3. Thanks, easy to use tutorial.

  4. Thanks for the tutorial bro. I have added this form in my site and everything is fine except the images in the text fields. The Images in the text field are not displaying. Can you please help me with this ?

  5. I Read You Guest Post On #LBT.
    Please Tell Me How To Edit WordPress Free Themes On PC Offline. (Using WAMP Server) Or Any Other Tool. :)
    I Am Good In Blogger Template Design.

  6. Both are awesome Optin forms, but seems like isn’t working on my blog.

  7. Ankit says:

    Wow Lovely! @Bharath is feedburner also accept name like aweber?

    • Actually, no need to enter name. We have added name filed to make the form more attractive.

  8. i need only email subcription form plz give me link if you know how to setup that form into any site.????

  9. I’ve been using Mailchimp for sometime now. Lots of great features even in free version. Would be great if you can provide an article on how to use Mailchimp together with sample template form.

  10. I added it but the two little icons(name and email) are not showing. what should I do?

    • Just upload those icons to your theme directory and they will be live.

  11. Wow… what a great help… I searched this all over the net and finally found on your site…

    Great form but tell me how can i change the text “Grant Instant Access” ???

    • WPSquare says:

      You can change “Get Instant Access” text to any other by tweaking the code. Search for it and replace it with the desired text. Thank you.

  12. hey admin please help me I’m not able to set up the feed for my blog. Can you help me please ? I’m getting Error XML parsing error: :1:0: no element found.

  13. I have a query:
    How to remove the name field from first Feedburner Optin ?

  14. Everything works except the small icon images. The images don’t load. Since other people are having the same problem, do you have any other suggestions? I specified the exact location of where the files were located, but still no visible icons.

  15. Hi! Thanks for sharing this wonderful post.
    I’ve tried this on sidebar of my site too. I wanted to add it on my single post but the single.php code doesn’t work. it broke my code and got the error opening the website.
    What might be the problem?
    Can you please help?

  16. Hi,
    Thanks for sharing. I have added this code for my single post. It isn’t working, donno where I’m going wrong. Please help.
    Maria

  17. Bharat, I need exact form as yours, HELP!!!

  18. Hi! I was looking for a plugin like this since long, I tried to follow your tutorial in order to place the form at the end of the posts, but nothing happens!
    Could you please give me a help? Thanks a lot! I’m not very techie :)

  19. You have to add this code to functions.php file.

Speak Your MindComments Policy →

*

Looking for More Awesomeness?