Today I’ll be showing you how You can create a really nice contact form in photoshop. Free PSD file is also included.

What will be needed in this tutorial?

• Human icon
• Email icon
• Telephone icon
• Message icon

Step 1. Creating our document

First step will be creating our new document in photoshop. Go to File -> New and the set width and height for our project.

Step 2. Background

Set the foreground color to #6a86a5 and background color to #46607e. Take Gradient tool and set gradient type to radial. Draw a line from top to bottom starting above ur project.

Go to Filter -> Noise -> Add noise and set Amount for 2%, Gaussian and Monochromatic.

Create new layer. Press “D” on the keyboard which reset the colors for black and white and go to Filter -> Render -> Clouds. Now go to Filter -> Disort -> Ocean Ripple and set the Ripple Size for 13 and Ripple Magnitude for 9. Press OK and go to Filter -> Blur -> Motion blur. Set angle to 90 and distance for 999. The last thing to do will be setting the Blend Mode to Overlay.

Your background can be a little different becouse of clouds. They’re randomly generated so don’t worry about it. you can always take the step back and generate different clouds.

Step 3. Creating guides for our contact form

In my form every input fields has 400px of width and 50px of height. Only textarea has 250px of height. Now it’s time to create some grids which will hold our contact form in place. If you want Your own sizes then You can skip this and go directly to Step 4.

Go to View -> New Guide and add a couple of guides.

Horizontal:

• 100px
• 150px
• 200px
• 250px
• 300px
• 350px
• 400px
• 450px
• 700px
• 730px
• 780px

Vertical:

• 200px
• 250px
• 450px
• 600px

Step 4. Adding input fields

Get Rounded Rectangle Tool, set the radius to 6px and draw input fields. Make sure they are on the different layers

Go to blending option for one of the input fields and set as below. For rest You do the same. you can right click on your layer name and choose Copy Layer Style and just paste it on the others.

And now set the blending for the first input fields which will be our hover state

Now you effect should be similar to this

Step 5. Adding icons in input fields

It’s time to add some icons. Place them on the left side of the inputs. Make sure they’re isn’t to big. To change the size go to Edit -> Free Transform. When you resing remeber to hold Your shift key to save good proportions. Mine icons have width from 27px to 32px. Of course You can make them bigger or smaller, it’s up to You. After You added them go to Image -> Adjustments -> Desaturate. Repeat this for every icon.

Step 6. Adding labels

Take your text tool and add some text for labels. Font I used is Museo Slab, about 17px.

Now go to blending options and set as below

You should have something like this

Step 7. Send button

Last thing to do will be adding our send button. Get Rounded Rectangle Tool with 6px radius and draw a shape. Set opacity for 50%.

Go to blending Options

Now just add some text to the button. I used Museo Slab, 18px. Give it a little bit od drop shadow

Now your button should look like this

Step 8. Additional things

A little trick for those who want change the color of the background to whatever You want in really easy way. First thing to do will be opening Adjustments panel. to do this go to Window -> Adjustments. On your layers go to the background and the click on Hue/Saturation on adjustments panel.

Now you should have something like this

Right click on the Hue/Saturation layer and choose Create Clipping Mask. Now all you have to is is just check Colorize and move the sliders to get the color You want.

Here is a couple of examples

Finished!

And here it is. You just created really nice contact form in photoshop.

Hope You enjoyed and learnt something useful.

You can download a PSD file below