A contact form is pretty much a necessity for any website these days, creating one is fairly simple. Making them look good is where the real skill lies. By using some simple Css rules your forms can really rock!

This is what we are aiming to end up with;
Preview

Live Preview

form full
The Mark-up

There are many elements that make up a form, some of which are neglected or seen as not necessary. But its important to include these for Accessibility reasons, lets take a look at a simple contact form.

This will give us a basic form structure, I am not going to explain what each tag does, as this tutorial aim is how to style them.

However if you wish to find out a little more, there is a great explanation on Forms over at W3schools.com
Adding extra markup

As there are many tags within the form there will be many styles that need to be created.

However as many of the tags will be styled the same, it would be easier to group them. That way we can drastically cut down the number of rules within our Css.

How are we going to do this? Simple, we can use our trusty unordered list

and list tags
• .

  First we need to decide what elements we wish to group. The logical answer would be our
  and our form , Lets do that.

  • Name * Required
  • Email * Required
  • Url
  • Message * Required

  You may have notice that I have used 2 unordered lists, this is so we can style the separatly.<br /> Styling the input elements</p> <p>Now we need to start adding our Css rules to our unordered list. So what rules are we going to add?</p> <p>Firstly we will remove the bullets, the indent, and the padding, these are styles set to the element automatically.</p> <p>We also need to separate our form elements a little better, so they have some room to breath. For this we will add some styling to the <li> elements</p> <p>ul {<br /> list-style: none; /* Removes the Bullets */<br /> list-style-position: inside;<br /> padding:0; /* Aligns with the edge of the Form Field */<br /> }</p> <p>li {<br /> margin:10px 0; /* Adds 10px Margin to the Top + Bottom */<br /> }</p> <p>So that’s our unordered list elements are all sorted, lets take a look at styling some of our<br /> <input> elements. Again by default these already have styles associated with them (width, height, border etc.) so we need to over ride a few.</p> <p>Now because we only want to access the<br /> <input> and <textarea> tags within our unordered list we have to declare this in our Css;</p> <p>li input, textarea { /* Sets Rules for 2 Elements */<br /> height:15px;<br /> padding:5px;<br /> border:1px solid #E8E8E8;<br /> width:288px;<br /> }</p> <p>Lets take a look at what each element is doing;</p> <p>The Width , Height and Border should be self explanatory, the Padding however, allows us to have the cursor in the center of the<br /> <input> box, it just makes it a little more stylish.</p> <p>Now obviously we need to change some of the rules for our <textarea> as this is going to contain the message that people will leave us and naturally needs to be larger than our other<br /> <input> elements. For this we just create a new rule for just the <textarea> </p> <p>textarea {<br /> font-family: Arial, sans-serif; /* Changes default font */<br /> font-size: 12px;<br /> height:150px;<br /> }</p> <p>Styling the Buttons</p> <p>So we have styled the elements for input, now we need to give our buttons a little makeover, these have rules added to them by default so once again we need to over ride them.</p> <p>Now in order to separate them to the rest of our<br /> <input> rules, we are going to add some classes to them.</p> <input type="submit" class="button" name="submit" value="Send"/> <input type="reset" class="reset" value="Clear"/> <p>Now we can reference them both in our Css (you can set the colors to match your site);</p> <p>.button {<br /> border:1px solid #E8E8E8;<br /> padding:5px 10px;<br /> margin:0 5px 0 0;<br /> cursor: pointer; /* Changes the cursor behavior */<br /> background: #AC0000;<br /> color: #FFFFFF;<br /> }</p> <p>.reset {<br /> border:none;<br /> padding:5px 10px;<br /> margin:0 5px 0 0;<br /> cursor: pointer;<br /> background: #FFFFFF;<br /> color: #AC0000;<br /> }</p> <p>Styling the rest</p> <p>Right so, we have styled the elements within the form itself, lets go out a little bit and look at our<br /> <fieldset> and<br /> <legend> tags. Firstly the<br /> <legend>;</p> <p>For this we are just going to add some padding and border rules;</p> <p>legend {<br /> border: 1px solid #E8E8E8;<br /> padding:5px 15px;<br /> }</p> <p>Now our<br /> <fieldset> tag, for this we are just going to set the width, by default this inherits the width of the containing element, as there is no containing element we will set this ourselves.</p> <p>We’ll also give it some padding (note: the margin is just to move the form away from the edge, it will not be necessary if its in a containing element that already has a margin set).</p> <p>fieldset {<br /> border:1px solid #E8E8E8;<br /> padding: 10px;<br /> margin: 10px; /* Used to move form away from the edge */<br /> width:300px;<br /> }</p> <p>Finishing it off</p> <p>If some inputs by the user are required for the form to process its a good idea to indicate this. So lets put a <span> tag around our “*required” prompt, I’ll use the Name label as an example, but you can do it to each if you wish.</p> <li><label for="name">Name <span>* Required</span></label></li> <p>Now we can add some style to it; </p> <p>span {<br /> color: #AC0000;<br /> font-size: 10px;<br /> }</p> <p>So that’s about it, if you want to learn some more I have included some resources below, and there are plenty more tutorials out there detailing how to handle form using various dynamic languages.</p> <p>Good Luck!</p> </div> <!-- /post-content --> <!-- post-meta --> <p class="post-meta" style="float:none"> <span class="post-category"><a href="http://devsnippets.com/category/design-elements" title="View all posts in Design Elements" rel="category tag">Design Elements</a>, <a href="http://devsnippets.com/category/design-elements/forms" title="View all posts in Forms" rel="category tag">Forms</a>, <a href="http://devsnippets.com/category/csstechniques/techniques" title="View all posts in Techniques" rel="category tag">Techniques</a></span> <time datetime="2009-05-07" class="latest-post-date" pubdate>May 7, 2009</time> </p> <!-- /post-meta --> <script type="text/javascript"><!-- google_ad_client = "ca-pub-5772113346494698"; /* inbetween posts */ google_ad_slot = "1391467500"; google_ad_width = 250; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <!-- /.post-inner --> </article> <!-- /post --> <!-- post-nav --> <div class="post-nav clearfix"> <span class="prev"><a href="http://devsnippets.com/design-elements/glassy-effect-with-photoshop.html" rel="prev"><span class="arrow">«</span> Glassy Effect With Photoshop</a></span> <span class="next"><a href="http://devsnippets.com/news/acidjs-library-30-has-been-released.html" rel="next"><span class="arrow">»</span> Acid.JS Library 3.0 Has Been Released</a></span></div> <!-- /post-nav --> <div id="comments" class="commentwrap"> <div id="respond"> <h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/design-elements/creating-a-stylish-minimal-contact-form.html#respond" style="display:none;">Cancel</a></small></h3> <form action="http://devsnippets.com/wp-comments-post.php" method="post" id="commentform"> <p class="comment-form-author"><input id="author" name="author" type="text" value="" size="30" class="required" /><label for="author">Your Name</label> <span class="required">*</span></p> <p class="comment-form-email"><input id="email" name="email" type="text" value="" size="30" class="required email" /><label for="email">Your Email</label> <span class="required">*</span></p> <p class="comment-form-url"><input id="url" name="url" type="text" value="" size="30" /><label for="website">Your Website</label> </p> <p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" class="required">