Contact Page Examples: 18 Real Contact Pages and What They Include

A good contact page gives a visitor one obvious way to reach you and the facts they need before they do: a short form or an email address, a phone number that can be tapped, a street address if people visit, opening hours, and a line that says when you reply. This page collects 18 real contact page examples from small and mid-sized businesses, freelancers, stores, and software companies, and records what each one actually contains: how many form fields it has and how many are required, whether the phone and email are real links, and whether it states a response time. After the examples come the patterns they share, a text wireframe of a contact page, a copyable HTML contact section, a checklist, and answers to the questions people ask about contact pages in forums. It is part of the website examples library.

Jump to: the comparison table · business contact pages · personal contact pages · e-commerce · software · form or email link · wireframe · HTML · FAQ

What goes on a contact us page?

A contact page needs five things, in roughly this order:

1. One main way to reach you: a short form, or an email address if you would rather read email
2. A phone number as a tel: link, if you take calls, so it dials on a phone
3. Your address and opening hours, if customers visit, with a map link or an embedded map
4. A response promise: when you reply, and what happens after someone writes
5. Routing, if you need it: separate addresses or a dropdown for sales, support, press, and jobs

Everything else is optional. A FAQ block saves support email (Josh W. Comeau and April Dunford put one on their contact pages). A newsletter checkbox on the form is common but adds a decision the visitor did not ask for. Social links belong in the footer, where they already are.

Contact page examples at a glance

Every page below is a real, live contact page. Each was fetched on 2026-11-12 and read as HTML, so the counts describe what the page sends to the browser, not what a screenshot suggests. "Fields" counts visible form controls (hidden and anti-spam fields are excluded) and "required" counts those marked required in the HTML. Where a form is injected by a script or an iframe, the fields could not be counted and the table says so.

"Text only" means the number is printed but not wrapped in a tel: link. "Protected links" means the email is behind a script-based obfuscation, so it shows in a browser but not in the raw HTML. Sites change, so a form may have been edited since the check.

Contact us page examples for business

The business pages split into two groups. Local service businesses want a phone call or a booked visit, so phone numbers, addresses, and hours do the work. Professional services want a qualified conversation, so the form asks what the inquiry is about and the page says what happens next. The descriptions below are limited to what is in each page's HTML: headings, form fields, links, and stated text. Nothing here states prices, ratings, or results.

Local service businesses

Silent Rivers Design+Build: silentrivers.com/contact-us/

Model Remodel: modelremodel.com/contact/

Hiller Plumbing, Heating, Cooling & Electrical: happyhiller.com/contact/

Franklin Barbecue: franklinbbq.com/contact

Schweiger Dermatology Group: schweigerderm.com/contact-us/

Professional contact page examples

April Dunford: aprildunford.com/contact

MetaLab: metalab.com/contact

Clearleft: clearleft.com/contact

HKM Employment Attorneys: hkm.com/contact/

Bench: bench.co/contact

For the rest of a consulting or agency site, see consultant website examples.

Personal contact page examples

Personal and freelancer contact pages are the shortest in the list. None of the four shows a phone number, and only one shows an address. What they add instead is tone and triage: a sentence about who should write, and a way to sort work from everything else. The portfolio sites among them (Sara Soueidan, Jessica Hische) put the sorting in the form or the page itself; see portfolio website examples for the rest of those sites.

Josh W. Comeau: joshwcomeau.com/contact/

Sara Soueidan: sarasoueidan.com/contact/

Ethan Marcotte: ethanmarcotte.com/contact/

Jessica Hische: jessicahische.is/contactable

E-commerce contact us page

Store contact pages mostly handle order problems, so the useful additions are an order number field, a topic dropdown, and separate addresses for press and wholesale.

Intelligentsia Coffee: intelligentsia.com/pages/contact-us

Field Notes: fieldnotesbrand.com/contact

Software and B2B contact pages

Software companies get support, sales, billing, and press requests through one page, so routing matters more than the form.

Postmark: postmarkapp.com/contact

Oh Dear: ohdear.app/contact

How our demo contact pages do it

Our fictional example sites use one contact pattern with small changes per industry. Each page has a heading that names the action, a form on the left, the business details on the right, and an embedded map below.

• Consultant: "Book a discovery call." A five-field form (Full name, Email, Phone marked optional, a "Which area?" dropdown, and "The question"), firm details with a tel: link, a mailto: link, and hours, and the note "Most discovery calls happen within two weeks."
• Construction company: "Start a build." The same five-field shape with a Project type dropdown, office hours including Saturday morning, and a note asking for drawings
• Accountant: "Book a consultation." Five fields ending in "Tell us about your business", with weekday hours and a note that the consultation is free all year
• Chiropractor: "Contact." The shortest form, Full name, Email, optional Phone, and Message, with "we reply within one business day", clinic hours including Saturday, and an emergency note telling people to call 911 for anything urgent
• Graphic designer: "Start a project." A brief-style form with a "What do you need?" dropdown and the note "Most first replies happen within one business day, and the first call is free."

In every demo the phone field is optional and the label says so, every field has a visible <label>, and the business details sit beside the form rather than in a footer. The forms are mock-ups: they validate in the browser but do not send anywhere, which is also the first thing to fix on a real site (see the website launch checklist).

What the examples have in common, and where they differ

The counts below come from the table above, 18 pages checked on 2026-11-12.

• Most forms are short. 13 of the 18 pages have a form in their HTML, and 11 of those 13 have between 4 and 6 fields. The outliers are Josh W. Comeau with 3 and Model Remodel with 14. The median is 5 fields.
• Name, email, and message are the core. Every visible form asks for a name, an email address, and a message. 6 of the 13 ask for a phone number, and only 3 require it (Silent Rivers, Model Remodel, Franklin Barbecue).
• Phone numbers are rarer than you would expect. 8 of 18 pages show a phone number, and only 5 make it a tel: link. None of the four personal pages shows one.
• Email addresses are rarer still. 6 of 18 show an email address, 4 as plain mailto: links and 2 behind script protection. The rest rely on the form.
• Addresses and hours follow foot traffic. 6 pages show a street address and 5 show hours. All six addresses belong to businesses or people with a physical studio, shop, or restaurant. Only Model Remodel embeds a map.
• Response times are mostly missing. 3 pages state a concrete window (Hiller's 24 hours, Bench's 24 business hours, Postmark's weekday hours) and 2 say "promptly" or "shortly". The other 13 say nothing about when they reply.
• Routing is common. 10 of 18 pages route inquiries somewhere, by dropdown (Franklin Barbecue, Schweiger, Sara Soueidan, Intelligentsia, Field Notes, Postmark), by department email (Intelligentsia, Oh Dear), by section (Jessica Hische), by phone extension (Bench), or by office (HKM).
• Newsletter checkboxes creep in. 4 forms add one, and Hiller's is ticked by default.
• Labels are not universal. April Dunford's form uses placeholders instead of labels, and Schweiger's uses bold paragraphs. Both go against the NN/g advice on placeholder text quoted below.

Contact form or email link?

Use a form when you need to sort or qualify messages, and a plain mailto: link when you want the lowest barrier. The forum threads behind this question (a Warrior Forum thread asking whether to show an email link or a form, and a SitePoint thread on listing a phone number) end up in the same place: the answer depends on who writes and what you do with the message.

A form wins when:

• You want a subject or topic chosen for you (Franklin Barbecue, Intelligentsia, Postmark)
• You need a specific detail every time, such as an order number or a project type
• You do not want to publish an address that spam harvesters can read

An email link wins when:

• Your visitors are technical or already know you (Oh Dear, Bench, and the personal sites that show an address)
• People want a record of what they sent, which a form rarely gives them
• You have no form backend, or no one checks the inbox the form posts to

Whichever you choose, keep the form short. The Nielsen Norman Group's Website Forms Usability: Top 10 Recommendations puts "Keep it short" first, notes that it cut one of its own forms from six fields to two, recommends a single column, and says "Avoid placeholder text" because placeholder text used as a label disappears when the user starts typing. The 18 examples agree with the first point: the typical form here has 5 fields, and the one outlier with 14 fields is Model Remodel, a remodeler that asks about the project up front.

Showing both is fine. Model Remodel and Clearleft do: a form for new inquiries and a mailto: link for everyone else.

Simple contact us page design: the anatomy of a contact page

Most contact pages, including the 18 above and our demos, fit one skeleton. The diagram is an illustrative pattern, not a specific site; it follows the same conventions as the homepage layouts in the website wireframe example.

+--------------------------------------------------------------+
| HEADER  Logo   Services  About  Contact         (555) 010-0000|
+--------------------------------------------------------------+
| H1  Contact [business name]                                   |
|     One line: who should write, and what happens next         |
+------------------------------+-------------------------------+
| FORM                         | DETAILS                       |
|   Name             [       ] |   Phone  -> tel: link         |
|   Email            [       ] |   Email  -> mailto: link      |
|   Phone (optional) [       ] |   Street address + map link   |
|   Message          [       ] |   Hours                       |
|                    [       ] |   "We reply within one        |
|   [ Send message ]           |    business day."             |
+------------------------------+-------------------------------+
| ROUTING (optional)                                            |
|   Sales · Support · Press · Jobs -> one email or link each    |
+--------------------------------------------------------------+
| MAP (optional)  embedded map, or a sentence of directions     |
+--------------------------------------------------------------+
| FOOTER  Address · Phone · Hours · Privacy                     |
+--------------------------------------------------------------+

The sections in order:

1. Header: the normal site menu, with the phone number if you take calls
2. Heading and one line: say what the page is for ("Book a discovery call", "Start a build", "Contact") and when you reply
3. Form: three or four fields with visible labels, phone marked optional, one button with a verb
4. Details: phone, email, address, and hours beside the form, each as a real link where it can be one
5. Routing: only if different kinds of mail go to different people
6. Map or directions: an embedded map if visitors drive to you, or a sentence like Clearleft's if they walk
7. Footer: the same address and hours, which also appear on every other page

How to say "please contact me" on the page

The heading and button carry the request, so a single plain sentence is enough. Lines that appear on the pages above and in our demos:

• "Send us a message." (Intelligentsia) and "Send a message." (our chiropractor demo)
• "Book a discovery call." (our consultant demo)
• "Tell Us About Your Project" (Model Remodel) and "Tell Us About Your Case" (HKM)
• "Drop me a line." (Ethan Marcotte)

Pair it with the response promise: "Send us a message and we will reply within one business day." Avoid "Contact us today!" with an exclamation mark; none of the 18 pages uses it.

Contact us page examples HTML

The section below is a complete contact page in one file, written in the same plain style as our HTML website example: semantic elements, an <address> block with tel: and mailto: links, and a four-field form with real <label> elements and no placeholder-as-label. Save it as contact.html and open it in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Contact Larkspur Café</title>
  <meta name="description" content="Call, email, or send a message to Larkspur Café. We reply within one business day." />
  <style>
    :root {
      --ink: #1f2937;
      --muted: #6b7280;
      --accent: #b45309;
      --paper: #fdfaf5;
      --line: #e5e7eb;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      color: var(--ink);
      background: var(--paper);
      line-height: 1.6;
    }
    .container { max-width: 960px; margin: 0 auto; padding: 0 20px; }
    header { background: #292524; color: #f5f5f4; }
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      padding: 14px 0;
    }
    .brand { font-size: 1.3rem; font-weight: bold; margin: 0; }
    nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
    nav a { color: #e7e5e4; text-decoration: none; }
    nav a:hover, nav a:focus { color: #ffffff; text-decoration: underline; }
    main { padding: 40px 0 60px; }
    h1 { font-size: 2rem; margin: 0 0 6px; }
    .lede { color: var(--muted); margin: 0 0 28px; }
    .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
    @media (max-width: 700px) { .columns { grid-template-columns: 1fr; } }
    form { display: grid; gap: 14px; }
    label { font-weight: bold; }
    .hint { font-weight: normal; color: var(--muted); }
    input, textarea {
      width: 100%;
      font: inherit;
      padding: 10px 12px;
      border: 1px solid #9ca3af;
      border-radius: 4px;
      background: #ffffff;
    }
    textarea { min-height: 140px; resize: vertical; }
    button {
      font: inherit;
      padding: 10px 18px;
      border: 0;
      border-radius: 4px;
      background: var(--accent);
      color: #ffffff;
      cursor: pointer;
    }
    button:hover, button:focus { background: #92400e; }
    .details h2 { font-size: 1.1rem; margin: 0 0 8px; color: var(--accent); }
    address { font-style: normal; margin: 0 0 20px; }
    .hours { margin: 0 0 20px; padding: 0; list-style: none; }
    .hours li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 6px 0; }
    footer { background: #292524; color: #a8a29e; text-align: center; padding: 16px 0; font-size: 0.9rem; }
  </style>
</head>
<body>
  <header>
    <div class="container header-inner">
      <p class="brand">Larkspur Café</p>
      <nav aria-label="Main">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="menu.html">Menu</a></li>
          <li><a href="contact.html" aria-current="page">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main class="container">
    <h1>Contact Larkspur Café</h1>
    <p class="lede">Send a message, call, or drop in. We reply to messages within one business day.</p>

    <div class="columns">
      <section aria-labelledby="form-heading">
        <h2 id="form-heading">Send us a message</h2>
        <form action="/contact" method="post">
          <div>
            <label for="name">Your name</label>
            <input id="name" name="name" type="text" autocomplete="name" required />
          </div>
          <div>
            <label for="email">Email address</label>
            <input id="email" name="email" type="email" autocomplete="email" required />
          </div>
          <div>
            <label for="phone">Phone <span class="hint">(optional)</span></label>
            <input id="phone" name="phone" type="tel" autocomplete="tel" />
          </div>
          <div>
            <label for="message">Message</label>
            <textarea id="message" name="message" required></textarea>
          </div>
          <div>
            <button type="submit">Send message</button>
          </div>
        </form>
      </section>

      <section class="details" aria-labelledby="details-heading">
        <h2 id="details-heading">Visit or call</h2>
        <address>
          Larkspur Café<br />
          12 Eastside Avenue<br />
          Springfield, OR 97477<br />
          <a href="tel:+15550100000">(555) 010-0000</a><br />
          <a href="mailto:hello@larkspur.example">hello@larkspur.example</a>
        </address>
        <h2>Hours</h2>
        <ul class="hours">
          <li><span>Monday to Friday</span><span>7:00 am to 5:00 pm</span></li>
          <li><span>Saturday</span><span>8:00 am to 3:00 pm</span></li>
          <li><span>Sunday</span><span>Closed</span></li>
        </ul>
        <p><a href="https://www.google.com/maps/search/?api=1&amp;query=12+Eastside+Avenue+Springfield+OR">Get directions</a></p>
      </section>
    </div>
  </main>

  <footer>
    <div class="container">© 2026 Larkspur Café · 12 Eastside Avenue, Springfield · (555) 010-0000</div>
  </footer>
</body>
</html>

The form needs somewhere to send its data. On its own, a browser will submit it to /contact and get an error, because no server is listening there. The usual fixes are a form service that gives you an endpoint to put in the action attribute and emails you each submission, the form handling built into your host or CMS, or a few lines of server code of your own. Whichever you use, send a test message and find it in the inbox before launch; the website launch checklist has that step. If the page is part of a larger site, the website structure examples show where Contact sits in the menu, which is almost always last.

Three details in the code worth keeping even if you change everything else: every <input> has a <label> tied to it with for and id; the phone number is a tel: link with the country code; and the <address> element holds the contact details so assistive technology and search engines can recognise them.

Contact page checklist

FAQ

Where to go next

A contact page works when a visitor can reach you in one step and knows what happens next. Start from the five items at the top of this page, copy the HTML section, and borrow the specifics from the example closest to your business: a topic dropdown from Franklin Barbecue or Postmark, a response promise from Hiller, directions from Clearleft, or a page of "who to email for what" from Jessica Hische. For the rest of the site, see the business website examples and the construction website examples for how trades handle the quote form on the homepage, the website structure examples for where Contact sits in the menu, and the website launch checklist for testing the form, the phone link, and the map before you go live. The full website examples library has more.