Inspirational and Effective Contact Us Pages in Web Design

One of the most important aspects of web design, along with navigation, is a user-friendly contact form.

If a visitor has bothered to pull up your contact details, the least any website owner can do is make sure they are encouraged to complete and send the form – after all, that visitor could end up being your best client! Here is a collection of some amazingly creative and user-friendly contact forms for your inspiration.

Contact Forms

Paravel

This 3-man agency uses the same, beautiful illustration on their contact form page that can be found throughout the site. Everything on this page is very clean, set on a white background with simple gray borders denoting the input fields.

Paravel

Pixel Wrapped

A small design studio, Pixel Wrapped use a vector illustration in which the contact form is the paper being used in an old-fashioned typewriter. A stylised pinboard displays the email address, Skype user name and phone number of the studio in a hand-written font.

Pixel Wrapped

Ultranoir

This contact form is a cool example of retro design. Presented in black and white, with a red splash, declaring that they guarantee pleasure (or satisfaction I guess), and are available 24/7.

Ultranoir

Guillaume Pacheco

This designer and photographer has a beautiful portfolio that is almost completely made up of montage imagery. Throughout the site he uses different backgrounds and textures, mainly organic such as grass, paper, etc. The contact form is on a sand texture and the title and input fields have the effect of being etched into the sand – a pretty unique approach.

Guillaume Pacheco

Ashes & Milk

This site is a gallery of organic designs… this is part of their About section: “Our collection is a boutique of texture, organic materials, and nuances of white, brown, and gray. Each piece is made by hand – an original work of art. Created by one person, designed for one person” Their contact page is a few overhead photo images of some wooden items with labels inside a trough for the contact part. This is the theme of presentation throughout the site.

Ashes & Milk

Point of Entry Consulting

This has to be about the busiest contact page I have ever seen – and in fact, the contact form itself is a tiny part of the page – it is the post-it note on the pinboard. There is such a lot of information on this page, but it is a fun page to look around.

Point of Entry Consulting

Lionways

A whitewashed wooden texture background sports a business card, a cash receipt that is in fact the site menu, an ink pen and three vintage postcards, the top one of which is the contact form. Notice the postmark that shows 1923!

Lionways

Tony Johnson

This designer and developer reflects his skills through his contact form, using the curly brackets used in writing CSS. A nice idea – but he is updating his site at the time of writing, so this form could change… I’m not sure he can better it, but we’ll see!

Tony Johnson

IndoFolio

IndoFolio is the portfolio of Indian designer and developer Gopal Raju. He uses the beauty and traditions of his home country to beautifully illustrate his whole site, including the contact page.

IndoFolio

Music City Unsigned

This is a publicity site for unsigned musicians. The site, including the contact page, is presented in a grungy, montage style, using many textures and hand-drawn images.

Music City Unsigned

Code Quest

Code Quest is a Ruby on Rails and iOS development studio. Their contact page uses a grungy background texture, some hand-written typography and has a totally gray and pink color scheme.

Code Quest

Digital Base

The hero area of this contact page has an image of a message in a bottle. It fits in very well with the dark color scheme of the site.

Digital Base

Sormen Pills

This Spanish frontend developer uses child-like illustrations throughout the site, including on the contact page. The contact message box is slightly offset from the border, resembling a child’s poor coloring skills!

Sormen Pills

Let’s Travel Somewhere

This travel-related site uses a topical airmail letter/postcard to display their contact details. If you press on the CTA button ‘Write Nisa’ a pop up contact form appears.

Let's Travel Somewhere

Brown’s Court Bakery

A contact page presented in shades of brown that give it a vintage feel, with an image of a vintage bakery delivery bicycle.

Brown's Court Bakery

Subsign

This creative agency uses icons to place a lot of information in a minimal style. A very minimal contact form in the middle of the page uses very little space, and the hexagonal icons at the bottom provide all other means of contact.

Subsign

FatFish

The beauty of this contact form is in the hand-written typography – somehow it is very welcoming!

FatFish

Mario Petrone

This contact page is like a page from the site owner’s notebook, with lots of sketches on a grid paper texture background.

Mario Petrone

Built By Buffalo

This contact page is similar to a previous one in this list. They have used icons to keep their contact page very minimal in design, using a totally monochrome color scheme.

Built By Buffalo

Alexarts

This is the portfolio site of graphic designer Alexey Abramov. The contact pop-up form is presented in a brown and orange color scheme, and plays on coding, using If, Then, And statements.

Alexarts

Cobble Hill Digital

This collaborative digital agency uses a very William Morris-esque background design for the contact form – it is so beautiful that it almost doesn’t matter how the form itself looks!

Cobble Hill Digital

Conclusion

As you have no doubt realised, most of the above examples are portfolios or sites of those in the digital industry, and it is not by accident that they have some of the best contact forms around – they are the people who have to impress with their own site… it is their showcase and it goes a long way towards acquiring new clients. Their contact forms really need to encourage prospective clients to contact them, so it has to be straightforward and appealing.

Do you place a lot of importance on your own contact page? Do you have a unique contact form that you would like to share with us? Please leave your comments and links in the section below.

Advertisement