• 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

This Article Has Been Shared 388 Times!

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

  • Configure the robots.txt in WordPress properly for easy crawling

    We will discuss about the optimum settings of this robots.txt file for your Wordpress website.

  • Making of WordPress theme : softwares and browsers addons

    List of the most useful tools needed for designing and coding a Wordpress theme.

  • 66 possible topics for your blog

    Here are some topics to write blogs, which are almost guaranteed to give you good ranking in search engine result pages for long run, if you do care about SEO.

  • Pressed text effect with Photoshop and CSS

    Pressed text effect, becoming more and popular these days. You can create pressed text effect by two methods: graphically by using Adobe Photoshop or by using CSS codes.

  • 100 Tips for Building and Maintaining a Successful Blog

    100 Tips for Building and Maintaining a Successful Blog is the 2500th article published on this website.Free Infographic is also included so that you print it.

Additionally, 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

  • Advantages of Cloud Server Over Dedicated Server for Hosting WordPress March 26, 2023
  • Get Audiophile-Grade Music on Your Smartphone March 25, 2023
  • Simple Windows Security and Privacy Checklist for 2023 March 24, 2023
  • 7 Best Artificial Intelligence (AI) Software March 24, 2023
  • ESP32 Arduino Water Tank Level Monitoring Using Laser ToF Sensor March 23, 2023

About This Article

Cite this article as: Abhishek Ghosh, "How to customize Feedburner email subscription form," in The Customize Windows, April 16, 2011, March 27, 2023, https://thecustomizewindows.com/2011/04/how-to-customize-feedburner-email-subscription-form/.

Source:The Customize Windows, JiMA.in

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

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT