• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here:Home » How to customize Feedburner email subscription form

By Abhishek Ghosh April 16, 2011 8:16 pm Updated on October 17, 2014

How to customize Feedburner email subscription form

Advertisement

You must have noticed our Google Feedburner email subscription form along with social icons and and a counter. It looks very professional and matches with our custom theme.

customize Feedburner email subscription form

The default Google Feedburner though does the basic work very well, that is helps your visitors to subscribe to your RSS feed via email; but it really look like a vintage widget.

Here  is Google Feedburner subscribe by email form’s default code:

Advertisement

---

 

Vim
1
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TheCustomizeWindows', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="TheCustomizeWindows" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

 

It looks like this:

 

Enter your email address:

Delivered by FeedBurner

 

We will change the appearance by using CSS and clean up the code a bit.

Adding CSS to your WordPress theme’s style.css file

Add this at the end of your style.css file:

 

Vim
1
2
3
4
5
6
7
8
div.feed-subscription {
background-color:#D9E0E5;
padding: 10px;
border: 5px solid #CDD6DB;
}
div.feed-subscription:hover {
background-color:#E3E3E3;
}

 

Explanation:

The background-color value is the hex value of the color you want. We have provided what we are using. You can download free color choosing software named color pic to pick any color and get its hex value.

The border pixel in number determines how thick the border will be.

The hex value number determines the color of the border.

The E3E3E3 background-color determines color change on mouse hover (of the background, not the button). You need not to mention if you do not want change of color on hover.

 

The style.css file is located in the Theme folder’s root. Always take a backup beforehand. You can edit it via any FTP software.

 

Now the clean code:

 

This is what you will need to copy paste to your sidebar text widget:

Vim
1
2
3
4
5
6
7
<div class="feed-subscription">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-feedburner-name', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" style="width:178px; height: 24px;" name="email" value="Enter E-mail address here..." onfocus="this.value=''"/>
<input type="hidden" value="Your-feedburner-name" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="image" style="margin-bottom:-10px;" onclick="submit" src="full url of your submit button" />
</div>

 

Change Your-feedburner-name to your one, full url of your submit button to where you have uploaded the button. Enter E-mail address here... to your custom text that will appear inside the email input box.

On focus :  Keep it blank it you do not want to show any text after clicking to enter the email (test ours on sidebar).

 

The code is for 330 pixel wide side bar widget column, you may have to change the padding value to get the desired position of the button.

 

Customizing the button on hover

 

If you want to customize the button to a hover like action, so that it will change color on hover; you have to create a CSS sprite of two stages of the button : normal and on mouse hover.

Obviously, you will need to add extra CSS code to that we mentioned above. Nothing much difficult. We already wrote a separate article on how to create such mouse hover action button here.

 

There are many free buttons in our download section; you can go and choose from them. If you need professional quality custom form, just contact us, our designer team can create one for you at a reasonable price.

 

How to customize Feedburner email subscription form : Updated for HTML5

 

As the guide was written for HTML 4 not HTML5 plus CSS 2 not CSS 3, there are some changes now but the basic remains the same.

Tagged With custom feedburner code , feedburner custom css , FeedBurner Email SubscriptionCheckYourNumbers :: T , https://feedburner google com/fb/a/mailverify
Facebook Twitter Pinterest

Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to How to customize Feedburner email subscription form

  • Nginx WordPress Installation Guide (All Steps)

    This is a Full Nginx WordPress Installation Guide With All the Steps, Including Some Optimization and Setup Which is Compatible With WordPress DOT ORG Example Settings For Nginx.

  • Customize WordPress Inline Code

    There Are Many Ways to Customize WordPress Inline Code to Look Them Pretty Nice Like Twitter Bootstrap. Methods Shown With Needed Snippets.

  • Change Github’s Default Gist Style With jQuery Plugins

    Yes, There Are jQuery Plugins to Change Github’s Default Gist Style With jQuery Plugins! They can do lot of works than simple changing look.

  • WordPress & PHP : Different AdSense Units on Mobile Devices

    Here is How To Serve Different AdSense Units on Mobile Devices on WordPress With PHP. WordPress Has Function Which Can Be Used In Free Way.

performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Comments

  1. AvatarPatrick says

    April 25, 2011 at 5:55 pm

    another handy post thanks

  2. AbhishekAbhishek says

    April 25, 2011 at 6:36 pm

    You are welcome Patrick :)

  3. AvatarPatrick says

    April 25, 2011 at 6:43 pm

    How could I get this box to appear in the end of each of my posts? (i.e. not sidebar)

    Thanks in advance,

  4. AbhishekAbhishek says

    April 25, 2011 at 6:51 pm

    Surely. Use Post layout plugin to insert the code

      http://wordpress.org/extend/plugins/post-layout/

    . You can add at top or at bottom of every post without touching the codes of the Theme (plus if you change/update the Theme, you do not have to it insert again).

  5. AvatarTheShadow@Mobile themes World says

    April 29, 2011 at 2:08 pm

    Thanks for this useful form

  6. AbhishekAbhishek says

    April 29, 2011 at 2:27 pm

    Thank you very much :)

  7. Avatarrainwilds says

    May 2, 2012 at 12:37 pm

    Thanks heaps for a great short tutorial. Really helped!

  8. AvatarMisa says

    August 13, 2012 at 10:26 pm

    Like it, good explanation, just don’t understand one thing… This text “full url of your submit button to where you have uploaded the button”… what do you mean by that? what shall I put there? thank you…

  9. AvatarMisa says

    August 13, 2012 at 10:46 pm

    me again… please give me examples for my feedburner name… enter example… because I can’t do this like this…. thanks

  10. AbhishekAbhishek says

    August 13, 2012 at 10:48 pm

    Thanks Misa. The sentence basically became very difficult to understand, probably I was thinking of coding part then. “full url of your submit button to where you have uploaded the button” means – take that your Feedburner email subscription form’s custom’s name is feedbutton.png. Now you have uploaded it to wp-content/themes/images folder. If your website’s name is

    example.com

    , the full url will be –

    http :// example .com/wp-content/themes/images/feedbutton.png

    . So the part of code will be like this :

    input type="image" style="margin-bottom:-10px;" onclick="submit" src="http://example.com/wp-content/themes/images/feedbutton.png"

    I wanted to say, the green code should be replaced with the real one.

  11. AbhishekAbhishek says

    August 13, 2012 at 10:51 pm

    No problem. In our case, the feedburner name is TheCustomizeWindows. This is set from Feedburner account. Got it ?

  12. Avatarbaba says

    September 28, 2012 at 11:26 pm

    Nice explanation. i’ll try mine later 2day. thankz

  13. Avatarwacky says

    October 16, 2012 at 2:24 pm

    what is the exact location where the code needs to be placed in style.css ? I put it at the end and even tried it before the footer. the form shows up and is working perfectly but the problem is i get a search box on the top right of the wordpress nav bar when i am signed in. how do i resolve it ?

  14. AbhishekAbhishek says

    October 16, 2012 at 4:16 pm

    You are missing a div closure.
    Wait for 3-4 days, I will complete the WordPress Plugin for users’ customize Feedburner email subscription form. No coding will be required.

  15. Avatarwilliam says

    December 16, 2012 at 12:10 am

    how to add this very same subscription form in a single post(not all) on wordpress ?

  16. AbhishekAbhishek says

    December 16, 2012 at 1:01 am

    Using WordPress conditional tag. You can use some plugin instead of writing the conditional tag manually.

  17. Avatarwilliam says

    December 16, 2012 at 3:39 pm

    a whole plugin for a single post? can you give a name ?

  18. AvatarAdel says

    December 21, 2012 at 3:10 am

    Thanks , it really works

  19. AvatarSadek says

    January 21, 2013 at 6:27 pm

    hello can you tell us how can I put an image for the background?

  20. Avatarlol says

    December 21, 2013 at 2:51 pm

    your coding is Copy+Paste addicted…lol

  21. Abhishek GhoshAbhishek Ghosh says

    December 22, 2013 at 4:40 am

    Written in the sidebar :

    Please Notice Codes in Some Guides Might Appear Temporarily Broken As We are Upgrading 
    Report us the URLs.

    Your IP address 202.67.40.26 and email is myaliemz@gmail.com (flagged for spamming).

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (24.3K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • PowerAmp Settings for Higher Sound QualityOctober 4, 2023
  • Affordable Earphone/IEM for Audiophiles: HiFiMan RE-400 WaterlineOctober 2, 2023
  • What is Hardware Security Module (HSM)September 30, 2023
  • Transducer Technologies of HeadphonesSeptember 28, 2023
  • What is Analog-to-Digital Converter (ADC)September 27, 2023
PC users can consult Corrine Chorney for Security.

Want to know more about us?

Read Notability and Mentions & Our Setup.

Copyright © 2023 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy