Designing of Beautiful Contact Form

I hope that this will be an interesting tutorial for you. I want to demonstrate that how I style my form input fields that is cross browser compatible all with just CSS. This is totally a new layout.

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.

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 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!

Popularity: 100% [?]

Random Posts

• July 30, 2009 -- 10 Stunning Visual Effects (6)
• July 22, 2009 -- Easy Rusted Text (8)
• December 4, 2009 -- Folding Paper Effect (12)
• August 7, 2009 -- An Intersting Tutorial – Doing an Invisible (11)
• February 18, 2010 -- Stunning Mesh – Best Place for all!!! (0)
• February 11, 2010 -- 50 Very Useful Adobe Illustrator Tutorials (1)
• March 6, 2010 -- 25+ Creative Cartoon Character Tutorials (1)
• November 16, 2009 -- Fire Text Tutorial (1)
• July 22, 2009 -- Difficulty: Intermediate (0)
• September 8, 2009 -- 36 Retro and Vintage Style Tutorials (20)