表单样式设置参考
概述
这是 WP Simple Pay 中所有可用表单样式设置的完整参考。请与主表单样式指南结合使用,以获取详细的设置说明。
先决条件
- WP Simple Pay Pro 且拥有Plus 许可证或更高版本
- 使用网站上表单类型的付款表单(嵌入式或叠加显示)
主题预设
| 主题 ID | 姓名 | 主要 | 次要 | 文本 | 背景 |
|---|---|---|---|---|---|
默认 | 默认 | #0f8569 | #0e7c62 | #32325d | #ffffff |
日落 | 日落 | #e74c3c | #c0392b | #2c3e50 | #ecf0f1 |
森林 | 森林 | #27ae60 | #219955 | #2c3e50 | #f9f9f9 |
海洋 | 海洋 | #3498db | #2980b9 | #2c3e50 | #ecf0f1 |
单色 | 单色 | #333333 | #555555 | #333333 | #ffffff |
阳光 | 阳光 | #f1c40f | #f39c12 | #34495e | #ffffff |
珊瑚色 | 珊瑚色 | #e67e22 | #d35400 | #2c3e50 | #f9f9f9 |
极简 | 极简 | #bdc3c7 | #95a5a6 | #2c3e50 | #ffffff |
选择主题后,主色调将映射到按钮背景和强调色,次要颜色映射到按钮悬停状态,文本颜色映射到常规文本和标签颜色,背景颜色映射到表单和输入框的背景。
颜色设置
所有颜色设置均接受:
- 十六进制颜色:
#0f8569,#fff - RGB/RGBA:
rgba(15, 133, 105, 0.8) - HSL/HSLA:
hsl(160, 80%, 29%) - 空值(继承默认值或回退到父级设置)
| 设置 | 描述 | 回退行为 |
|---|---|---|
| 表单背景 | 表单容器背景 | 透明(继承页面背景) |
| 输入框背景 | 输入框背景 | 透明 |
| 常规文本颜色 | 所有文本元素 | 浏览器默认 |
| 字段标签文本颜色 | 仅字段标签 | 回退到常规文本颜色 |
| 输入文本颜色 | 输入框内的文本 | 回退到常规文本颜色 |
| 标题颜色 | 表单标题 | 回退到常规文本颜色 |
| 描述颜色 | 表单描述 | 回退到常规文本颜色 |
| 主色(强调色) | 焦点状态、高亮 | 主题默认 |
| 边框颜色 | 输入框和元素的边框 | 主题默认 |
| 错误边框颜色 | 验证错误边框 | 红色默认 |
| 错误文本颜色 | 错误消息文本 | 红色默认 |
| 按钮背景 | 提交按钮背景 | 主色 |
| 按钮文本 | 提交按钮文本 | 白色 |
| 按钮悬停背景 | 提交按钮悬停状态 | 更深的主色 |
排版设置
| 设置 | 描述 | 可接受的值 | 默认 |
|---|---|---|---|
| 标签字体大小 | 字段标签大小 | 正整数(像素) | 14 |
| 标签字体粗细 | 字段标签粗细 | normal, bold, 100–900 | — |
| 输入字体大小 | 输入文本大小 | 正整数(像素) | 16 |
| 标题字体大小 | 表单标题大小 | 正整数(像素) | 24 |
| 标题字体粗细 | 表单标题粗细 | normal, bold, 100–900 | — |
| 描述字体大小 | 表单描述大小 | 正整数(像素) | 16 |
| 描述字体粗细 | 表单描述粗细 | normal, bold, 100–900 | — |
设计与布局设置
| 设置 | 描述 | 可接受的值 | 默认 |
|---|---|---|---|
| 表单边框半径 | 表单容器圆角 | 正整数(像素) | 0 |
| 输入框与按钮边框半径 | 输入框/按钮圆角 | 正整数(像素) | 4 |
| 表单内边距 | 表单容器内部间距 | 正整数(像素) | 0 |
适用性
| 表单类型 | 已应用样式? |
|---|---|
| 站内嵌入 | 是 |
| 站内弹出(模态框) | 是 |
| Stripe Checkout(站外) | 否 |
| 付款页面 (站内) | 是 |
下一步是什么?
- 使用表单样式设置付款表单 – 分步设置指南
- 付款方式显示类型 – 在选项卡和手风琴布局之间进行选择
仍有疑问?我们随时为您服务!
最后修改时间: