很多站长想要一个联系我们页面，网上大部分方案都是第三方表单插件，样式和子比割裂，还要额外装插件。
其实完全可以只用子比自带 UI 风格，搭建简洁统一的联系页，不需要新增插件，页面风格和全站保持一致。

实现优势

1. 全部复用子比原生 CSS 样式，深浅色模式自动适配，无违和感
2. 轻量实现，不引入多余 JS，不拖慢页面加载
3. 可自由放置：客服微信、QQ、邮箱、反馈入口、工单链接
4. 支持嵌入子比短代码，搭配卡片、提示框、分割线
5. 主题升级不会失效，仅需要新建页面粘贴代码

搭建完整步骤

1. WordPress 后台 → 页面 → 新建页面
2. 页面标题填写：联系我们
3. 右侧选择页面模板：**空白页面（不带侧边栏）/ 默认页面模板**按需选择
4. 发布页面，复制页面链接放到导航菜单

常见问题避坑

1. 样式错乱
确认编辑器没有自动生成多余 p 标签，尽量在代码模式粘贴；不要混用其他页面美化 CSS。
2. 深浅模式颜色不协调
代码全部调用子比自带 class，无需额外写颜色，原生自动跟随主题配色。
3. 想增加留言表单
如果需要访客留言，可以搭配简易表单插件，容器外层套上 `zib-card` 保持风格统一。

FAQ

Q：需要安装表单插件才能做联系页面吗？

A：单纯展示联系方式不需要插件，上面这套方案纯页面代码即可。如果需要在线留言，再考虑表单插件。

Q：能不能直接做成导航菜单弹窗，不用独立页面？

A：可以，使用子比弹窗短代码，把联系内容放进弹窗内，菜单绑定弹窗触发。

Q：移动端排版会不会拥挤？

A：全部使用子比原生卡片 class，自带移动端自适应，手机端展示正常。

结语

想要站点风格统一，优先复用主题自带组件。不用堆砌第三方插件，简简单单用原生卡片、提示框、按钮搭建联系页面，轻量化、美观，后期维护也省心。