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.
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.
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.
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.
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.
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.
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.
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!
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!
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.
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.
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.
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.
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!
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.
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.
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.
The beauty of this contact form is in the hand-written typography – somehow it is very welcoming!
This contact page is like a page from the site owner’s notebook, with lots of sketches on a grid paper texture background.
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.
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.
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!
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.