Part 1: Create a beautiful contact form from scratch using Photoshop, HTML, and CSS

Forms are one of the most difficult tasks you can encounter when coding a website, well at least it was for me when I first started. Many designers do very good up until this point or get to this point and just give up on contact forms. Well if you’re one of those designers or are completely new to creating web forms have no worries. In today’s tutorial I will teach you how to create a contact form from scratch using Photoshop to design it and slicing it up for code using HTML, CSS. Part 1 of the 3 tutorials will cover the design of the contact form. Enjoy.

Things you will need:

Step 1

Open Photoshop, Create a new document 900px x 900px, background white.
Contact Form

Step 2

Now right click on the background layer>>blending options>>pattern overlay and select the pattern we’ve downloaded earlier.
Contact Form

Note: Make sure you have your guide lines turned on and the layout center. Each side left and right of the contact form is 200px and the contact form is 500px in width.

Step 3

Now Select the rounded rectangle tool and create a rectangle box. Height around 720px.
Contact Form

Now right click on the contact form layer>>blending options>>gradient overlay. The left color: #b2c0c3, right color:#fff. The bottom is light blue then fades up to white.
Contact Form

Step 4

Now Select the rounded rectangle tool once again but this time we will create a rounded rectangle just for the top of our form to give it that popping out look.
Contact Form

Now right click on the layer>>blending options>>gradient overlay>>. You will see a color bar usually back and white, double click on that bar and another box should appear. For the Left color: #d6d6d6, Right color:#ffffff.
Contact Form

Now select the Bevel and Emboss option. After you’ve copy the setting below press ok.
Contact Form

Step 5

Now create a new group. Drag rounded rectangle that we’ve just created into that group. Now right click on the group folder>>Merge Group. You should now have one layer with all effect gone. Now select the blurred edge eraser tool and erase the bottoms so it blends in with our form.
Contact Form

Contact Form

Step 6

Select the type tool, font: Steiner, Size:33px and create the word contact us or any word you would like to use for your form. After you’ve created your word right click on the layer>>blending options>>Drop Shadow. Copy the settings below.
Contact Form

Now select the gradient overlay option. Left color:#d2d2d2, Right color:#ffffff.
Contact Form

Finally select the stroke option.
Contact Form

Contact Form

Step 7

Select the type tool, font: Tahoma, size:14px, color: #808080 and create the label Name. Now select the rounded rectangle tool and create a input field.
Contact Form

Right click on the input layer>>blending options>>gradient overlay. Left color:#e5e5e5, Right color:#ffffff.
Contact Form

Now select the stroke option. Color:#e5e5e5.
Contact Form

Step 8

Repeat steps 7 for the rest of the labels and input fields.
Contact Form

Step 9

Select the rounded rectangle tool once again and create a rectangle for your submit button. Now right click on the layer>>blending options>>gradient layer. Left color:#e5e5e5, Right color:#ffffff. Next select the stroke option and change the color to 1px #e5e5e5. Then press ok. Finally select the type tool, font: Tahoma, size:10px, color:#454747 and create a description for your contact form. Then you’re done!
Contact Form

Razvan Sava the author

Razvan is the founder of Webdevtuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. Contact forms are often something that gets overlooked during a new website design, when in reality the contact form is the one of the most important factors that you want the users to complete.

    Remember to always have an auto-responder when a user fills it out!

Leave a Reply