So you’ve been to about a million websites at this point in your cyber life. There’s a little bit of everything in the online jungle, with every different imaginable style, color, and layout. Everyone is trying to be different, trying to separate themselves from the pack. So why is it that nearly every website, from the coolest of the cool to the worst of the worst, seem to still be using the same, ugly form fields that are default.
Well, that’s about to change, at least on your website. I’m going to give you some quick and easy tips to spice up your form fields and set your website apart from the rest. This will not be a tutorial on CSS, although if you’ve never used CSS, you still should get enough information to improve your forms drastically. The more you know about CSS, the more cool stuff you can do!
My example will be spicing up a super basic, 3 field contact form using CSS. I will show you how to change the background color of your field, change the border to different styles, and change the text color and size to produce some interesting and cool affects. Once you see the basics, you should be able to apply the principals to improve all aspects of your form.
The first step is to create your form. If you still use table based layouts, you can set up the formatting that way or for more advanced CSS designs, you can create the setup using CSS. For this example, I’ll use a table based layout.
Here’s my basic code:
<form id=”cform” name=”cform” method=”post” action=”contact.php”>
<table width=”500″ border=”0″ cellspacing=”4″ cellpadding=”0″>
<tr>
<td width=”62″><label for=”name”>Name:</label></td>
<td width=”426″>
<input type=”text” name=”name” id=”name” class=”cform” /> </td>
</tr>
<tr>
<td><label for=”email”>Email:</label></td>
<td><input type=”text” name=”name” id=”name” class=”cform” /> </td>
</tr>
<tr>
<td><label for=”question”>Question:</label></td>
<td>
<textarea name=”question” id=”question” cols=”45″ rows=”5″ class=”cform”></textarea></td>
</tr>
<tr>
<td colspan=”2″><div align=”center”>
<label>
<input type=”submit” name=”button” id=”button” value=”Submit” />
</label>
</div></td>
</tr>
</table>
</form>
Here’s what it’ll look like without any formatting. Pretty boring, if you ask me!
Now for the CSS. All you have to do is add this code between your <HEAD> tag or add right into your CSS.
Here’s a quick example:
<style type=”text/css”>
<!–
.form input {
width: 300px;
height: 28px;
color: #40629F;
font: 22px/22px Georgia, Times New Roman, Times, serif;
background: #FDF3E1;
border: dashed;
border-width:1px;
color: #F39A00;
padding: 4px;
}
.form select {
height: 32px;
color: #40629F;
font: 20px/20px Georgia, Times New Roman, Times, serif;
background: #FDF3E1;
border: dashed;
border-width:1px;
color: #F39A00;
}
.form textarea {
width: 300px;
height: 96px;
color: #40629F;
font: 15px/15px Georgia, Times New Roman, Times, serif;
background: #FDF3E1;
border: dashed;
border-width:1px;
color: #F39A00;
}
.form label {
color: #40629F;
font: 15px/15px Georgia, Times New Roman, Times, serif;
float: left;
}
.style1 {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 12px;
}
–>
</style>
If you understand CSS, you can easily see what all this does. If not, here’s the basic rundown. Our style we are creating is called form. We are then creating custom styles for the different input types, in this case textarea, input, select, and label. There are tons of CSS tutorials, so if there’s something specific you’d like to do, it’s easy to figure out how to do it with this basic layout.
Now our final step is just adding class=”form” to <table>. If you aren’t using a table based layout, just put the <div class=”form”> surrounding your form and voila! A very unique and different type of form that sets you apart!
Related posts:
Loading...
Trackbacks/Pingbacks
[...] el blog [Re]Encoded dot Com dejan caer la siguiente pregunta: ¿por qué es que casi todos los sitios Web, desde los mejores a [...]
[...] Ir al Tutorial, en inglés. [...]
[...] – N.DESIGNSTUDIO: Form Validation – XEROBLOG: Como crear un formulario de contacto – REEDCODED: Crear un Formulario con CSS – CÓDIGO FUENTE: Formulario de contacto con PHP y [...]