• Articles and Tutorials
• Contact

Retro contact form with CSS

As you might have noticed on my blog, I have been doing a lot of css/html designs lately, well its not like I stopped playing with photoshop, but Im taking a break and trying to motivate myself with other sources.

So what we have been doing today is making a retro styled html contact form like you can see below, you can also download the html source files below.

Size: 314kb
Format: Photoshop psd file.

Now for all of you who also want to learn something here and not only use what I made (even though thats also okay), but here is a small tutorial on how to make this retro styled contact form with html and css styles.

First the retro white box is just one big image, you can download it below, just right click and save on your desktop.

I made it in photoshop, im not going through the steps on how I made it, you can watch some of my photoshop tutorials, and I will promise you, you will learn how to do it.

Now we need two files, an html file to contain all the html code, and a styles sheet file to control most design and sizes etc.

So here is the source code for the html file

    

        

            

                
Name:
                

            
            

                
Email:
                

            
            

                
Message:
                

            
            

            	

            
        
    

And the Css code

body {
background-color:#80d7ff;
font-size:120%;
}
.textbox_outer {
padding-top: 230px; padding-left:150px;
}
.box_wrapper {
background-image:url(imgs/bg.jpg); background-position:center; background-repeat:no-repeat;
width:650px; height:597px; margin:auto; margin-top: 70px;
}
textarea {
font-family: "Lucida Grande",Verdana,sans-serif;
font-size:18px;
border: 1px solid #999999;
width:270px; height:100px;
background-color:#80d7ff;
overflow: auto;
}
input {
font-family: "Lucida Grande",Verdana,sans-serif;
font-size:18px;
border: 1px solid #999999;
}
input.textboxes {
width:270px;
background-color:#80d7ff; 
}
input.btn {
color:#ff00c0;
border: 1px solid #999999;
}

Save the files, remember to keep the image file in a seperate folder named imgs, and if you can get it to work, try downloading the project file at the top of the post.