Contact forms provide your visitors with a logical next step and help you qualify leads.
An inviting layout and clear calls to action (CTAs) help convince your site visitors to reach out, but they are just the first steps toward conversion. Including a contact form on your page makes the most of that momentum, so they won’t pause (and potentially forget about you) before getting in touch.
How you design your website contact form can make all the difference in whether you capture leads. There are several different types of contact form designs to consider (you may even use more than one), and they all share some essential elements. In this guide, we’ll explore what contact forms are and how to seamlessly incorporate them on your site to get the most out of your web design.
Why contact forms matter for conversion and UX
Your contact page’s copy and visuals steadily encourage site visitors to move toward an action, and you need somewhere for that traffic to flow to. A great contact form helps you achieve your goals, with a few additional benefits.
Generate more leads
The first goal of contact page design is to invite potential leads to send you a message, schedule an appointment, or otherwise get in touch. With a form that fits seamlessly on your page, you’ll encourage them to take the first step toward becoming a customer. You can customize the details you ask for to qualify your leads more quickly, paving the way for faster response times as well.
Track inquiries
On the back end, contact form submissions end up in your email inbox or, with the right integrations, in your customer relationship management (CRM) platform. These messages include important information for you to assess and follow up on, like the inquirer’s phone number and email address, as well as any notes they wrote about their needs.
Reduce spam emails
Scammers use data scraping bots that constantly scan the internet for exploitable information, and if your email address is out in the open, it will get found eventually. A contact form places a professional layer of anonymity between you and website visitors that reduces risk without sacrificing your contactability.
How to create a contact form for a website
There are two main ways to create contact forms for websites: using a tool like Webflow Forms or JotForm, or writing your own HTML from scratch. Developing code for a contact form in HTML isn’t common today, and there are more time-efficient ways to get a form on your site. However, both methods result in a contact form you can use right away.
Design your own
To build your own contact form, you’ll need three things:
- An HTML form, which you’ll add to the page using a <form> element. Nest <label> and <input> elements within the main element to add text fields and other ways for visitors to enter data.
- A CSS stylesheet dresses up your HTML form with colors, fonts, and hover effects.
- A PHP script uses an alternative coding language to create more advanced web elements that HTML can’t. For example, a PHP script can let you add CRM integrations and sanitize form submissions to lower the risk of viruses and malware.
Online tools
Creating a contact form manually is time-consuming and requires some technical know-how (especially for adding advanced functions like integrations). Contact form builders like the ones below make the process more straightforward:
- Webflow Forms is a native tool in the Webflow Designer that lets you quickly drag and drop a form element into any web page. You can add fields and experiment with the layout in a visual tool that’s designed to integrate into your page. You’ll find several contact form templates in the Made in Webflow marketplace, too.
- JotForm is a step-by-step form builder that walks you through adding fields and styling each element. JotForm hosts the form, and you copy and paste a link to embed it into your webpage.
- Typeform is a form builder with more granular details. You can add a range of visuals and field types, then take control over where the form submission goes in your workflow using integrations. This is a good alternative for long contact forms, as it presents each field one at a time.
Unforgettable event experiences
Learn how Webflow's team built an all-in-one, customizable event platform complete with on-site tools, reporting, and integrations.
Essential contact form fields
Here are the most important elements you need in a website contact form:
- Name. Capture the lead’s first and last name in separate fields so you can send personalized emails later.
- Email address. Request their email address up front so you can follow up on the lead.
- Service selector/dropdown. Include a dropdown bar so leads can select categories for their inquiries. Having them self-categorize will save you a lot of time when organizing and tracking leads.
- Customized message. Leave an open space for a custom message where leads can explain why they’re reaching out.
Most contact forms use the same fields, and it’s best not to stray too far from them. Your form should be recognizable to visitors to maximize the chances they use it.
For some business websites, those four fields won’t be enough. If visitors schedule appointments on your site, you may also want to include a field for their phone number to verify the inquiry is valid and send an automated text reminder. Businesses trying marketing campaigns across multiple platforms might include a dropdown menu that indicates the visitor’s referral source, which provides valuable insights into which strategies are working best.
Contact form types
To capture visitors the moment they decide to take the next step, you can include more than one contact form across your site. Here are six of the most common types:
- Pop-up form. A pop-up form is overlaid on your website, generally in the center of the screen to draw visitors’ attention. It often appears when the user navigates to a new page or opens a specific link.
- Footer form. Placing a simplified contact form in the footer ensures visitors are never far from the option to take the next step.
- Multi-step form. A multi-step contact form offers a questionnaire that extracts more information to help you learn more about leads and triage their request.
- Intent-based form. When visitors take a specific action, like clicking on a CTA button, you can direct them to a form tailored to that intent, such as requesting a demo or scheduling an appointment.
- Support request form. A support ticket form adds several more fields, like a dropdown menu listing common error categories, and might even ask visitors for files (e.g., a screenshot of the error). You’ll send visitors to this type of form after they click a CTA button or navigate to a support page.
- Booking form. These forms are useful for service websites and some ecommerce sites, such as hotels or restaurants. A booking form shows available dates and times so you can spend less time fielding these common inquiries manually.
4 best practices for high-converting contact forms
While your contact form design will be an expression of your unique brand, there are four best practices that will help you generate more leads with it.
1. Keep the form fields simple
Visitors are more likely to complete short forms because they take less time (and less mental energy) to fill out. Keep your contact form limited to the essential fields you’ll need to answer their question or get a sales conversation started. While you’re building the form, follow a logical structure that starts with the visitor’s name and ends with a text box for a custom message, and uses familiar labels that won’t confuse people.
2. Make the form visually accessible
Your contact form needs to be readable for everyone, so use fonts and color pairings that provide sufficient contrast and legibility. Organize fields, copy, and the “Submit” button into a logical visual hierarchy that website visitors can immediately intuit.
3. Provide clear confirmation of receipt
Let leads know their message was sent successfully with a confirmation email or custom note that thanks them for their time. Make sure you include a bit of personalization, like including their first name in the response, and set reasonable expectations about when they can expect to hear back from you.
4. Use a mobile-first design approach
Contact form designs that optimize for mobile will often scale just fine to a desktop screen, but the reverse isn’t necessarily true. When building your contact form, test it on a few mobile devices to ensure its spacing and layout scale correctly.
Build forms that convert leads with Webflow
Getting your contact form design just right can bridge the gap between a curious visitor and a new lead. And when you’ve asked for all the important details and your back end integrates with your CRM or email, you’ll have everything you need to make faster decisions on whose goals align best with yours.
Simplify your process from start to finish with Webflow. Our Designer includes a drag-and-drop form builder so you can try out new designs directly within your website. By adding customizations like personalized form responses, then integrating with over 1,500 apps, Webflow can help you give visitors a memorable experience and validate the data before it reaches your inbox.
Ready to capture new leads? Try Webflow.
Evolving design systems
In our ebook, learn why experts are investing in scalable design systems and how they are thinking about the future of design systems.
