Contact Page

This entry has no runnable specimen; the illustration is an editorial sketch of how the channel list sits beside the form, not a verified implementation, and the numbers and addresses in it are fictional. Before shipping, confirm that the hours and response promises on the page match reality.

{
  "states": [
    "idle",
    "submitting",
    "success",
    "error"
  ],
  "a11y": [
    "Phone numbers and addresses are actionable links that still announce in full",
    "The result is announced through a status message and focus returns to the first field in error"
  ],
  "motion": "No motion"
}

{
  "id": "contact-page",
  "type": "layout",
  "name": {
    "zh": "联系页",
    "en": "Contact Page"
  },
  "aliases": [
    "Contact Us Page",
    "Get in Touch Page",
    "联系我们页",
    "客服联系页"
  ],
  "granularity": "page",
  "intents": [
    "organize-content",
    "find-option"
  ],
  "tags": [
    "contact details",
    "support",
    "form",
    "opening hours",
    "channel"
  ],
  "definition": "A page that gathers the available ways to get in touch: each channel states what it is for, when it is open, and how quickly a reply can be expected, with a submission form where one is needed — so people can judge which route to take before acting.",
  "boundary": "The point of a contact page is channel choice and expectation setting, not an isolated form. A lone \"leave a message\" box with no word on who reads it or how long a reply takes is not what this entry means. It also does not replace the contact entry point in the footer: the footer answers where to look, the contact page carries the full detail. Using a contact page to obstruct exits — turning cancellation, unsubscribing, or refunds that could be self-service into writing a letter — is an anti-pattern and not part of this entry’s practice.",
  "signature": [
    "Channels are grouped by what they are for rather than listed as a run of numbers",
    "Each channel states its hours, languages, and expected response time",
    "Form fields match the channel, and submitting produces a confirmation and says what happens next"
  ],
  "when": [
    "Users bring different kinds of question that need routing to different teams",
    "Channels differ in hours, cost, or language and this has to be said in advance",
    "Regulation or compliance requires publicly reachable contact details"
  ],
  "when_not": [
    "The product already offers help in context, where a general contact page is a detour",
    "It replaces a cancellation, unsubscribe, or refund path that should be self-service",
    "The page holds only a form, with no word on who reads it or when a reply comes"
  ],
  "tradeoff": "Gathering the channels reduces the cost of taking the wrong route, at the cost of a page people must read before acting — and routing that is too fine-grained leaves them unsure which case they are.",
  "comparison": {
    "focus": "Getting people to the right channel first and setting a reply expectation",
    "mechanism": "A channel list grouped by purpose, with hours, languages, and response notes",
    "cost": "It has to be read before acting, and over-fine routing causes hesitation"
  },
  "sources": [
    {
      "id": "contact-govuk",
      "title": "GOV.UK Design System · Contact a department or service team",
      "url": "https://design-system.service.gov.uk/patterns/contact-a-department-or-service-team/",
      "claim": "The pattern requires contact information to be given inside the service, with an example containing a phone number, opening hours including the public-holiday exception, and a link about call charges, and advises using contextual user research to decide where in a page or service it belongs. This entry paraphrases the content checklist from it; making it a page of its own is editorial judgement.",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://design-system.service.gov.uk/patterns/contact-a-department-or-service-team/",
        "status": "available",
        "checkedAt": "2026-09-16T13:27:10.224Z",
        "jobId": "spn2-28e1a1e96837e89d8f4613ab069226961e2ec02e",
        "url": "https://web.archive.org/web/20260916132734/https://design-system.service.gov.uk/patterns/contact-a-department-or-service-team/",
        "timestamp": "20260916132734"
      }
    },
    {
      "id": "contact-nng-footer",
      "title": "NN/g · Web Page Footers 101: Design Patterns and When to Use Each",
      "url": "https://www.nngroup.com/articles/footers/",
      "claim": "The article observes that users often go straight to the footer looking for contact information or ways to get support, and recommends including those links there whether or not they also appear in the top navigation. This entry uses it to separate the footer entry point from the contact page itself.",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://www.nngroup.com/articles/footers/",
        "status": "available",
        "checkedAt": "2026-09-16T13:25:40.579Z",
        "jobId": "spn2-db7ace296b16896be0596221cf990d6123d22eac",
        "url": "https://web.archive.org/web/20260916132608/https://www.nngroup.com/articles/footers/",
        "timestamp": "20260916132608"
      }
    }
  ],
  "relations": [
    {
      "target": "site-footer",
      "kind": "composes_with",
      "condition": "Users look for a way to get in touch from any page",
      "reason": "The footer offers the entry point on every page and the contact page carries the full detail; without the footer link, the page is hard to find.",
      "basis": "editorial"
    },
    {
      "target": "obstruction",
      "kind": "conflicts_when",
      "condition": "Closing an account, unsubscribing, or refunding is only possible by \"contacting us\"",
      "reason": "Turning a self-service exit into a letter deliberately adds steps to the way out.",
      "basis": "editorial"
    },
    {
      "target": "inline-validation",
      "kind": "composes_with",
      "condition": "The page includes a submission form",
      "reason": "A contact form is often the first written exchange with the product, and validating fields on the spot avoids a wasted submission and a long wait.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "The page lists phone, email, or live-chat channels",
      "instruction": "State hours, languages, and whether it costs anything, and give an expected response time; say so honestly when none can be promised.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "The form submission succeeds or fails",
      "instruction": "Give a confirmation the user can keep — a reference or receipt — and say what happens next; on failure, preserve what they typed.",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "idle",
      "submitting",
      "success",
      "error"
    ],
    "a11y": [
      "Phone numbers and addresses are actionable links that still announce in full",
      "The result is announced through a status message and focus returns to the first field in error"
    ],
    "motion": "No motion"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "This entry has no runnable specimen; the illustration is an editorial sketch of how the channel list sits beside the form, not a verified implementation, and the numbers and addresses in it are fictional. Before shipping, confirm that the hours and response promises on the page match reality.",
  "image": {
    "src": "/images/contact-page.webp",
    "alt": "A fictional FIELDNOTES contact page sketch: on the left, three groups of channels sorted by purpose, each with grey placeholder bars for hours and response times; on the right, a form box with four fields and a submit button."
  },
  "searchTerms": [
    "联系方式",
    "客服",
    "表单",
    "服务时间",
    "渠道"
  ]
}