 |
Contact forms are the best way to attract visitors and to interact with them. A creatively designed and inspirational contact form is the most appropriate way to say welcome to your visitors and invite them to use your services. A comprehensive and stylish form persuades the visitors and helps build their confidence in the company behind the site.
We have gathered some interesting examples of contact forms for your inspiration. Please notice that some of them are nice, but hardly usable. The idea of this article was to present you some ideas, not necessarily the execution of the ideas.
Creative Contact Forms
Gpacheco’s contact form is both visually captivating and creatively styled to fit with the natural look and hand carved elements that accompany the rest of the site. Though it may not necessarily be clear to some users where the text box for the form is, given its lack of highlighted edges, it gives the user the width of the site to compose their thoughts freely into the sand. The padding around the borders of the name and email address boxes could stand to be a bit wider as it feels tight and some letters can extend over the border image creating a slightly, visually uncomfortable presentation.
Lion Ways uses a postcard design for their contact form which stylistically works really well on a site where each page is based around cards/books/etc. It is a very nice and subtle form that really blends well with the site overall. Clean and basic.
Beakable form is very creative and looks really nice, though there are some usability issues that could stand to be addressed. Adding boxes around the space for the name and email address would make those areas better stand out as editable. The submit button could use more attention drawn to it so that it is more easily recognizable that it is the submit button.
fCtm-Argentina has a wonderfully unique and creative design for their contact form, styling it as a boarding pass to fit with the tone of this travel based business site. The form works both in style and function, however, the comment box feels a bit tight with the settings as they are, and it could use a bit more padding around the edges.
Matt Dempsey’s site has a stylish contact form setup with brushstroke styled text boxes which all work well enough. However the right edges begin scrolling a little late for those with long names or email addresses, and readability becomes a slight issue. Again, this will more than likely not come into play that often, but it could.
Ctrl+N contact form perfectly matches the retro, side scrolling design of the site. The titles and boxes could use a bit more padding and the message box should change color like the others to denote that it is active.
Nineteeneightyfour is the web design portfolio of Martyn Palmer which has a stylish contact form that drops down into place on the page when you click on the contact button. Here the button is made up like a post it note to match the overall feel of the site. With various other contact information scattered about the area and scribbled on scraps of paper, the contact form itself could have been styled more to fit among the other hand drawn elements a little more.
Tony-Johnson has an interesting contact form set on his site as well. Styled as a portfolio case, the contact form is compactly placed in the borders of the case just fine. However, if the user has a comment or query to submit through the contact form that is of any substantial length, the text box does not scroll to allow them to see what they are typing below the cut. This almost discourages any lengthy or in-depth sort of contact in this case.
Try Triangle’s contact form is both creative and wonderfully implemented. The spacing and scrolling all fit well within the small spaces provided. Not feeling cramped at all, even in such close quarters, which is not always an easy task to pull of design wise. However they have done well integrating it into the site with imagination and style. Though one area where the size does feel a bit limiting is in the main text box on the contact form. It scrolls so that you can follow what you are saying, but only after a couple of lines so that you are not seeing much of your train of thought behind you as you type.
Bio-Bak has an extremely creative, if not somewhat cumbersome contact form. The mouse styling makes some of the site difficult to click on, and the interactive elements added to the contact form are only compounded by this design choice. And while the extra steps for entering your e-mail information are creative, they can ultimately serve as a detractor for some users who are not interested in playing along.
Artcore-Illustrations is another site where they opted for a simple form that does not go over the top with bells or whistles. It simply, and in subtle fashion with the rest of the site, accomplishes its purpose. The padding and spacing all fit comfortably into their boxes, while the transitions to indicate your selected box smoothly highlight the location of your cursor for the user.
Indofolio has done a wonderful job incorporating their style and site tone into the contact form that they use. While there is plenty of space in the boxes for entering your information, if the e-mail address or name are too long then the right side of the box will cut off the last letter you are typing so that you cannot see what is there. The padding on the left side of the main text box could also be slightly adjusted, if only for the first line of text which goes over farther than the preceding lines of text.
Lunalunerafestival is another site that creatively styled the contact form to be set up like a letter being written. The text boxes for the name and email address, though at an odd angle, remained completely readable and within the borders of the box. The large area that is available for the message box provides an inviting landscape for the users to share and discuss whatever they have to say. Comfortably padded and all around well done.
Yodaa has a stylish looking contact form which has uneven information boxes to help fit with the fun animated feel of the site. However, these edges of the boxes do not line up correctly with the text inside, so not only does some of the text distractingly break outside of the box interfering with readability, it feels like a major oversight on a site dedicated to usability in design.
Umquarto has a beautiful and simple contact form, from complete form presentation to the transitions highlighting cursor location easily and stylishly for the benefit of the user. Everything feels concrete and firmly in its place with even and visually pleasing padding and spacing throughout the form.
Xruiz has a nice hand drawn feel to the contact form elements that really help tie it into the rest of the design. However the padding at the top of each of the text boxes could stand to be adjusted. It is only somewhat noticeably off in the entry boxes for your name and email, as the info hovers closer to the top of the box than it does the bottom. But in the message box, it is majorly off, and the top line nearly rests on the top edge of the box.
Qwert City is another site that uses the look of a postcard for the design of their contact form, in a colorful, if not overly so way. For instance the light blue color of the text could stand to be bit softer to blend better with the other elements of the form. And while there is a fairly decent sized text box for whatever message you have to leave, should the message be too long, the box does not scroll to allow the user to see what they have written after a certain point.
Created 201 Studios has a creative and very unique contact form on their site, that completely flows with the style of the site and does not break from the angular presentation of the other pages. And once again, even with this angled effect, the data entered does not feel out of place or uncomfortably squeezed into the design. Overall, it is brilliantly crafted.
Brian Handley Design has a whimsically illustrated contact form set up to match the rest of the site perfectly. The implementation of the form is nearly flawless as well, however, it is a relatively small message box compared to most, and once again we find that the box does not scroll to keep up with the user at all, and can prevent some users from leaving their comments or contacting the Brian via the form.
Swiths contact form is another example where they opted for a simpler, understated approach. The padding is offset so that the text in the information boxes is not centered, but more rests towards the bottom of the boxes and this does not feel visually uncomfortable in any way. However the kerning on the font used can make the words feel a bit spread out and unevenly spaced. Though that is the only part of the form that feels off at all.
Marcol is another site that has stylistically pulled off their contact form, however, usability wise it could use a slight tweak or two on the padding for the left and right borders of the information boxes. Some of the text entered in these boxes has a tendency to bleed over the borders which is somewhat unpleasing to the eye. The main message box is fine with its padding, but the others, not so much.
Bert Timmermans contact form is sleek and professional, which compliments the tone and feel that the rest of the site imparts nicely. The padding and scrolling all appear to be in order as well, which is what you would expect given the rest of the site. Cleanly designed and implemented.
Christian Sparrow’s contact form is hardly the most creative element on the site, but it stylishly fits so well with the rest of this creative little gem that we had to showcase it here. All aspects of the contact form work brilliantly, and the floating clouds that pass by in no way interfere with the readability of the form. The only area that could even be suggested for improvement in our eyes would be that the text that acts as an indicator for what should go in the box gets automatically highlighted and erased when you navigate there and begin typing.
EletricPulp has a stylish contact form with a subtle textured background that accompanies it, nicely tying it into the rest of the site’s design. The text indicators seem a bit redundant given that they are not only listed boldly outside the text boxes, but they are also echoed right beneath these headers in the boxes themselves.
Ryan McMaster’s contact form is actually a little bit more in depth than most that we have featured. Here he has included areas for the user to include their reason for the message and even allows a space for an expected budget should this be used by a potential client. Once again the indicators stay in the box when you click there and have to be manually selected and deleted. Not a big deal, but a step that can slow some users down.
August Creative Agency has an extremely unobtrusive contact form on their site that is cleanly incorporated into the picturesque background of the site. Once again, a very basic presentation and contact form setup, but as usual, it works well with the overall site rather than clashing with it in any way.
We Love Icons has a gorgeously carved contact form for their site, covering the standard info that most ask for. The compact and cleanly presented form is as visually comfortable as it is sharply implemented, complimenting the rest of the design wonderfully.
Kev Adamson has a contact form on the site that feels squeezed in a bit among various other elements, however, enough care has been put into the form itself so that none of the other areas or elements attached to it feel that way. The fonts used are petite enough that they fit nicely among the grunge ridden form, which matches with the rest of the site well.
I love Colors has a well designed and stylish contact form to match the rest of their site. The simple highlights around the active text box, along with the evenly padded borders give the form a very sleek and comfortable appearance. With plenty of room and satisfactory scrolling, the form warmly invites feedback from the site’s users.
Ashes And Milk have a stylishly designed contact form, neatly tucked away in a box. The simple nature of the form works nicely with the rest of the site, however in the main text box when you enter enough text for it to scroll, the appearance of the scroll bar grabs traces of the text behind it and keeps it there the whole time you continue down the message box.
Fabric Adecaricaturas has a contact form that has as much personality in it as the rest of the site. The text boxes are subtly styled and comfortably padded, without any visual distractions or discomfort caused by them.
Giraffe has a colorful and welcoming contact form that fits with the atmosphere and ambiance that they have established through their restaurants and their accompanying website. The form, boxes, and the fonts are all bold and highly visible, unlike some of the smaller, subtler forms that we have seen.
Fundolospaltos has a stylish and understated design approach to their site’s contact form. Though nicely executed, the text boxes, especially the message box could use a little bit of extra padding around all of the edges. The text feels slightly squeezed in the way it is.
Harmony Republic has a simple contact form on their site which is styled with hand-drawn line elements for the text boxes which work nicely to accentuate the entry points. The spacing and padding are all set at comfortable levels, and do not include any breaks that detract from the simple beauty of the design.
Trendy Web Design’s contact form is another form where the style is subtle, but complimentary to the rest of the site so it works well. However the padding on the sides of the text boxes could use some minor adjustments as the text feels pressed against the edges as is. The message box also could stand some adjustments to the padding at the top and bottom as well allowing the text more room to breathe as it were.
Red Bull Soapbox Racer has a appropriately styled contact form to fit with the irreverent site it is attached to without compromising the functionality of the form in any way. The site takes over your sound upon entry and there is sound that accompanies certain elements of the form which seems slightly unnecessary. Though the form is obviously not the draw or focus of the site, it does not suffer or feel lacking in any way in such a unique and whimsical site.
Z-Index Media has a very unique and creatively styled contact form that is set up like a letter being placed into an envelope. The padding is hardly an issue with the expansive area provided to the user to enter their information and message, but even when pushed to the edges, the text remains comfortably spaced. The return to sender element that gets added to the outside of the envelope when you enter your name and email address is also both stylish and creative.
Aterlierdetour has a stylishly creative contact form that is befitting of the site it is carved out of. The non-symmetrical boxes have the grungy hand drawn appeal, while completely containing the text and not having any of it pouring over the edges. The padding in the main text box could stand to be tweaked around the top and the right edges. In these two areas the text feels pushed too close to the edges for complete comfort.
Danielhellier’s contact form is a comprehensive and boldly styled, which compliments the site well. However, after taking the time to craft such an inclusive and information gathering form, the navigational element that gets the user to the page, can also problematically land over the top of the submit button for the form negating the entire form right then and there.
Enviramedia has a rather large contact form that fits with the bright, pastel illustrated website it is a part of. The padding leaves everything feeling roomy and not at all forced in. Overall it is a very inviting contact form that begs for conversational messages from their users.
Alexandru Cohaniuc’s large and bold contact form is simply textured and styled to go hand in hand with the other site elements and inclusions. The padding and scrolling are set up comfortably and not in any way disruptive. Simple, bold, and eye catching.
Five cent stand returns us to the simpler, yet stylish contact forms, where subtle styling is key and the understated color and textures do not overload or complicate the issue at all. The padding in the message box is a little tight on either side, especially with so much room left at the top, it just felt like things were a bit unnecessarily squeezed into place rather than just organically fitting.
Social Snack has a tiny little contact form tucked away down at the bottom of their site, that not only does not seem that inviting to large messages being left, but the scroll bar in the small text box grabs fragments of the text behind it, obtrusively carrying these fragments down the rest of the text box. The spaces provided for the name and the email address are comfortably padded and have no interference that complicates their view.
World-Arcade has an extremely simple contact form that pops up when you click on the contact link. The brightly colored box with the animated robot fit with the overall site theme and presentation. The spaces provided are all well padded and comfortably set up. Overall, it is very simple, but effectively and invitingly crafted.
Hybridworks has a flashy site overall, but the contact form, while sleek and aided by the same sound effects that accompany the rest of the site feels a bit out of place with main presentation of the site. Also, in the main message box, the padding on the left and right side are not even to the point where it feels like something is slightly off. A minor adjustment could straighten that out and make it that much more comfortable on the users visually.
Carsonified has a colorful and bold contact form with large text boxes to fit hand in hand with the feel of the rest of the site design. With such large boxes, the padding seems like it would easily not be an issue, however in the message box the padding on the right side is not set equally with the left and the text can feel pressed right against the edge. There are also fragments that are captured behind the scroll bar when it appears in the box that remain attached to it.
(ik)