Designing a beautiful Contact Form

On 12.13.09, In Html, by admin

All of us creates forms on websites, it may be a blog, e-commerce or even a personal site. The way I did it in the past was declared a background image on the input element which I soon found will not work correctly. Instead I needed to put the background image on a hook like a paragraph tag and absolutely position the input element within the background image thus allowing full control of the position of the text input. Lets checkout first that what we will achieve.

View Demo

I took the liberty of commenting anything that is not immediately clear in the CSS.

Now let’s take a look at the code.

HTML:

<form id="nice-form" method="post"> <fieldset>
<legend>Nice Contact Form</legend>
<label for="name">Name:</label>
<input name="name" type="text" /><label for="email">Email:</label>
<input name="email" type="email" /><label for="message">Message:</label>
<textarea cols="40" rows="10" name="message"></textarea>
</fieldset>
<input class="button" name="submit" type="submit" value="Submit" /> </form>

CSS:

html, body {
margin:0;
padding:0;
}
#wrapper {
margin:0 auto;
width:960px;
}
fieldset {
border:none;
}
legend {
font-size:30px;
color:#BD2B7B;
font-family:Georgia, "Times New Roman", Times, serif;
}
#nice-form {
float:right;
margin:20px auto;
width:470px;
}
#nice-form label {
text-indent:-9999px; /*  Move the text off the screen while still keeping accessibility */
display:inline-block;
}
#nice-form p.name {
background:url(../images/nameinput.png) no-repeat scroll top left;
width:446px;
height:62px;
position:relative; /* To allow child containers to be positioned absolutely */
clear:both;
display:block;
}
#nice-form p.name input {
position:absolute; /* To position this container absolutely inside of #nice-form p.name parent container */
top:10px;
left:130px;
border:none; /* By default, the input field will show a border/box, this sets it to not display anything */
font-size:30px;
width:300px; /* This keeps the text within the background image so the text will not type outside of that area */
background:none; /* This sets the background color to none so you will not see a default white */
font-family:Georgia, "Times New Roman", Times, serif;
color:#999;
display:block;
}
#nice-form p.email {
background:url(../images/emailinput.png) no-repeat scroll top left;
width:446px;
height:62px;
position:relative;
clear:both;
display:block;
}
#nice-form p.email input {
position:absolute; /* To position this container absolutely inside of #nice-form p.name parent container */
top:10px;
left:130px;
border:none; /* By default, the input field will show a border/box, this sets it to not display anything */
font-size:30px;
width:300px; /* This keeps the text within the background image so the text will not type outside of that area */
background:none; /* This sets the background color to none so you will not see a default white */
font-family:Georgia, "Times New Roman", Times, serif;
color:#999;
display:block;
}
#nice-form p.textarea {
background:url(../images/textinput.png) no-repeat scroll top left;
width:446px;
height:302px;
position:relative;
}
#nice-form p.textarea textarea {
position:absolute; /* To position this container absolutely inside of #nice-form p.name parent container */
top:20px;
left:140px;
border:none; /* By default, the input field will show a border/box, this sets it to not display anything */
font-size:20px;
width:290px; /* This keeps the text within the background image so the text will not type outside of that area */
background:none; /* This sets the background color to none so you will not see a default white */
font-family:Georgia, "Times New Roman", Times, serif;
color:#999;
overflow:auto; /* This ensures that there should be any text overflow, it would automatically determine to use vertical and horizontal scrollbars */
display:block;
}
#nice-form .button {
background:url(../images/button.png) no-repeat top left;
width:121px;
height:57px;
text-indent:-9999px;  /*  Move the text off the screen while still keeping accessibility */
border:none; /* This sets the background color to none so you will not see a default white */
cursor:pointer; /*Since we are using a background image, this will set the mouse cursor to change when hovering over so you know it is a clickable button */
overflow:hidden; /* hides any graphic/image element if it overflows */
display:block;
line-height:0; /* this is really a hack for IE6 and IE7 because text-indent will not work here unless the line-height is set to zero */
}

This technique has been tested on IE6,IE7,IE8,FF (latest), Opera (latest), Safari (latest), and Chrome (latest).

Although I know this wasn’t a step by step tutorial but I figure the comments on the stylesheet should explain most of whats going on. But if for some reason you think this does not suffice, please let me know and I will write this out in a tutorial step by step style. Enjoy and have fun!