Photoshopping a Unique Contact Form

There some nice looking contact forms out there on the web, but by and large web forms are a quagmire of default-style web ugliness. This has to do, in part, because of cross-browser quirks and the difficulty of styling some form elements in certain browsers. But in truth, it’s not that difficult to style forms and it is more about designer/developer laziness than anything else.

It’s sad really, because forms are such essential parts of websites. It is on forms that you are asking for very intimate attention with your users. You have provided an area for them to communicate with the website is some way. This is always desirable and valuable. The form design should enhance this experience, not detract from it.

I think the best way to get a great form is to design it first, without thinking about the constraints of HTML & CSS. So let’s get Photoshopping!

1. Create a Background

Create a new Photoshop document the desired size of your form area. Mine is 800x600px. Double-click on your default background layer to “unlock” it.

Double-click on that layer to open up the Layer Styles dialog box, and choose a nice texture for your background.

2. Draw the Shape for the Form Area

Since we will be creating a basic contact form, we are going with a big “speech bubble” shape for the form area. You can easily draw one with the pen tool, or find a vector shape online you can copy and paste in from Illustrator as a shape layer. Here are some speech bubble shapes I found on Shutterstock (subscription required).

Here is the shape now in our document:

Let’s add some Layer Styles to the shape to spice it up a bit:

For even more style, let’s give the speech bubble a shadow. Create a new layer underneath the speech bubble. Command-click the speech bubble layer creating a selection from it’s shape. Then fill the section on your new layer with black. Now you have a black shape the exact shape of the speech bubble underneath the real speech bubble. Apply a little Gaussian Blur and we have a shadow.

This shadow looks a little flat, so let’s liven it up a bit. With your shadow layer selected, use the “Warp” transform (under the Edit menu). You will get a 3×3 grid of handles you can use to manipulate the shape of the shadow. Here I drug the bottom left handle a bit to the upper right and the top left handle down and right a bit. Makes the shape look a bit more three dimensional. I also dropped the opacity of the shadow down a bit.

3. Adding Text

This is a contact form, so let’s let it be known! Add the text “CONTACT ME!” below the bubble. Here I used a fairly large font size and the font Agenda Black.

More layer styles! I applied a patterned stroke (same pattern as the background), a gradient and a bit of a drop shadow.

The Form Elements

Our shape lends itself nicely to a two-column design with the left half for the shorter text fields and the right half for the larger message area. Each of the input areas is just a simple white rectangle with a slight drop shadow applied. The “label” for each form element sits on top, left-aligned.

The Submit Button

Because of the “flow” we have set up with this form, it makes the most sense to put the submit button in the lower right hand side of the form area. We are getting pretty good with layer styles at this point! Our button is just a simple rounded rectangle with a little color and a slight bevel. Let’s keep in the same Agenda font family like we have used everywhere else too.

DOWNLOAD PHOTOSHOP FILE

Making it Work…

Stay tuned! I’m going to be converting this into a real useable form for the web over on CSS-Tricks next week!