如何使用付款表单块

阅读时间： 4 分钟 | 难度： 初学者

概述

WP Simple Pay – 付款表单块是将付款表单插入 Gutenberg 文章或页面的推荐方式。它在编辑器内提供表单的实时预览，在块侧边栏中公开显示选项，并在页面上呈现与客户看到的相同表单 — 无需您复制短代码。

该块在功能上等同于 短代码，但更易于发现，并提供反映表单当前表单样式设置的编辑器预览。

先决条件

• WP Simple Pay（任何级别 — 该块随免费插件一起提供）
• 运行块编辑器的 WordPress 网站（Gutenberg）
• 至少一个已发布的付款表单

步骤 1：插入块

1. 编辑您希望表单出现的文章或页面。
2. 单击+块插入器。
3. 搜索 WP Simple Pay 或 付款表单。
4. 点击 WP Simple Pay – 付款表单块。

出现一个占位符，提示您选择一个表单。

步骤 2：选择表单

使用块占位符中的下拉菜单选择要渲染的已发布付款表单。选择后，该块将占位符替换为表单的实时预览，包括标题、描述、字段和提交按钮 — 并使用表单当前的表单样式设置进行样式设置。

如果您在插入块后更改了表单的表单样式，下次重新加载编辑器时，预览将更新。

步骤 3：配置显示选项

选中该块后，右侧的块设置侧边栏会显示两个切换开关：

• 显示标题 — 启用时（默认），在字段上方显示表单的标题。禁用以隐藏标题 — 当周围页面已有标题时很有用。
• 显示描述 — 启用时（默认），在字段上方显示表单的描述文本。禁用以实现紧凑布局。

如果您禁用两者，标题/描述包装器将被完全隐藏，因此不会留下多余的空白。

该块还通过标准的块工具栏支持居中对齐。居中对齐后，表单、嵌入的标题和提交按钮将在页面内容宽度的中心水平居中，并且标题区域将限制为最大宽度 400px。

步骤 4：发布和预览

保存或发布页面。在前端查看表单的渲染状态。此区块使用与短代码相同的渲染管道，因此前端行为完全一致。

区块与短代码

	区块	短代码
编辑器预览	实时，已样式化	无 — 仅占位符
显示切换	UI 复选框	手动编辑短代码属性
对齐	区块工具栏	包装成 HTML/CSS
可在经典编辑器中使用	否	是
可在微件中使用	是（区块微件）	是
可在页面构建器中使用	取决于构建器	是（通用）

何时使用区块：现代古腾堡帖子和页面、FSE 模板、基于区块的微件。

何时使用短代码：经典编辑器、没有第一方区块支持的页面构建器、直接调用 do_shortcode() 的自定义主题模板。

常见问题解答

表单预览显示但客户无法付款 — 为什么？

区块为编辑器预览和访问者渲染相同的表单。如果预览显示表单但提交失败，问题在于表单配置本身（缺少付款方式、无效的 Stripe 密钥、缺少必填字段），而不是区块。请检查 WP Simple Pay > 付款表单以及表单的常规/付款选项卡。

我可以在同一页面上使用多个付款表单区块吗？

可以 — 每个区块都可以渲染不同的表单。该插件的前端资源足够智能，可以处理同一页面上的多个表单而不会发生冲突。

为什么编辑器预览与我在前端看到的不匹配？

编辑器预览反映了编辑器加载时表单的已保存状态。如果您在另一个选项卡中更改了表单，请保存/刷新编辑器以查看它们。前端始终渲染最新保存的版本。

该区块是否适用于全站点编辑 (FSE) 模板？

是的。该区块可以插入到任何支持区块的上下文中，包括 FSE 模板、模板部件和可重用区块/模式。

我可以为每个页面单独设置嵌入式表单的样式吗？

表单样式是按表单设置，而不是按区块设置。要在不同页面上使用不同样式，请创建多个表单并在每个页面上插入相应的区块。

此区块与 WP Simple Pay 按钮区块有什么区别？

付款表单区块将整个表单内嵌。按钮区块仅显示一个按钮，点击时会在覆盖层（模态框）中打开表单 — 非常适合着陆页，您希望有一个清晰的号召性用语，而不是一个可见的表单。请参阅 如何使用付款按钮区块。

下一步是什么？

• 如何使用表单样式自定义付款表单 – 自定义内嵌表单的外观
• 如何使用订阅管理区块 – 让订阅者管理他们的套餐
• 如何配置付款表单的常规设置 – 配置表单本身