How to add and style a feedburner opt-in form (Part-2)

After getting quite a few requests and seeing that people have been stumbling upon my website via google looking for tutorials on how they could add a background to an opt-in from, I think it’s time to do something about it.

 

Here’s a short tutorial for people that want to add backgrounds to their opt-in forms. It’s pretty simple actually, I’ll just describe how I styled my opt-in from that you see on the sidebar so that you can get something that works right away. But first you’re gonna have to go through the first part of the tutorial, here’s the LINK.

 

Done that? Okay now let’s go through the CSS part again, you’ve probably noticed how the background: blah blah blah;  part of a selector could change the look of the text area and the button, right? This time, we’re gonna disable the background part for the button and text area, instead, we’re gonna be using an image to determine the text area and the button. Now go through the CSS codes below very carefully:

#optin {
width:272px;
height:28px;
vertical-align:left;
color:#000;
padding:15px 0px 0px 0px;
background:url(images/subscribe.gif) left top no-repeat;
text-align:left;
margin:1px 0px 0px 0px;
}

 

#optin input {
background:transparent;
font-size:11px;
color:#999176;
font-family:Tahoma, arial, verdana, courier;
width:151px;
height:20px;
vertical-align:middle;
}

 

#optin .input {
width:70px;
height:20px;
background:transparent;
vertical-align:middle;
margin:0;

padding: 0px 0px 0px 11px;
}

Feeling a little lost? Let me explain it then. The #optin section actually covers the whole form section in this case, as you can see I’ve changed the background for this selector so that the whole form has an image (subscribe.gif in this case) as background, now, moving on to the next part, the #optin input part styles the text box, where you put in the email address and the #optin .input part styles the button, as you can see I set the background value for both the part to transparent, it means both of them will have no individual background to come in the way of the background I set for the whole form. The padding and margin values in the #optin section are used for setting up the placement of the transparent text area and the button so that they appear exactly where you want them to be on the image background.

 

Let’s move onto the HTML part now. Here’s the code I’m gonna use:

<div id="optin">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=r_shahin’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true"><input type="text" style="margin:0px 0px 0px 23px;" value="Enter your email address…" name="email"/></br><input type="hidden" value="r_shahin" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="image" class="input" src="<?php bloginfo(‘stylesheet_directory’); ?>/images/spacer.gif" value="submit"/></form>
</div>

Lost again? Well you should be cuz I altered the default feedburner code, if you’re gonna use it, just replace the r_shahin part with your feedburner id and you’ll be good to go. The Result? Take a look at my sidebar.

 

Please do note that it’s not really a pro tutorial, I just tried to quickly give an idea about using image as background in a form. People completely unfamiliar with HTML and CSS might find it difficult to follow, but then again, I don’t think it’s gonna be a wise idea to play with this kinda stuff if you don’t know anything about CSS or HTML, as for others, leave a comment if you think I missed something or if you had any question.

If you enjoyed this, please consider subscribing to the RSS feed to have future articles delivered to you.