联系页
Contact Page
别名:联系页联系我们联系表单页客服联系页留言页找我们页面商务合作页
这是什么
收集访客留言并提供多种联系渠道的页面：主表单只问必要字段（姓名、邮箱、主题、留言），提交后给出明确成功反馈；旁边或下方并列邮箱、电话、地址与社交入口，再用简短 FAQ 拦下高频问题。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 访客需要咨询、反馈或商务合作
- 需要有可追踪的消息收件入口
- 高频问题可先用 FAQ 自助解决
✕ 不适用场景
- 已经登录的用户有站内消息系统
- 需要实时对话支持（用在线客服更合适）
- 表单字段多到像资格审核
常见形式
表单为主
Form-first
表单居中，联系方式作为补充信息
左右分栏
Split Layout
左信息右表单，或反之，信息密度更高
支持中心式
Support Hub
先给渠道选择与 FAQ，再露出表单
页面结构
- 01
顶栏
站点导航与搜索，保证随时可离开当前任务。
- 02
引导语
一句话说明能帮什么、多久回复，管理预期。
- 03
联系表单
姓名、邮箱、主题与留言，必填项最少，错误就地提示。
- 04
联系方式
邮箱、电话、地址与社交入口，按优先级排列。
- 05
地图地址
有实体场所时给出地图与周边交通，否则省略。
- 06
常见问题
三到五条折叠问答，先拦下能自助解决的问题。
实现要点
flexgridgrid-template-columns: repeat(auto-fit, minmax(240px, 1fr))min-height: 44pxgap: 1rem表单字段竖排并给每个控件绑定 label；触控目标至少 44px；错误信息紧贴字段并用 aria-describedby 关联。分栏变体用 grid 自适应折叠为单列；提交成功后显示可聚焦的成功提示，并保留输入以免刷新丢失。
相关概念
用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
组件包含组件用一块可多行增长的输入区收集长文本，如简介、备注、留言与反馈。 支持手动或自动增高，常配字数统计与提交按钮；超出上限时计数变红提醒， 内容换行显示而非溢出截断。
组件包含组件用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件包含组件在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互模式使用模式向访客解释「我们是谁、为什么做这件事」的品牌页面：开头用一句使命宣言定调，中段以创始故事、发展历程或团队照片建立信任，再用价值观与关键数据支撑，结尾导向联系、招聘或产品。
页面相似概念