Unique Contact Forms All Web Designers Should Check Out

You may be surprised to know the average contact form is responsible for converting a mere 1 percent of visitors, a minuscule and nearly insignificant number. Not only is it uninspiring, but it also shows that contact forms have a lot of latent issues, many of which likely stem from layout and design failures.

It’s akin to what happens on a website or web portal when the design is less than stellar. People tend to move away from the elements that matter most, bounce rates skyrocket and engagement is nothing short of terrible.

It encompasses more than just the user experience — it’s the entire package, from general flow and interactions to overall design, such as themes or colors. Choose the wrong type of element or setup, and you’re going to see low performance no matter how much traffic you have coming in.

But it’s not easy designing contact forms — or any forms — from scratch, so here are some successful examples you can take inspiration from.

1. Multi-Step Forms

With most contact forms or contact pages, you see all the fields up front. There’s an empty box for sharing your name, job title, email and maybe even a message or comment. If the form is any longer than that, then you’re throwing a lot at your audience.

Long or short, no one likes to stare at a page full of blank fields or boxes. Why not try multi-step, animated form fields instead?

What are they? Basically, it’s a single or small selection of fields that open up new ones after being filled out. The entire structure is layered, like an onion. Peel back the first layer,and you get another. Venture Harbour has seen their conversion rates jump to as high as 300 percent after implementing multi-step contact forms.

An example of this in the real world can be found on Uber’s contact page. You start by including some simple information, and the form walks you through the driver signup process whether you have a car, or don’t.

2. Traditional

Of course, there’s always the opportunity to go with something more traditional. If you do, however, keep it as simple as possible. Ask for only what you need and nothing more.

Headlamp Creative’s contact form — tucked away in the header of their site — is a great example. It drops down to reveal three fields: name, email, and message.

3. Skip Forms Altogether

Infusionsoft skips the bread and gets right to the meat of the sandwich. After selecting the option to contact a representative, a sub-page appears offering you the option to chat live with a member of the team either online or by calling in. In fact, there’s a chat window and icon at all times in the lower right-hand corner.

Sometimes, it’s best to just forego the traditional field format entirely and implement something, well, different.

4. Reactive Design

Pay a visit to TopTal’s contact page and you’ll notice something interesting. The first option — to contact via a form — is already available, so yes, there is a form on the page. However, to the right of that form is an interactive list. Choose any one of the options in the list and you’re provided with more detailed contact info for the related method.

For example, you can email support, press, mail letters and packages, call over the phone, or just fill out the initial form. It works because it honors a reactive or personalized design where the user(s) can choose how to proceed.

5. Go Fullscreen

Distraction-free page design is nothing new, especially for creatives. When composing emails or writing articles and content, various tools will eliminate on-screen distractions by essentially fading out all the excess noise.

Concept designer Mary Lou from Codrops has created a fullscreen form design that does exactly that. It blocks out all the excess noise and background elements and puts the focus on a single form field. It’s a great idea because it not only keeps things simple but also helps audiences focus on what you want completed — the form.

6. First Contact

Generally, your landing page and contact pages are separate. Envato had other plans and, it turns out, things work out quite well that way.

Because their company has a large scope — and there are several places to go — the designers felt it was best to help people find the most relevant portal. Essentially, you choose what you need and plan to do in the future, and the menu will direct you to the appropriate portal — be it Envato market, elements, tutorials or one of the other sections.

It’s less about collecting personal information from the visitor(s) and more about helping them find the right areas of the site. Although, it still uses a similar design to all other contact forms.

7. In the Footer

One thing you don’t see often is the contact page hidden below the fold — way below the fold, in fact. We’re talking about placing it in the footer of your site. It works great because the form remains visible on every page, and it’s also out of the way, so as to be unobtrusive. Of course, there’s the argument to be made that it ends up too hidden, but that’s a concern only if your visitors aren’t viewing the full breadth of your pages and site.

To see an example, head on over to Creative Design Architects and scroll down to their footer.

8. Just Speak

Pay a visit to Kitchen Prague’s contact page. Ignore the beautiful design, the slick elements, the captivating animations and the flat, yet stylish colors. They’re all great, but what really stands out is how they handled their contact form. There are no traditional fields, per se. Instead, you simply write.

In the “Dear Kitchen” box you just start writing and when you’re done click send. There are no hidden menus after that either. Just a message: “If you have provided an email address, we will get back to you soon.”

It works on a sort of honor system, assuming anyone reaching out will provide their email address. It also makes users feel empowered. They’re entering only the comments and information they wish to share.

9. No Forms, Just Options

Infusionsoft’s formless example — listed above — incorporates live chat and online communication. Subsign’s formless page, however, leaves the decision up to the visitor.

If you so desire, you can contact a representative over the phone, through email or even in person. Of course, there are the usual social links in the footer, so people can reach out that way, as well.

10. Sliding Form

Whoa Nelly Catering’s contact form is technically nestled in the page’s footer. But scroll halfway down the landing page and you’ll see a button that serves as an anchor — click it, and it will take you to the form.

The form itself is nothing special and includes just a few major fields. What makes the design stand-out, however, is how they managed to simultaneously hide the form at the bottom of the page but still make it relevant through the anchor link. It’s not right in your face when you land on their page, but it’s not so hidden you’ll never find it, either.

11. Keep It Warm

Sometimes, you can’t help the length and it ends up expansive if not overwhelming. That’s the case with Choice Screening’s contact page.

What makes it stand out, even with the length, is the human language used within their copy. They found a way to make the content interesting, relevant and more importantly, warm and friendly. It doesn’t order you to “provide your email now” but instead gently prompts you to reach out and share.

It’s in stark contrast to the bleached contact forms — almost devoid of life — you usually see that urge you to share your address, email and payment details. The takeaway here is if you keep things friendly, people will stick around for the rest — what some might even call the lifeless parts.

12. Call to Action

Marketers love to boast about the “call to action” that every website, page, and business needs. It drives your customers to action and implores them to follow through with, well, whatever it is you want them to do.

In the age of minimalist designs, we seem to be moving away from the use of the traditional call to action. In the past, you’d find it plastered everywhere. Today, it’s not even included on some sites. But no matter how you feel about the call to action, it’s still necessary.

Pixpa does a great job of incorporating it on their contact page, where the call to action is right at the top. The form is there, located just below, with everything you’d expect. It works well and is designed well, but the call to action gives it the boldness it so needs.

13. Mobile-Friendly

Survicate’s contact form looks excellent on a larger display such as a desktop or laptop, and while that’s certainly important, mobile is also a big deal. Good for Survicate then that their site looks just as wondrous on a mobile device.

The buttons, fonts, and form fields are all simple, large and easy to interact with, which makes them very mobile-friendly. The rest of the page design just adds to that, including the call to action: “Let’s make something awesome together.”

Yes, let’s.

14. Providing Support

Zendesk’s contact form is nothing special, at least when it comes to design. It’s minimal, asks for exactly what they need and is incredibly easy to understand and complete. Just below it — however, you’ll find a product support button. That is what truly elevates Zendesk’s form to greatness. Although they seem like two separate elements, they work together to direct visitors to the exact feedback channel(s) they need.

Want to reach out? You got it. Need help with something or just want to talk to someone directly? It’s right there, too.

15. Virtual Assistant

You’ve surely heard of Alexa or Siri by now, yes? Medium, the popular content curation platform, uses something similar to these virtual assistants on their contact page.

Pay it a visit and immediately you’ll see a field, with a rather simple question.

“How can we help?”

It’s not traditional at all, but it works. It looks great, too!

16. Deep Integration

Skincare and makeup brand Glossier has a rather simplistic contact page. It offers some advice and allows you to share your email to get updates if you so desire. At a glance, it really doesn’t look like anything special.

It is all integrated, however, with the company’s support team called the g.TEAM. Every question, suggestion and general comment you send to the team will receive a reply within a reasonable amount of time. It helps show that sometimes, it’s also about what’s hidden behind the form and required fields. Even if your contact form is getting some great conversion ratings, you need someone or something on the other side to make use of what’s being sent your way.

Create a “Winning” Design

Everything on your website should be well-crafted and designed with care, including your contact page. But, you could argue that the contact forms you employ are directly responsible for the conversion rates you see, at least when it comes to your online portals. The better designed and more intuitive your contact forms are, the more feedback you’ll get.

So, if you take only one thing away from this entire piece, let it be some inspiration for creating a unique, engaging and successful contact page or web form.