How to customize the Feedburner email subscription box

wordpress tutorial – customize feedburner email subscription box

So, a while back I wrote a tutorial on adding a Feedburner subscription option to your Thesis site (you can add one to any self-hosted WordPress site, Thesis or not, but my directions are usually specific to Thesis users).

It just donned on me that I never told you how to customize the look of that subscription box. So, if you’ve currently got a Feedburner feed with an email subscription option on your site, maybe you’ll find the below tutorial useful.

Goals of this tutorial

  1. To give you the necessary skills to stylize your Feedburner email subscription box to match your site, or to look however you want it to look.
  2. To, again, simplify the web, taking you one small step down the path toward demystifying the internet.

Remember the Feedburner code you used?

You know, to get the box on your site in the first place? If you haven’t gotten that far, click on the link above and read through that previous tutorial. I’ll wait…

Now then. It should look something along the lines of:

Customizing the Feedburner Email Subscription Box

Pretty confusing looking, eh? Well, no worries, we’re not going to touch too much of it.

First, notice that it starts and ends with <form….> and </form>, so, pretty standard html opening and closing tags there (totally fine if you don’t get that, just know it’s a standard format). We want to keep those for sure as they’re integral to the functioning of the form itself. And BTW, that’s what this is…a form. Kind of like a contact form or a form you might use for any number of reasons, this is just a form that collects an email address, and then does some fancy stuff you don’t need to know about or understand but which allows Feedburner to make sure those who sign up get an email each time you publish a new post.

We’re going to break this into two sections. The ‘style’ section, and the ‘text’ section. In the code above, right next to the opening <form… you see ‘style=”border:1px…etc etc etc…text-align:center;”. That entire thing is what I’m referring to as the ‘style’ section. YOUR code may look a little different, but for the most part should look similar.

Step 1

Highlight the entire  style=”…” – making sure to get all the way to the ending quotes (“) on the right, but stopping before the ‘action=”…’. You can then delete that entire section.

Step 2

Keeping the cursor where it was (after you deleted that entire highlighted section), type in class=”my_feed_form”. Just make sure you leave one space between the ending quote and the ‘action=…’ we talked about before. NOTE: You can change the my_feed_form to almost anything you want, giving it a name that is more meaningful to you if you like. But if you choose to change it, be sure to do so in the below instructions too (might be easier to just keep it like mine for now).

Okay, so we’re going to leave the ‘style’ section for a minute, and move on over to the ‘text’ section, because the rest of the styling needs to happen in the custom.css form, so rather than leave and go there now, let’s finish up here first and then go.

Step 3

Now let’s change some text. The default text in these boxes is ‘Enter your email address’ and ‘Delivered by Feedburner’. Not terrible, but pretty generic. So let’s make it a bit more interesting. You can use mine as an example…right now (and it may be different if I’ve changed it by the time you’re reading this), my Feedburner email subscription box says, “Hi. Want every post and tutorial, delivered to your inbox? Absolutely free? Enter your email address:”. How did I get this in there? You can probably see it yourself, but just for kicks, look at the code above and you’ll see <p>Enter your email address:</p>, and then after some more confusing stuff, you’ll see <p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p>.

So all you need to do is change the text within that first set of <p> tags. In other words, replace ‘Enter your email address:’ with whatever you want in there, being sure to keep the beginning <p> and ending </p>. If you want to force a line break after a certain word, you can put a <br /> in there right where you want it to send the next word onto the next line. So for example, if you wanted it to say “Thank you for being here” on the 1st line and then “Please subscribe” on the 2nd line, and then “by putting your email in this box” on the 3rd, you’d replace that above text with “Thank you for being here<br />Please Subscribe<br />by putting your email in this box.”

You get the idea. You can totally mess with it and see how it all changes, just be sure not to jack with any of that other code in there as it might mess up the functionality you’re going for (that is, the technical side of getting email addresses on the distribution list). The god news is, if you mess up, just go back to your Feedburner account and copy that code again and start fresh.

Oh, and that second part, about being delivered by Feedburner, you can just delete altogether, unless you *want* some text to appear below the submit button.You can get rid of the <p> tags on either side of that if you’re removing it altogether.

Step 4

Okay, the final step is to finish up with the styling. As you will recall, we added a class to the default Feedburner code called ‘my_feed_form’. So we need to define what that class should look like. To do this, scoot on over to the custom.css file by going to the Thesis>Custom File Editor. On that screen you’ll see the file name custom.css appear in the drop down at the top. That tells you you’re in the right place. Scroll down to the bottom of that file (or, if you have your custom.css file well organized, you might scroll down to the ‘sidebar widget styling’ section), hit ‘enter’ a couple times and paste the following code:

.custom .my_feed_form {
border:2px solid #999999;
padding:4px;
background-color:#cccccc;
}
.custom .my_feed_form p {
text-align:center;
color:#608340;
}
.custom .my_feed_form input[type=”text”] {
font-style:italic;
margin-bottom:2px;
}
.custom .my_feed_form input[type=”submit”] {
text-align:center;
background-color:#000000;
color:#ffffff;
}
.custom .my_feed_form input[type=”submit”]:hover {
background-color:#608340;
color:#000000;
cursor:pointer;
}

Then click the SAVE button and go check out your subscription box. Obviously, this is just a sample. You can change any/all of that code to match your unique style.

The first block of code (.custom .my_feed_form) refers to the entire block on which the form sits, so that’s where we put the border and background colors if desired.

The second block (.custom .my_feed_form p ) refers specifically to anything within the form that is wrapped inside a <p> tag. In the case of this example, that is the text you inserted, so this is where you would change the font size, alignment, text color, etc. of that text.

The third block (.custom .my_feed_form input[type=”text”]) is referring to the text that a user will type into the email text field. So this is telling the browser to show that text as italic, and then it’s putting a very small margin below that field.

The fourth and fifth blocks (.custom .my_feed_form input[type=”submit”]) refers to the submit button only. The fourth as it is normally, the fifth as it will appear when the mouse hovers over it. Give it a try and see what you think.

Wrap up

Okay, as usual, that went on longer than I thought it would. Hopefully, though, you get the idea and can now take this information and tweak it to suit your needs. As always, I’m here if you have questions, so just leave a comment and I’ll come runnin’.

Cheers…

{ 16 comments… add one }

Leave a Comment

  • Istiak Rayhan August 9, 2012, 9:45 am

    Good post. It works for me.

    Reply
    • Jeb August 10, 2012, 6:42 am

      Always good to hear, thanks Istiak.

      Reply
      • Hit Mobile April 11, 2014, 2:28 am

        Really helpful tutor that what i need.

        Reply
  • Nishant August 26, 2012, 12:59 am

    Thanks jeb…..grest post

    Reply
    • Jeb September 2, 2012, 8:08 pm

      Hi Nishant, thanks, glad it helped.

      Reply
  • Esha September 29, 2012, 4:04 am

    Just reading the tutorial and customizing the subscription box in parallel nice tutorial

    Reply
    • Jeb September 29, 2012, 6:40 am

      Thanks Esha, glad it’s working for you.

      Reply
  • Mehmet November 4, 2012, 4:30 pm

    It doesn’t look so easy but i will give it a try. Need more subscribers.

    Reply
  • Mudassar November 24, 2012, 11:34 am

    Very well written. so far i haven’t applied but it looks it will work.

    Reply
    • Jeb December 3, 2012, 5:39 am

      Thank you sir, I hope it goes off without a hitch. And thanks for the comment.

      Reply
  • PM December 5, 2012, 9:31 am

    Thanks for that clear and lucid explanation! Very easy to follow and logically described. You have been such a wonderful help!

    Reply
    • Jeb December 6, 2012, 8:20 pm

      Very glad to hear it PM, and you’re very welcome. Cheers…

      Reply
  • Syed Ali June 8, 2013, 5:42 am

    Great post,worked for me too

    Reply
  • Muhammad Gohar August 7, 2013, 4:46 pm

    Good post but please do try to add screenshots – it will make the learning curve fast and easy . Thanks

    Reply
    • Jeb August 30, 2013, 10:43 am

      Good suggestion. :)

      Reply
  • The Content Bloke October 28, 2013, 10:27 pm

    Good tutorial but it would have been a lot better if you’d provided screenshots of the finished products.

    Reply