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.
Stephen Reid definitely knows how to integrate his contact form with his site design.
Shylands goes all lower case and gives irregular edges to the boxes. It’s an inviting look.
Finch (Francisco Inchauste) uses compelling text design to deliver a compelling message. Brilliant.
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.
Blank Habit sends an inviting message while making great use of font, and also announces his availability for work–a powerful combination.
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.
Chris Ansari makes no mistakes. This form is as simple as they come, yet still shows a fine designer’s hand.
In Sojourn has an elegant form that shows just how much can be done with size, placement and background color of entry fields.
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!
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?
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.
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.
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.
Mark Boulton offers a classy two-column page with lots of information, including links to a brochure and project planner.
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.
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.
Chris Christian achieves design ends with a bit of humor, rightly highlighting the inane nature of standard form text.
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.
Nice use of font and colors, 84 Colors! I like the many contact options including prominent Skype ID.
East 13th relies on strong contrasts and some nifty social icons. The comma after “Contact” kind of bugs me though.
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.
Helen Guttridge creates an artsy page built around a simple form that asks, how can I help you?
Olof Lonnroth gets all the details right in this simple contact form. The stamp graphic makes it great.
Creative Leaves gives us a breezy and elegant contact page, with a little mini-resume on the side. And another stamp!
MHebert Design reminds us that you don’t need an elaborate contact page to look good, just a very simple form perfectly placed.
Digo Art spreads the from fields horizontally across the page.
Rob Morris nails the contact page, just like everything else on his Digital Mash site.
Bold graphic elements make Jenny Chung’s IJC Design contact page a stunner.
Text, color, graphics–Guilherme Neumann has it all. This is just a beautifully designed page. Top honors!
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:
And try to avoid this at all costs!: 
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.
Stephen Reid definitely knows how to integrate his contact form with his site design.
Shylands goes all lower case and gives irregular edges to the boxes. It’s an inviting look.
Finch (Francisco Inchauste) uses compelling text design to deliver a compelling message. Brilliant.
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.
Blank Habit sends an inviting message while making great use of font, and also announces his availability for work–a powerful combination.
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.
Chris Ansari makes no mistakes. This form is as simple as they come, yet still shows a fine designer’s hand.
In Sojourn has an elegant form that shows just how much can be done with size, placement and background color of entry fields.
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!
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?
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.
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.
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.
Mark Boulton offers a classy two-column page with lots of information, including links to a brochure and project planner.
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.
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.
Chris Christian achieves design ends with a bit of humor, rightly highlighting the inane nature of standard form text.
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.
Nice use of font and colors, 84 Colors! I like the many contact options including prominent Skype ID.
East 13th relies on strong contrasts and some nifty social icons. The comma after “Contact” kind of bugs me though.
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.
Helen Guttridge creates an artsy page built around a simple form that asks, how can I help you?
Olof Lonnroth gets all the details right in this simple contact form. The stamp graphic makes it great.
Creative Leaves gives us a breezy and elegant contact page, with a little mini-resume on the side. And another stamp!
MHebert Design reminds us that you don’t need an elaborate contact page to look good, just a very simple form perfectly placed.
Digo Art spreads the from fields horizontally across the page.
Rob Morris nails the contact page, just like everything else on his Digital Mash site.
Bold graphic elements make Jenny Chung’s IJC Design contact page a stunner.
Text, color, graphics–Guilherme Neumann has it all. This is just a beautifully designed page. Top honors!
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:
And try to avoid this at all costs!: 
Your contents give me more creational ideas that I can possibly use on my web page too. best wp themes
ReplyDelete