如何使用表单样式美化您的付款表单
概述
WP Simple Pay 包含内置的表单样式功能，可让您自定义网站上的付款表单外观 — 无需自定义 CSS。您可以从 8 种预设主题中进行选择，或微调单独的颜色、字体和布局设置以匹配您的品牌。
表单样式设置是按表单配置的，因此您可以独立设置每个付款表单的样式。
注意：表单样式仅适用于网站上的付款表单（嵌入式和叠加显示类型）。如果您的表单使用 Stripe Checkout（站外），这些设置将不会生效。要使用表单样式，请在常规设置选项卡中将表单类型切换为“网站上的付款表单”。
先决条件
- WP Simple Pay Pro 且拥有Plus 许可证或更高版本
- 使用网站上表单类型的付款表单（嵌入式或叠加显示）
访问表单样式选项卡
- 在 WordPress 管理后台导航到WP Simple Pay > 付款表单。
- 点击现有表单进行编辑，或创建一个新表单。
- 在表单编辑器中点击表单样式选项卡。
表单样式选项卡包含四个子选项卡：主题、颜色、字体和设计与布局。
选择主题预设
主题预设可即时将一套完整协调的样式应用于您的表单。应用主题后，您可以在其他选项卡中进一步自定义各个设置。
- 在表单样式选项卡中，选择主题子选项卡（默认选中）。
- 浏览可用主题。每个主题卡片都显示了调色板预览和迷你表单预览。
- 点击主题卡片进行选择。
- 点击发布或更新进行保存。
以下主题可用：
| 主题 | 描述 | 主色 |
|---|---|---|
| 默认 | WP Simple Pay 的默认样式 | 青色 |
| 日落 | 暖红色调，浅色背景 | 红色 |
| 森林 | 清新的绿色主题，干净的背景 | 绿色 |
| 海洋 | 平静的蓝色调 | 蓝色 |
| 单色 | 简单的黑白主题 | 黑色 |
| 阳光 | 明亮愉快的黄色点缀 | 黄色 |
| 珊瑚色 | 温暖的橙色调 | 橙色 |
| 极简 | 干净、极简的设计 | 灰色 |
重要提示：选择一个主题将把所有颜色和样式设置更新为该主题的值。您对单个设置所做的任何自定义更改都将被覆盖。
自定义颜色
点击颜色子选项卡可微调单个颜色设置。颜色分为几个部分。
背景颜色
- 表单背景 — 整个表单容器的背景颜色。
- 输入框背景 — 输入字段、选择框和下拉菜单的背景颜色。
文本颜色
- 常规文本颜色 — 表单中所有文本元素的默认颜色。
- 标签文本颜色 — 字段标签的颜色。仅覆盖标签的常规文本颜色。
- 输入框文本颜色 — 输入字段内文本的颜色。仅覆盖输入框的常规文本颜色。
标题和描述颜色
- 标题颜色 — 表单标题的颜色。如果未设置，则回退到常规文本颜色。
- 描述颜色 — 表单描述的颜色。如果未设置，则回退到常规文本颜色。
强调色和边框颜色
- 主（强调）色 — 用于焦点状态、高亮和其他强调元素。
- 边框颜色 — 输入字段和其他带边框元素的边框颜色。
错误状态颜色
- 错误边框颜色 — 应用于有验证错误的字段的边框颜色。
- 错误文本颜色 — 错误消息的文本颜色。
- 按钮背景 — 提交按钮的背景颜色。
- 按钮文本 — 提交按钮的文本颜色。
- 按钮悬停背景 — 鼠标悬停在提交按钮上时的背景颜色。
所有颜色字段均支持十六进制颜色（例如，#0f8569）和带透明度的 rgba 颜色（例如，rgba(15, 133, 105, 0.8)）。点击任意字段旁边的色块即可打开颜色选择器。
自定义排版
点击 排版 子选项卡可调整字体大小和字重。
标签排版
- 标签字体大小 — 字段标签的大小（以像素为单位）。默认值：14px。
- 标签字体粗细 — 字段标签的粗细。选项：Normal、Bold 或数值（100–900）。
输入框排版
- 输入框字体大小 — 输入字段内文本的大小（以像素为单位）。默认值：16px。
标题和描述排版
- 标题字体大小 — 表单标题的大小（以像素为单位）。默认值：24px。
- 标题字体粗细 — 表单标题的粗细。选项：Normal、Bold 或数值（100–900）。
- 描述字体大小 — 表单描述的大小（以像素为单位）。默认值：16px。
- 描述字体粗细 — 表单描述的粗细。选项：Normal、Bold 或数值（100–900）。
自定义设计和布局
点击 设计和布局 子选项卡可调整间距和边框半径设置。
边框半径
- 表单边框半径 — 控制表单容器的圆角大小（以像素为单位）。设置为 0 可获得方形边角。
- 输入框和按钮边框半径 — 控制输入字段和按钮的圆角大小（以像素为单位）。
每个设置旁边都有实时预览，显示当前值效果。
间距
- 表单内边距 — 控制表单容器的内部间距（内边距），以像素为单位。
将样式重置为默认值
要将所有样式设置重置为默认值：
- 在“表单样式”选项卡中，滚动到任何子选项卡的底部。
- 点击“重置样式”按钮。
- 在提示时确认重置。
- 点击“发布”或“更新”以保存表单。
这将重置所有颜色、排版和布局设置。它不会更改所选主题。
常见问题解答
为什么我没有看到“表单样式”选项卡？
“表单样式”选项卡需要Plus 许可证或更高版本。如果您拥有个人许可证，则会看到升级提示。
为什么会有关于站外表单的警告？
表单样式仅适用于站内支付表单。如果您的表单设置为使用 Stripe Checkout（站外），则表单样式设置将无效。在表单编辑器的“常规”选项卡中将表单类型更改为“站内支付表单”。
我能为每个表单使用不同的样式吗？
是的。表单样式设置是按表单保存的，因此每个支付表单都可以拥有自己独特的样式。
表单样式是否适用于叠加（模态）表单？
是的。表单样式适用于嵌入式表单和叠加/模态表单。对于叠加表单，表单背景颜色会控制模态内容区域的背景。
我仍然可以在表单样式旁边使用自定义 CSS 吗？
是的。自定义 CSS 将在表单样式设置之上应用。
表单样式会影响 Gutenberg 块预览吗？
是的。当您在块编辑器中使用 WP Simple Pay 块插入支付表单时，块预览将反映表单的当前样式设置。
如果我将颜色字段留空会怎样？
空字段将继承合理的默认值。例如，标签和输入文本颜色将回退到通用文本颜色。按钮颜色将回退到主题的主色。
下一步是什么？
仍有疑问？我们随时为您服务！
最后修改时间：