Contact! 30 Case Studies in Contact Form Design

by Scott on July 17, 2009 · 2 comments

in Featured, Showcase, Web Design

Think about it: your contact page is what many prospective clients will be looking as they debate whether or not to get in touch with you. It may be your last chance to make a good impression!

But contact pages are where things can get a little sloppy sometimes–especially if you use a contact form. A poorly designed or generic-looking contact form can create a negative impression, especially if the form look clashes with your carefully constructed design.

Contact form design may be as simple or as elaborate as you like, in keeping with the style of your site. Just make sure the form is seamlessly integrated, both visually and textually, with everything else.

Here are 30 examples of contact forms done right. There is something to be learned from each these about creative messaging and elegant design.

Christian Sparrow delivers a contact page that is simply stunning, down to the moving shadows on the drifting clouds. The hand-drawn form fits perfectly. christiansparrow Contact! 30 Case Studies in Contact Form Design

Stephen Reid definitely knows how to integrate his contact form with his site design. stephenreiddesign Contact! 30 Case Studies in Contact Form Design

Shylands goes all lower case and gives irregular edges to the boxes. It’s an inviting look. shylands Contact! 30 Case Studies in Contact Form Design

Finch (Francisco Inchauste) uses compelling text design to deliver a compelling message. Brilliant. getfinch Contact! 30 Case Studies in Contact Form Design

The Fourth Star opts for a simple and neat contact form, and uses text to invite a response. “What Inspires You?” and the default “Just saying hi!” in the subject box encourage conversation. thefourthstar Contact! 30 Case Studies in Contact Form Design

Blank Habit sends an inviting message while making great use of font, and also announces his availability for work–a powerful combination. blankhabit Contact! 30 Case Studies in Contact Form Design

Each page on Sean Geng’s site is it’s own little oasis of information set against the backdrop of space. The big drifting envelope that moves on hover makes this page’s purpose clear.seangeng Contact! 30 Case Studies in Contact Form Design

Chris Ansari makes no mistakes. This form is as simple as they come, yet still shows a fine designer’s hand. christoperansari Contact! 30 Case Studies in Contact Form Design

In Sojourn has an elegant form that shows just how much can be done with size, placement and background color of entry fields. insojourn Contact! 30 Case Studies in Contact Form Design

Just two words in the right font make Daniel Oliver’s form a winner. The bold call to action is friendly and simple–makes me want to contact Dan!danieloliver Contact! 30 Case Studies in Contact Form Design

Marcie Braden has a beautiful portfolio site with striking color and an unusual arrangement of elements. Why not place a contact form at the top of the page? marciebraden Contact! 30 Case Studies in Contact Form Design

Neoteric Design uses a map not just to convey information but as a nice design element, with the map grid balancing the block layout of the form. neotericdesign Contact! 30 Case Studies in Contact Form Design

Spoon Graphics surrounds it’s simple form with some super-friendly, super-casual messaging. Nice set of icons too, an increasingly important part of any contact page. spoongraphics Contact! 30 Case Studies in Contact Form Design

Jared Christensen presents a stylish black on black look with his form, consistent with the rest of his site. Very appealing icon array as well. jaredchristensen Contact! 30 Case Studies in Contact Form Design

Mark Boulton offers a classy two-column page with lots of information, including links to a brochure and project planner. markboultondesign Contact! 30 Case Studies in Contact Form Design

Jeff Sarmiento’s white on red SAY HELLO is the perfect touch to a beautifully designed page. The flickr images give it an inviting and personal feel as well. jeffsarmiento Contact! 30 Case Studies in Contact Form Design

Johnston North’s contact form is rich in design elements and information. The message is both a casual welcome and a call to action, supported nicely by the hand-drawn touches. He makes a statement with his choice of text links rather than icons for his social media. johnstonnorth Contact! 30 Case Studies in Contact Form Design

Chris Christian achieves design ends with a bit of humor, rightly highlighting the inane nature of standard form text. chrischristian Contact! 30 Case Studies in Contact Form Design

Ali Felski encourages visitors to contact her with a very simple contact form set within the elegant overall design of her portfolio site. That submit button is hard to resist.alifelski Contact! 30 Case Studies in Contact Form Design

Nice use of font and colors, 84 Colors! I like the many contact options including prominent Skype ID. 84colors Contact! 30 Case Studies in Contact Form Design

East 13th relies on strong contrasts and some nifty social icons. The comma after “Contact” kind of bugs me though. east13th Contact! 30 Case Studies in Contact Form Design

At Digital Base the contact form is very nicely integrated into the larger whole. The repeated use of the logo in contrasting, muted colors gives a very professional look. digitalbase Contact! 30 Case Studies in Contact Form Design

Helen Guttridge creates an artsy page built around a simple form that asks, how can I help you?helenguttridge2 Contact! 30 Case Studies in Contact Form Design


Olof Lonnroth gets all the details right in this simple contact form. The stamp graphic makes it great. oloflonnroth Contact! 30 Case Studies in Contact Form Design

Creative Leaves gives us a breezy and elegant contact page, with a little mini-resume on the side. And another stamp!creativeleaves Contact! 30 Case Studies in Contact Form Design

MHebert Design reminds us that you don’t need an elaborate contact page to look good, just a very simple form perfectly placed. mhebertdesign Contact! 30 Case Studies in Contact Form Design

Digo Art spreads the from fields horizontally across the page. digoart Contact! 30 Case Studies in Contact Form Design

Rob Morris nails the contact page, just like everything else on his Digital Mash site. Many great features here, and there it is: the form. digitalmash Contact! 30 Case Studies in Contact Form Design

Bold graphic elements make Jenny Chung’s IJC Design contact page a stunner. ijcdesign Contact! 30 Case Studies in Contact Form Design

Text, color, graphics–Guilherme Neumann has it all. This is just a beautifully designed page. Top honors!guilhermeneumann Contact! 30 Case Studies in Contact Form Design

OK, lessons learned: contact pages are important! And there are all kinds of great ways to incorporate contact forms in ways that enhance your overall site design.

Just watch your spelling so your contact FORM doesn’t look like this:misspell Contact! 30 Case Studies in Contact Form DesignAnd try to avoid this at all costs!: broken Contact! 30 Case Studies in Contact Form Design

Spread the Love:
  • Digg
  • StumbleUpon
  • del.icio.us
  • Design Float
  • Reddit
  • Propeller
  • TwitThis

{ 2 comments… read them below or add one }

Austin Used Cars May 14, 2010 at 3:45 pm

Neoteric does a good job to incorporate impressive functionality without losing their designs features.

Bronx Car Attorney June 2, 2010 at 3:57 pm

Excellent inspiration from these sites. It’s nice to see different ideas and creativity on these contact pages.

Leave a Comment

Previous post:

Next post: