Fancy Forms

Forms can be a bit of a pain to style, in the old days tables were the method of choice to align everything just right, but this is the future; CSS OR DIE! P.Diddy will come to your home and kill you if you use tables for presentational markup. So in order to prevent a Diddy disaster here is some helpful information, I accept thanks for saving your lives in cash and gifts off my Amazon wish list.

Forms have three main components. The label, inputs, and the button. Labels are the semantic way to describe what the input is for. Inputs are the fields where you enter the information you are looking to collect from the form. And finally the buttons are, …wait for it…, the buttons; like “submit” or “clear”.

Here is a break down of some code for a quick form.

The HTML
This is a basic form, for the most part you can see where to go from here to expand upon the form. You have labels, forms, and a button.

<div class="newsletter">

<h3>Newsletter</h3>
<p>Sign up for our awesome newsletter!</p>

<form action="" method="post">

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

<label for="email">Email:</label>
<input type="text" name="email" id="email"/>

<button type="submit">Sign-up</button>

</form>

</div>

The CSS
And this is the CSS to style that HTML snippet.

.newsletter {
font-size:0.75em;
text-align:left;
width:450px;
padding:10px;
margin:0 auto;
border:1px solid #CC0033;
}

label{
display:block;
text-align:right;
width:90px;
padding-top:5px;
margin-right: 10px;
float:left;
}

input {
float:left;
font-size:12px;
padding:5px;
width:240px;
margin:2px 0 20px 10px;
border:1px solid #CC0033;
}

button {
background:#CC0033;
border:1px solid #CC0033;
color:#fff;
font-size:1.1em;
padding:5px;
margin-left:110px;
text-align:center;
font-weight:bold;
width:150px;
clear:both;
}

Fancy it up!

You can add to it further by placing content in the fields by setting a value for the field.

<input type="text" name="email" id="email"   value="*Top Secret Hint!*"    />

To get even fancier you can make it so that the field clears the data when someone clicks in it to enter their own information.

<input type="text" name="email" id="email" value="*Top Secret Hint!*"       onfocus="this.value=''; this.onfocus=null;"        />

If you have Google toolbar with auto fill on you may notice fields like email and name highlighted in yellow, this may not be desirable for a variety of reasons, maybe your form text is in white, but it’s easy to override. In the input selector in your CSS just add !important to the background value, like so.

input {
float:left;
font-size:12px;
padding:5px;
width:240px;
margin:2px 0 20px 10px;
border:1px solid #CC0033;

background-color: white ! important

}

You can see the whole thing in action. But what do you do once you have your fancy pants form? Well if you are creating a mailing list like in the example you can sign up for a service like Campaign Monitor to handle the back end and the database. For a one off thing, like a request for proposal form use Web Form Factory. You load the file into it, select how you want it to work, and it will output the information you need.

VOILA!