Give a new look and feel to your feedburner email subscription form. Many bloggers customize feedburner email subscription form. In fact, they rebrand the feedburner email subscription from by adding advanced CSS techniques to it. Do you ever think that how they do it? I too don’t know how exactly they do it, but when I tried to customize feedburner email subscription form, it exactly looked like a pro form we see on popular blogs. I tell you, it’s not a tedious task and you can do it too. A complete tutorial is here, let’s see how to customize feedburner email subscription form using CSS.
Rebrand your Feedburner email subscription form.
1. Copy default feedburner email subscription form code to clipboard
First, copy (Open feedburner, choose your feed, go to Publicize tab and click Email Subscriptions) the default feedburner email subscription form code to clipboard and paste it on a text document. The default feedburner email subscription form code look like:
2. Height & Width
Where do you want to place your subscription form? In sidebar or below your blog posts and what should be the height and width of the email subscription form? I suppose that you want to add the subscription form below blog posts and the height and width of the subscription box should be 500px and 136px respectively.
3. Background Image
After second step, our next step would be creating a new background for email subscription form. I know the height and width of my subscription box so, I created a background image using Adobe Photoshop CS5. If you want to use same background image for testing purpose, Download [PSD] it.
In the image, you can see two big, blue boxes. The first big box is for text box and second one is for submit button.
4. Create a Form
We must not forget that we’re creating an email subscription form. Thus, we have to create an HTML form using <form></form> tags in the <body> part of the HTML code. I strongly recommend Notepad++ to create and edit HTML form.
5. CSS layout for background image
To add background image to the subscription form, I created a CSS class ‘background‘ for background image. Here, http://localhost/es.png is the web location of background image.
6. Add Background Image to the form
In step 4, I created an HTML form. After that, I modified the form by adding CSS class ‘background‘ with default feedburner form action property. Hence, the code looks like:
7. Add some text to subscription form
It is a good idea to add some text to the subscription form to attract visitors. You can tell your visitors to subscribe by adding some text to the form. Add your desired text just below the code of step 6.
8. CSS Layout for Text Box
After adding background image to the form, I need to place a Textbox on First big, blue box (See step 3). Thus, I added CSS class textbox just below CSS class background in between <Style></Style> tags.
9. Add Text box to email form
In step 6, I added background image to the email form. Now I’m adding the CSS class textbox to the form with default feedburner input text box values. Add this code just after the code of step 6.
10. Add Hidden input types to the form
After adding textbox, I added two hidden input types below the text input. In value field, put your blog’s feed name.
11. CSS Layout for submit button
Now I need a layout for submit button, actually I’ll put the submit button on second big, blue box. Here, adding a CSS style for submit button just below CSS class “textbox”.
12. Add submit button to email form
After adding CSS class, I copied input type ‘submit‘ from default feedburner email subscription code and added CSS class ‘submit‘ to it.
I think, I’m almost done, Take a look the modified email subscription form. It should look like:
Now take a look to the full HTML code of this email subscription form. Click here. Save the file with ‘.html‘ extension to see preview on a webpage but don’t forget to add your own background image link.
13. Compact email subscription code.
In above steps, I customized the feedburner email subscription form using CSS technique. I showed you that how you can rebrand the feedburner email subscription form. After creating CSS layouts, I found that the total HTML code is quite big, so I compress the code in default feedburner style. I just added the CSS layouts inside the HTML form. Click here to view the code.
That’s it. This is how I customized feedburner email subscription form. However, I haven’t added this form to my blog, actually I’m still applying some advanced CSS techniques to it and I’ll reveal it later on Lifefive. If you still get any problem, let me know.None found.