Most contact pages are treated like an afterthought: a headline, a five-field form, a map, done. Yet for service businesses the contact page is often the second most visited page on the site and the last step before a lead becomes real money. Bad contact page design quietly kills deals that your homepage worked hard to win.
This guide is not a gallery of pretty screenshots. It is a practical breakdown of what actually belongs on the page, what to remove, and how to lay it out for desktop and mobile. Everything below is based on how real visitors behave when they are ready to talk to you.
What a Contact Page Really Has to Do
A contact page has one job: reduce the friction and the anxiety of reaching out. Friction is effort (too many fields, unclear buttons, no phone number). Anxiety is doubt (“Will anyone reply?”, “Are these people real?”, “Am I about to get spammed by a sales team?”).
Every element you add should either lower friction or lower anxiety. If it does neither, it is decoration.
| Visitor question | Page element that answers it |
|---|---|
| How do I reach you fastest? | Phone number and email above the fold, tappable on mobile |
| When will I get an answer? | Explicit response time promise near the submit button |
| Are you open right now? | Business hours with time zone |
| Are you a real business? | Address, map, team photo, registration or licence number |
| Will you spam me? | Short privacy note under the form |
| Am I in the right place? | Routing options: sales, support, careers, press |
The Contact Page Checklist
Use this as your build spec. The first six items are non negotiable for a service business.
- A clear, human headline (“Tell us about your project” beats “Contact”)
- A short form with visible labels and one obvious submit button
- Phone number as a clickable
tel:link - Email address as a clickable
mailto:link - Business hours with time zone
- Response time expectation in plain language
- Physical address and embedded map (if you serve clients on site or receive visitors)
- Alternative channels: WhatsApp, live chat, booking link, contact form for support tickets
- Department or purpose routing so messages land in the right inbox
- Trust elements: reviews, certifications, client logos, a real photo of the team
- A privacy micro copy line under the form
- A proper thank you page (not an inline “Message sent” toast that disappears)
How Many Form Fields Should a Contact Form Have?
The honest answer: as few as you need to qualify the lead, and never more than five for a general enquiry. Every extra field is a small tax on completion. But stripping the form to two fields is not automatically better either, because unqualified leads waste your sales time and slow your reply to good ones. For the wider picture, see 130 Contacts Web Page Designs.
Field count by business type
| Business type | Recommended fields | Count |
|---|---|---|
| Local trades (plumber, electrician, roofer) | Name, phone, postcode or suburb, short message | 4 |
| Agency or consultancy | Name, work email, company, service needed, message | 5 |
| Clinic, salon, studio | Name, phone, preferred day/time, message | 4 |
| SaaS or product company | Name, work email, reason for contact (dropdown), message | 4 |
| High ticket B2B (quotes above five figures) | Name, email, phone, company, budget range, timeline, message | 7 |
The high ticket example breaks the five field rule on purpose. When the deal is worth thousands, a longer form acts as a filter and the serious prospects complete it anyway. When the deal is worth a call out fee, every extra field costs you leads.
Field rules that actually move the needle
- Ask for phone OR email, not both as required. Make one required and the other optional, and let the visitor choose their preferred channel.
- Never use placeholder text as a label. Once someone types, the placeholder disappears and they lose context. Use a visible label above the field, always.
- Mark optional fields, not required ones. If most fields are required, labelling the two optional ones is cleaner than a wall of asterisks.
- Use one column. Side by side fields cause eye jumps and are measurably slower to complete.
- Set the right input types so mobile keyboards adapt:
type="email",type="tel", andinputmodewhere relevant. - Enable autofill with correct
autocompleteattributes (name, email, tel, organization). This alone can shave 20 seconds off a mobile submission. - Validate inline, after the field loses focus. Do not throw all errors at the top after submit.
- Write the button like a promise: “Send my request”, “Get my free quote”, “Book a callback”. “Submit” is the weakest word in web design.
Label wording examples
| Weak label | Better label | Why |
|---|---|---|
| Email (where we send the quote) | Explains the payoff of giving it | |
| Phone | Phone (optional, only if you prefer a call) | Removes fear of cold calling |
| Message | What do you need help with? | Prompts a useful answer instead of “hi” |
| Subject | What is this about? (dropdown) | Routes the message and saves typing |
Alternative Contact Methods: Give People a Choice
Around half of visitors on a contact page are not looking for the form at all. They want a number, an email, or a booking link. Hiding those behind a form is a conversion leak and a trust problem. Much the same conclusion turns up on hubspot.com.
Lay out your channels as a small grid or list next to the form, with the expected speed of each:
- Phone: fastest, staffed during business hours
- Email: answered within one business day
- Form: best for detailed project briefs, answered within one business day
- WhatsApp or SMS: quick questions, same day
- Online booking: pick a slot yourself, instant confirmation
- Support portal: existing clients with an account
Routing matters as much as the channel. A single generic inbox means a careers email and an urgent quote request sit in the same pile. Use a dropdown (“New project”, “Existing client support”, “Careers”, “Press and partnerships”) that maps to different destination addresses.
Business Hours and Response Time Expectations
This is the cheapest trust element on the page and almost everyone skips it.
Business hours
- Show days and hours in a compact table, not a paragraph
- Always include the time zone (“Mon to Fri, 9:00 to 17:30 CET”)
- Mention holiday closures or reduced summer hours if they apply
- If you offer emergency or after hours service, say so explicitly with the number
Response time
Place the promise directly under the submit button, where hesitation happens. Be specific and be conservative:
- Good: “We reply to every enquiry within one business day. Send it before 15:00 CET and you will usually hear back the same afternoon.”
- Weak: “We will get back to you as soon as possible.”
Then honour it. A promise you break on the confirmation email is worse than no promise at all. If your team cannot answer in 24 hours, set up an autoresponder that confirms receipt, restates the timeline and gives the phone number for urgent cases.
Embedded Maps: When to Use One and How
A map is useful when visitors physically come to you: a clinic, showroom, restaurant, workshop, office with walk in appointments. It is close to useless for a remote agency, and it costs you page speed.
Map best practices
- Lazy load it. Show a static image of the location with a “View map” or “Get directions” button, and only load the interactive iframe on click. This can save several hundred kilobytes and multiple third party requests.
- Always put the written address next to the map. People copy addresses, screenshot them and paste them into their own navigation app.
- Add a direct directions link that opens the visitor’s default maps app on mobile.
- Add parking and access notes. “Free parking behind the building, entrance on Oak Lane, second floor, lift available” removes real world friction.
- Give the iframe a title attribute for screen readers, and never make the map the only way to find your address.
- Service area businesses (plumbers, mobile groomers, IT support) should replace the pin map with a list or illustration of covered areas, which also feeds local SEO.
Keep your address formatting identical to your Google Business Profile and the rest of your site. Consistent name, address and phone data helps local rankings, and adding LocalBusiness structured data to the contact page reinforces it.
Trust Elements That Belong on a Contact Page
Trust on a contact page is about proving a human will read the message. The strongest signals, roughly in order of impact for service businesses:
- A real photo of the person or team who answers enquiries, with a first name
- Review snippets or a rating badge from Google, Trustpilot or an industry platform
- Licence, insurance, registration or certification numbers for regulated trades
- Client logos or a short “trusted by” line for B2B
- A one line privacy note: “We use your details only to answer your enquiry. No newsletters, no sharing with third parties.”
- A named point of contact instead of info@ where possible
- Company legal details in the footer: registered name, company number, VAT number
What to avoid: fake urgency, stock photos of headset call centres, and vague badges nobody recognises. They add visual noise and reduce credibility.
Three Layout Patterns That Work for Service Businesses
Pattern 1: Split screen (form left, details right)
The default for agencies, consultants and B2B services. Form occupies roughly 60% of the width on the left, contact details, hours, response promise and trust block on the right. On mobile the form stacks first, details second, but a compact phone and email bar sits above the form.
Best for: project based enquiries where people write a brief.
Pattern 2: Channel cards on top, form below
Three or four cards across the top: Call, Email, WhatsApp, Book a slot. Each card has an icon, the actual value, and the expected response speed. Under the cards, a short form for people who prefer to write. Map and hours at the bottom.
Best for: local trades, clinics, repair services, anything where phone calls dominate.
Pattern 3: Qualifying step form
A two or three step form: step one asks the single most important question (service type or problem), step two collects contact details, step three is optional detail. Progress is visible. Because the first step feels effortless, completion rates on longer forms improve noticeably.
Best for: quotes with variables (renovation, moving, custom manufacturing, insurance).
| Pattern | Primary action | Map needed? | Typical fields |
|---|---|---|---|
| Split screen | Form submission | Optional | 4 to 5 |
| Channel cards | Phone call | Yes if premises | 3 to 4 |
| Step form | Qualified quote request | Rarely | 5 to 8 across steps |
Mobile First: Tap to Call and Click to Email
The majority of contact page traffic for local and service businesses arrives on a phone, often with high intent. Someone standing in a flooded kitchen is not filling in a five field form. Design the mobile version first, then expand it.
Make the phone number tappable
Plain text numbers force the user to copy, switch apps and paste. Use a real link:
<a href='tel:+32470123456'>+32 470 12 34 56</a>Rules for tap to call:
- Use the international format in the
href(leading plus and country code), and a readable local format in the visible text - No spaces, dashes or brackets inside the
hrefvalue - Give the tap target a minimum height of 44 to 48 pixels with generous padding
- Style it as a button, not a thin text link
- Add a label: “Call now, we answer until 17:30”
- If you use call tracking numbers, verify that the swapped number still renders as a valid
tel:link
Make the email clickable
<a href='mailto:[email protected]?subject=Website%20enquiry'>[email protected]</a>- Show the actual address as visible text so desktop users without a mail client configured can copy it
- Pre filling a subject line helps you triage, but keep it short and neutral
- Do not pre fill the body with a template, it feels presumptuous and often breaks formatting
- Obfuscating emails against bots is fine, but never at the cost of the link being unusable
Other mobile essentials
- Sticky call bar: a fixed bottom bar with “Call” and “Message” on mobile only. It typically lifts contact actions more than any redesign of the form itself.
- Correct keyboards:
type='tel'triggers the numeric pad,type='email'adds the @ key. Small detail, real time saving. - Single column form, full width fields, 16px minimum font size to prevent iOS zoom on focus.
- Map below the fold on mobile, lazy loaded, never above the form.
- Directions button that opens the native maps app directly.
- Thumb zone placement: the submit button should sit in the lower half of the screen after the fields, not floating at the top.
- Test on a real device over mobile data, not just a desktop browser resized.
Accessibility and Spam: The Two Things That Break Forms
Accessibility basics
- Every input needs a
<label>linked withforandid - Error messages must be text, not colour alone, and announced to screen readers
- The form must be fully completable with a keyboard, with a visible focus state
- Contrast ratio of at least 4.5:1 for labels, help text and error messages
- Give the map iframe a descriptive
title
Spam control without punishing humans
- Honeypot field hidden from humans: catches a large share of bots with zero user cost
- Time based check: reject submissions completed in under two or three seconds
- Invisible or score based captcha only if spam persists. Visible puzzle captchas cost real conversions
- Server side validation always, client side validation is only for user experience
- Check that submissions are stored in a database or CRM, not only emailed. Email delivery fails silently more often than you think
The Thank You Page Is Part of the Contact Page
Do not end the journey with a grey “Message sent” strip. Send users to a dedicated thank you URL, which also makes conversion tracking clean.
Include:
- Confirmation of what was received and to which address the copy was sent
- The response time promise, repeated
- The phone number for anything urgent
- One useful next step: a case study, a pricing page, a preparation checklist
- Your conversion tracking events for analytics and ads
Measuring Whether Your Contact Page Design Works
| Metric | What it tells you | Healthy direction |
|---|---|---|
| Form start rate | Whether the form looks approachable | Rising |
| Form completion rate | Whether fields or validation block people | Rising |
| Field level drop off | Which single field is the problem | Isolate and fix or remove |
| tel: link clicks | Hidden mobile conversions | Track as a goal |
| mailto: clicks | Preference for email over form | Track as a goal |
| Lead quality (closed deals) | Whether your fields qualify properly | The only metric that pays |
If volume rises but quality drops, add one qualifying field. If volume drops but quality is flat, you removed a field you needed. Change one thing at a time.
Nine Contact Page Mistakes We See Every Week
- Phone number as plain text on mobile
- Placeholder text used instead of labels
- A required “Company” field on a consumer facing form
- Captcha that takes longer than the form itself
- A heavy map iframe loading above the fold and delaying the whole page
- No response time, no hours, no time zone
- Contact page not linked in the main navigation
- Form submissions going to an inbox nobody monitors
- A button that says “Submit”
Frequently Asked Questions
How do I design a contact us page?
Start with the visitor’s questions, not the layout. Put a clear headline, a short form with visible labels, a tappable phone number, an email link, business hours with time zone and a response time promise on one screen. Add a map only if people visit you physically, and finish with trust elements such as reviews, a team photo and a privacy note. Design the mobile version first.
What should a contact page include?
At minimum: a form, a phone number, an email address, business hours, an expected reply time, and your legal business identity. Service businesses with premises should add an address, an embedded or lazy loaded map and directions. Larger organisations should add department routing so enquiries reach the right team. An extended version exists for anyone curious.
What is the best contact form design?
One column, visible labels above each field, four or five fields for general enquiries, correct input types for mobile keyboards, inline validation, a descriptive button such as “Send my request”, and a privacy line underneath. Anything that does not help you answer the enquiry should be removed.
How many fields should a contact form have?
Three to five for most service businesses. Go longer only when the deal value is high enough that qualification matters more than raw volume, and in that case split the form into steps so the first question feels effortless.
Should I put a Google Map on my contact page?
Only if visitors come to your location. Maps add weight and third party requests, so load a static image first and swap in the interactive map on click. Service area businesses are better served by a list of covered towns or regions.
Is a contact form better than showing an email address?
Show both. Forms capture structured data and route enquiries automatically, but a visible email address is a strong trust signal and some people simply prefer their own mail client. Hiding all direct contact behind a form suppresses conversions.
Where should the contact page sit in my navigation?
In the main menu, usually as the last item, and repeated in the footer with the phone number and address. On mobile, add a sticky call bar so the action is available from any page.
Ready to Rebuild Your Contact Page?
A contact page is not a formality, it is the last metre of your funnel. Fix the field count, make every phone number and email tappable, state your hours and reply time out loud, and back it up with proof that a human is on the other side.
If you would like our team to audit or redesign your contact page for conversions, get in touch with FatCow Web Design and we will show you exactly where the leaks are.
