This tutorial will show you how to create a stylish grey form using CSS and a couple of simple images. It wont take long to complete and beginners with a basic understanding of CSS should be able to follow.
To add some effects, such as rounded corners, or drop-shadows, CSS3 will be utilised. These means that the form styling will only work properly in modern browsers.
A couple of external sources were used to produce the images, a link to these will be included - so you will also learn of a couple of valuable source sites too.
Step 1 – Download images for the form.
Before starting you will need to download a couple of images, you can grab these below. One image is for the form background, the other is the icon found on the right-hand side of the form.
Link:
http://weebtutorials.com/wp-content/uploads/2011/10/formimages.zip
Background pattern source:
Icon Source:
Step 2 – The HTML.
As the purpose of this tutorial is to discuss the stylnig of a form, rather than the full creation i wont go over the HTML in much detail. However, you can still find the code below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<form class="stylishForm1" method="post" action="script.php">
<h2> Contact us </h2>
<img src="images/contactIcon.png" alt="contact" class="contactImg"/>
<p> Your Email:
<input type="text" name="userMail" class="formInput"/>
</p>
<p> Your Name:
<input type="text" name="userName" class="formInput"/>
</p>
<p> Your Question :
<textarea rows="1" cols="1">
</textarea>
</p>
<p>
<input type="submit" value="Submit" class="formSubmit"/>
</p>
</form> |
As you can see the HTML pretty much consists of a few paragraph elements, each one containing either a text input, a textarea or a submit button. Its pretty simple code, but if you are unfamiliar with this stuff take a look at the W3C forms page.
Step 2a – Add google fonts link to HTML head section.
The form will be utilising some custom fonts via the google fonts API. All you need to do is add the following code to the HEAD section of the HTML document. You can then refer to the fonts in the CSS file.
Find out more about google fonts.
|
1 2 3 4 5 |
<head>
<link href="sylishForm1.css" type="text/css" rel="stylesheet"/>
<title> A Spacious CSS3 Form </title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Rochester' rel='stylesheet' type='text/css'>
</head> |
Step 3 – Styling the HTML form using CSS.
Style the form:
Changing the display property to ‘inline-block’ means the form will be a block element, but will expand to fit the elements inside of it, rather than span the full width of its parent container.
Notice the padding property, the third value is 0px. This means the bottom of the form has 0px has padding, the reason this has been done is that the paragraph elements will have 30px padding on the bottom so the form itself doesnt actually need it.
The position property is set to relative. This allows us to position any child element as absolute, giving us full control over its location.
Box-shadow property accepts 4 vlaues. These are, in order, horizontal offset, vertical offset, blur radius and color.
|
1 2 3 4 5 6 7 8 9 10 |
.stylishForm1 {
border:thin solid #eaeaea;
display:inline-block;
padding:30px 30px 0px 30px;
-moz-box-shadow: 2px 2px 3px #f2f2f2;
-webkit-box-shadow: 2px 2px 3px #f2f2f2;
box-shadow: 2px 2px 3px #f2f2f2;
background:url(images/background.jpg);
position:relative;
} |
Style the header section:
As mentioned earlier, the paragraph elements will have 30px padding added to the bottom. The same goes for the header element, this keeps the spacing consistent.
Change the font-family value to use the custom ‘Rochester’ font supplied by the google fonts API.
Using the contactIMG class the image added to the HTML can be positioned. An element which uses absolute positioning, is positioned relative to the first parent container which is positioned as relative. In this case the image should be move to the top right hand side. This is done by using the top, and right properties.
[codesyntax lang="css"]
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.stylishForm1 h2{
margin:0;
margin-bottom:30px;
font-family: 'Rochester', cursive;
font-size:30px;
color:#494949;
}
.contactImg {
position:absolute;
right:30px;
top:35px;
} |
[/codesyntax]
Style the paragraph and input elements:
Nothing much to explain on the ‘P’ element. The font has been changed, padding added etc.
The form inputs, and the text area have had their display property changed to block. This is used to push the elements on to a new line, below the text contained within the paragraph. Everything else on there is pretty straightfoward, or has already been explained.
[codesyntax lang="css"]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.stylishForm1 p{
margin:0;
margin-bottom:30px;
font-family: 'Open Sans', sans-serif;
color:#7a7a7a;
font-size:15px;
}
.stylishForm1 input, .stylishForm1 textarea{
display:block;
margin-top:10px;
width:430px;
padding:10px;
-moz-box-shadow: 2px 2px 3px #e3e3e3;
-webkit-box-shadow: 2px 2px 3px #e3e3e3;
box-shadow: 2px 2px 3px #e3e3e3;
border:1px solid #e9e9e9;
}
.stylishForm1 textarea{
height:130px;
} |
[/codesyntax]
Style the submit button.
Now, you’re probably about to look at the code below and pass out. Don’t worry though the code was created by using a CSS3 generator. The first section, which is wrapped within a comment ( taken from colorzilla) was taken from the following site:
http://www.colorzilla.com/gradient-editor/
Its a CSS3 gradient generator which produces the necessary code for all modern browsers. Highly recommended.
Following on from that is some pretty basic CSS, a border has been added and rounded corners have been implemented using border-radius. Just below that an inner shadow is added by using the box shadow property. The code for adding an inner shadow is exactly the same as for an outer shadow, the only difference being the word ‘inset’ is added.
The text shadow was again implemented using a CSS3 generator. I can never remember the code for IE(filter property) so normally just use a generator. You can find a link to the one i used below.
Notice the width of the submit button is 452px, where as the other inputs are 430px. This is because the submit button does not have 10px of padding at either side, unlike the input elements. The extra 2px accounts for the box shadow added to the inputs.
The final section of the code is used to implement a hover effect to the button. Again the colorzilla generator was used. The cursoer property simply changes the mouse cursor when the button is hovered.
[codesyntax lang="css"]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.stylishForm1 .formSubmit{
/*Taken from http://www.colorzilla.com/gradient-editor CSS3 Generator*/
background: #7db8e2; /* Old browsers */
background: -moz-linear-gradient(top, #7db8e2 0%, #75aed6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db8e2), color-stop(100%,#75aed6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7db8e2 0%,#75aed6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7db8e2 0%,#75aed6 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #7db8e2 0%,#75aed6 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db8e2', endColorstr='#75aed6',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #7db8e2 0%,#75aed6 100%); /* W3C */
/*End Taken from CSS3 Generator*/
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border:1px solid #75aed6;
box-shadow:inset 0px 0px 2px #dcebf1;
-webkit-box-shadow: inset 0px 0px 2px #dcebf1;
-moz-box-shadow: inset 0px 0px 2px #dcebf1;
/*Taken from http://css3generator.com/ */
text-shadow: -1px -1px 0px #5f90b0;
filter: dropshadow(color=#5f90b0, offx=-1, offy=-1);
/*End Taken from CSS3 Generator*/
color:#fff;
font-family: 'Open Sans', sans-serif;
text-transform:uppercase;
font-size:16px;
width:452px;
}
.stylishForm1 .formSubmit:hover {
/*Taken from http://www.colorzilla.com/gradient-editor CSS3 Generator*/
background: #80bde5; /* Old browsers */
background: -moz-linear-gradient(top, #80bde5 0%, #78b3db 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80bde5), color-stop(100%,#78b3db)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #80bde5 0%,#78b3db 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #80bde5 0%,#78b3db 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #80bde5 0%,#78b3db 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80bde5', endColorstr='#78b3db',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #80bde5 0%,#78b3db 100%); /* W3C */
/*End Taken from CSS3 Generator*/
cursor:pointer;
} |
[/codesyntax]
Hope you enjoyed the tutorial, and thanks for reading.
