Web Design: HTML CSS Design Contact form

formbox

Well I’m back.., Its Been a hell of a rough ride down here in New Zealand lately, Storms, Floods, Tornadoes, boy that Winter season does come around Fast! some say global warming, I say WINTER!! , But all that Weather drove me indoors to a labor of love this Web and Graphic design blog, so I sat here and wondered whats a good article to write which led me to a wee problem, I need a poll so until I sort that out Ill choose for you as long as there are free give aways at the end, looks like its CSS again!

lets start with one of the most important parts of your site, the contact form or Registration form. Generally people don’t put a lot of web design effort in this area, Ive always had trouble with forms and trying to make them work and look a little different or even tie them into my web site theme design, things are getting easier now with all these cool people who give away their knowledge and code to help us all break away from those all to easy tables. You have to start thinking what do the blind hear when they go to a table Tag ridden site using their screen reader, well its going to get mighty confused, lets think about it for a second, is your form really that user friendly, probably not! “God…, the net must be a boring place with all those tables Tags to read and yes people with disabilities also want the freedom of the net power to the People.

Help the internet community and start designing for the future, CSS is the way to great end results for all parties

Below is a nice form that I designed with curved corners the box around the inner Box is showing off (also a great hack called the Box model Hack browser compatible )this can be set to show or not, every part of this form is versatile.

A great way to Change your CSS ON THE FLY with your Mozilla Browser is to use the Web Developer plug in for Mozilla firefox Download Mozilla Plugin and your tool bar will now show a new tool bar at the top above the google tool bar, “What no google tool bar.., for Mozilla Download google toolbar then click on the >> CSS OPTION >> Ctrl+ Shift+E I have included the same form also with no style sheet well a very basic one still fluid though

A text editor will now be available at the bottom of the browser pull it up with you mouse and start changing the style sheet if you break the style just refresh the page and all is back to normal when you get it how you like save the style code and paste it into your site CSS template nothing better then seeing the changes occur right there be careful though IE Browser being what it is make sure you check the changes in that browser A lot of People use it but that will change

>>> Below is a Basic CSS HTML fluid 2 Column form very little styling but still tidy

Basic CSS HTML web design form layout

XHTML Code for form above is Below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Table-free form layout</title>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="basic_CSS.css" />

</head>

<body>

<h1>Example User Form</h1>

<form method="post" action="your processing script here">

<p>

<label for="name">Full Name:</label>    <input type="text" name="name" id="name" class="txt" />

  </p>

  <p>

    <label for="username">User Name:</label>

    <input type="text" name="username" id="username" class="txt" />

  </p>

  <p>

    <label for="email">Email Address:</label>

<input type="text" name="email" id="email" class="txt" />

  </p>

  <p>

    <label for="paswd0">Password:</label>

    <input type="password" name="paswd0" id="paswd0" class="txt" />

  </p>

  <p>

    <label for="paswd1">Confirm Password:</label>

<input type="password" name="paswd1" id="paswd1" class="txt" />

  </p>

  <p>

    <label for="Comments">About your self:</label>

   <textarea  cols="30" rows="8" name="Comments" id="Comments" class="txt"></textarea>

     </p>

  <p>

    <label for="level">News Letter:</label>

<select name="choice">

      <option value="Yes">Yes</option>

      <option value="No">No</option>

    </select>

  </p>

  <p>

    <input type="submit" name="btnSubmit" id="btnSubmit" value="REGISTER!" class="btn" />

  </p>

</form>

</body>

</html>

>>> Below is a the same basic form from above the XHTML has few simple lines of code but the style sheet is a little more complex I have included a zipped folder with both sets of Style sheets and XHTML pages Muck around and see where you can take it

CSS HTML web design form layout

XHTML Code for form above is Below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Rounded Corners</title>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="CSS_form.css" />

</head>

<body>

<div id="box">

<div class="roundborder c1"></div>

<div class="roundborder c2"></div>

<div class="roundborder c3"></div>

<div class="roundborder c4"></div>

<div class="roundborder c5"></div>

<div class="roundborder c6"></div>

<div class="roundborder c7"></div>

<div class="roundborder c8"></div>

<div class="roundborder c9"></div>

<div class="roundborder content">

<h1>Example User Form</h1><form method="post" action="your processing script here">

<p>

<label for="name">Full Name:</label>

<input type="text" name="name" id="name" class="txt" />

</p>

<p>

<label for="username">User Name:</label>

<input type="text" name="username" id="username" class="txt" />

</p>

<p>

<label for="email">Email Address:</label>

<input type="text" name="email" id="email" class="txt" />

</p>

<p>

<label for="paswd0">Password:</label>

<input type="password" name="paswd0" id="paswd0" class="txt" />

</p>

<p>

<label for="paswd1">Confirm Password:</label>

<input type="password" name="paswd1" id="paswd1" class="txt" />

</p>

<p>

<label for="Comments">About your self:</label>

<textarea  cols="30" rows="8" name="Comments" id="Comments" class="txt"></textarea>

</p>

<p>

<label for="level">News Letter:</label>

<select name="choice">

<option value="Yes">Yes</option>

<option value="No">No</option>

</select>

</p>

<p>

<input type="submit" name="btnSubmit" id="btnSubmit" value="REGISTER NOW!" class="btn" />

</p>

</form></div>

<div class="roundborder c9"></div>

<div class="roundborder c8"></div>

<div class="roundborder c7"></div>

<div class="roundborder c6"></div>

<div class="roundborder c5"></div>

<div class="roundborder c4"></div>

<div class="roundborder c3"></div>

<div class="roundborder c2"></div>

<div class="roundborder c1"></div>

</div>

</body>

</html>

So without Making this page any longer here is that zipped folder I promised with the two forms and accompanying Style code sheets, I hope somebody actually downloads this It will save a lot of work!

>> Download zip file Examples for XHTML Forms with CSS style sheets

I will add more to this Post if you need some Help to understand things leave a comment

Regards Admin

One thought on “Web Design: HTML CSS Design Contact form

Leave a Reply