主题与自定义样式

建议先用主题预设和可视化设置完成大部分样式，再用自定义样式处理品牌细节。

可视化主题

1. 在设计器右侧打开「主题」。
2. 选择接近站点风格的主题预设。
3. 按需调整颜色、字体与间距，再切换桌面、平板和手机预览。
4. 发布表单，使外观调整对访客生效。

可以调整：

• 品牌色、表单和输入区域颜色
• 正文、辅助文字、错误与焦点颜色
• 字体、字号、字重和行高
• 表单宽度、圆角、边框和阴影
• 桌面、平板和手机的字段间距

「颜色模式」支持跟随主题、浅色、深色和跟随系统。颜色设置会提示基本对比度结果，请同时检查正文、辅助文字、错误提示和按钮是否清晰。

手动调整后会标记为「自定义」。重新选择预设会重新应用该预设的样式；如需保留当前设计以便复用，可先将其保存为模板。

自定义样式

1. 在「主题 → 自定义 CSS」中点击「添加 CSS」或「编辑 CSS」。
2. 输入样式，也可在空白编辑器中点击「插入示例」作为起点。
3. 点击「检查并应用」，按提示修正不支持的写法。
4. 检查预览，最后发布表单。

样式只应用于当前表单，不会修改站点其他区域。建议将表单内部样式写在此处，站点主题中的普通 CSS 选择器不一定能进入表单内部。

常用样式类：

示例：

.cf-card {
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 18px;
}

.cf-field input,
.cf-field textarea {
    border-radius: 10px;
}

.cf-button-primary {
    font-weight: 600;
}

使用限制

自定义样式最长 32,768 个字符，不支持 url() 等资源加载、@import、@namespace、@property 和 CSS 转义写法。不支持的语法会在检查时提示，修改后再应用。

与 Halo 主题配合

• 优先沿用主题的背景色、正文颜色和圆角尺度。
• 表单所在区域较窄时，使用平板和手机预览检查自动换列。
• 主题已经提供卡片容器时，可减少表单容器的边框和阴影。
• 主题样式复杂或页面完全自定义时，可改用自定义页面接入。

下一步

• 配置通知与外部集成
• 返回文档首页
• 将表单投放到文章、页面或独立链接
• 使用接口接入完全自定义的页面