wordpress知识库
网站首页 > 知识库 > wordpress知识 >

使用WPForms创建带付款的表单

2019/12/22

有时,您可能希望让客户选择在付款或捐赠中汇款的金额。例如,可以创建一个“按需付费”模型。

其他时候,您可能希望收集其他详细信息作为表单的一部分,甚至允许用户将付费内容提交到博客或网站。

如果您想创建一个灵活的付款表单,那么需要一个高级表单构建器插件。WPForms是wordpress最好的表单构建器插件。可以使用它快速创建许多不同的表单,包括联系表单、预订表单等。超过600万网站所有者使用WPForms。

使用此插件,可以创建一个表单,根据客户是否要向您付款来显示不同的字段。

在本指南中,我们将使用WPForms Pro,因为它带有插件,可以轻松使用流行的支付网关(如Stripe和PayPal)收款。此外,额外的交易费用为零。

还有一个WPForms Lite版本,可以100%免费使用。它允许接受Stripe付款,但通过表格付款需要额外支付3%的费用。

激活WPForms后,前往wordpress仪表盘中的WPForms »设置。

WPForms的专业设置

您现在可以在“许可证密钥”字段中输入许可证密钥。可以在WPForms帐户中找到此信息。

激活WPForms插件后,需要安装至少一个支付插件。

为了鼓励访问者为产品或服务付费,您可能需要设置多个wordpress插件,以便访问者可以使用他们喜欢的方式付款。

要安装一个或多个支付插件,只需转到WPForms »插件。

您现在可以找到要使用的插件,然后单击其“安装插件”按钮。WPForms允许使用Stripe、Square、PayPal和Authorize.net接受付款。

例如,如果您想使用PayPal接受付款,则需要安装PayPal标准插件。

WPForms的PayPal插件

激活一个或多个支付插件后,下一步是将WPForms连接到相关的支付帐户。例如,如果您安装了Square插件,则需要将WPForms连接到Square帐户。

若要建立此连接,请转到WPForms »设置。然后,可以点击“付款”。

WPForms的付款设置

在此屏幕上,您会看到“连接…”按钮,用于您安装的每个付款插件。

在这里,只需单击“连接…”按钮。这将启动一个设置向导,该向导将指导您完成将WPForms连接到付款帐户的过程。

将WPForms连接到Square

只需对要使用的每个付款插件重复这些步骤即可。

完成后,单击屏幕底部的“保存设置”按钮。然后,转到WPForms »添加新的。

创建新的wordpress表单

在这里,在“命名表单”字段中输入表单的名称。网站访问者不会看到该名称,因此仅供参考。

使用WPForms创建付款表单

WPForms有1300+不同的模板,因此可以快速入门并构建各种表单。要仔细查看模板,只需将鼠标悬停在模板上即可。然后,继续并单击“查看演示”按钮。

预览信用卡付款模板

在本指南中,我们将使用简单联系表单模板,但可以向任何WPForms模板添加付款字段。当您找到要使用的模板时,只需单击其“使用模板”按钮即可。这将启动WPForms拖放表单构建器。

WPForms简单联系人模板

简单联系表单模板已包含客户可以在其中键入其姓名、电子邮件地址和消息的字段。

因此,接下来,我们需要添加一个字段,访问者可以在其中决定是否向您付款。执行此操作的最简单方法是使用多项选择字段。在左侧菜单中,找到“多项选择”字段,然后使用拖放将其添加到表单中。

WPForms的“多项选择”字段

首先,我们需要更改WPForms在“多项选择”部分顶部显示的标签。

这是询问访问者是否要向您付款的理想场所。例如,可以使用“您想向我们捐款吗?”或“您想支持这个网站吗?要更改默认标签,只需单击以选择表单中的“多项选择”部分即可。左侧菜单现在将显示可用于自定义此部分的所有设置。在左侧菜单中,删除“标签”字段中的占位符“多项选择”文本。然后,可以键入要使用的新文本。

带有可选付款部分的wordpress表单

默认情况下,“多项选择”部分有三个选项,但我们只需要两个选项。要删除其中一个选项,请继续并单击它旁边的–按钮。

从WPForms中删除字段

下一步是自定义“第一选择”和“第二选择”的文本。在左侧菜单中,只需删除占位符文本并输入要使用的文本即可。例如,您可能想输入“是,我想支持该网站”和“不,谢谢”。

向wordpress表单添加可选付款

在创建带有付款选项的wordpress表单时,您可能希望让访问者决定向您发送多少钱。为此,只需单击左侧菜单中的“添加字段”选项卡。然后,将“单个项目”字段拖放到表单上。

将“单个项目”字段添加到wordpress表单

要自定义此字段,只需单击它即可。默认情况下,该字段显示“单个项目”标签。可以通过在左侧菜单中的“标签”字段中输入内容,将此标签替换为您自己的文本。例如,您可能需要输入诸如“我想向您发送…”之类的文本。或“捐款金额”。

自定义wordpress表单

接下来,打开“项目类型”下拉列表,然后单击“用户定义”。访问者现在可以在此字段中输入任何值,并向您发送这笔款项。

将用户定义的字段添加到wordpress表单

您可能还想建议您想要获得的金额。这可以使访问者更容易填写表格,因为他们可以单击以选择金额,而不必自己做出此决定。要向表单添加一些建议,只需将“多个项目”字段拖放到wordpress表单上即可。

wordpress付款表单

然后,按照上述相同过程自定义该部分的标签和选项文本。完成此操作后,需要通过在旁边的字段中键入值来为每个选项设置价格。

带有可选付款的wordpress表单

默认情况下,“多个项目”部分有三个选项。要添加更多选择,只需单击“+”图标即可。然后,可以自定义新选项的文本,并按照上述相同过程键入值。

向wordpress表单添加付款选项

想要从“多个项目”部分中删除一个选项吗?为此,只需单击其“-”按钮即可。

从wordpress表单中删除字段

添加一些字段后,可以通过拖放这些字段来更改这些字段在表单中的显示顺序。完成所有这些操作后,需要在表单中添加至少一个付款选项。在左侧菜单中,滚动到“付款字段”部分。在这里,可以找到您安装的所有不同付款插件的字段。要将付款选项添加到表单中,只需单击它即可。

向wordpress表单添加付款字段

添加付款选项字段后,最好单击它。WPForms现在将显示可用于配置此字段的所有设置。例如,如果您点击“Stripe信用卡”字段,将能够编辑标签并添加描述。

在wordpress中配置Stripe支付

我们只想向选择向您付款的访问者显示付款字段。为此,需要为付款字段启用条件逻辑。如果您尚未付款,请点击以选择表单中的付款字段。然后,只需单击左侧菜单中的“智能逻辑”选项卡。完成此操作后,继续并单击“启用条件逻辑”滑块将其从灰色(非活动)变为蓝色(活动)。

向wordpress表单添加条件逻辑

接下来,我们需要告诉WPForms仅在访问者选择“是,我想支持该网站”选项时才显示付款字段。确保将“此字段如果”下拉列表设置为“显示”。然后,打开显示“选择字段”的字段,然后选择“是否要支持网站?

创建具有条件逻辑的wordpress表单

完成此操作后,打开下一个下拉列表,然后单击“是”。最后,打开默认显示“选择选项”的下拉列表,然后选择“是,我想支持该网站”字段。

WPForms的智能逻辑设置

在上图中,我们告诉WPForms仅在访问者确认他们想要支持该网站时才显示付款字段。

向WPForms添加付款方式

下一步是启用表单付款。为此,请单击左侧菜单中的“付款”选项卡。

现在,将看到可以为表单启用的所有不同付款选项。

使用WPForms配置PayPal付款

要开始使用,只需单击要配置的支付选项即可。

之后,只需选中“启用…”旁边的框即可。

根据付款选项的不同,您可能需要配置一些额外的设置。例如,如果您要启用PayPal,则需要输入要接收付款的电子邮件地址。

在WPForms中启用PayPal付款

您还需要在付款设置中使用条件逻辑规则。

要使用条件逻辑,请单击“启用条件逻辑”滑块。然后,打开“如果收取此费用”下拉菜单,然后选择“不处理”。

为wordpress支付创建条件逻辑规则

完成此操作后,请继续并打开默认显示“选择字段”的下拉列表。您现在可以选择“您想支持此网站吗?”或类似字段。

然后,确保下一个下拉菜单设置为“是”。

创建具有条件逻辑的可选付款表单

完成此操作后,您就可以打开“选择选择”下拉菜单,然后单击“否,谢谢”或类似字段。

现在,如果访问者选择“不,谢谢”选项,网站将拒绝处理任何付款,无论他们在表单的其余部分输入什么。

WPForms的条件逻辑设置

如果您提供多种付款方式,则只需通过选中“启用”框,然后配置任何额外设置来重复上述过程。您还可以启用条件逻辑。

在下面的屏幕截图中,可以看到Stripe与PayPal相比具有不同的设置,因此始终值得仔细检查这些额外的设置。

使用WPForms配置Stripe支付

完成此操作后,最好启用AJAX表单提交。这允许用户提交付款表单,而无需重新加载整个页面。

要启用AJAX提交,只需转到“设置”»“常规”。

编辑WPForms设置

然后,只需单击即可展开“高级”部分。

之后,可以继续选中“启用AJAX表单提交”框。

启用AJAX提交

当您对wordpress表单的外观感到满意时,请继续保存更改。

为此,只需单击屏幕顶部的“保存”按钮。

保存WPForms表单

默认情况下,每次有人提交此表单时,WPForms都会向wordpress管理员发送电子邮件。但是,您可能只想在有人选择向您付款时收到通知。

要更改WPForms的默认电子邮件设置,请单击“设置”选项卡。然后,继续并单击左侧菜单中的“通知”。

为wordpress表单创建通知

现在,滚动到屏幕底部,然后单击“启用条件逻辑”滑块。

激活滑块后,WPForms将显示一些额外的设置。

创建条件逻辑电子邮件和通知

接下来,确保将“此通知条件”下拉列表设置为“发送”。

完成此操作后,打开默认显示“选择字段”的下拉列表,然后单击“您要支持该网站吗?”或类似字段。

接下来,确保下拉列表设置为“是”。

使用可选付款创建wordpress表单

最后,打开默认显示“选择选择”的下拉列表。

最后一步是选择“是的,我想支持该网站”或类似字段。

在WPForms中启用条件逻辑

当您对这些更改感到满意时,请不要忘记单击“保存”按钮。

默认情况下,WPForms会将电子邮件发送到wordpress管理员电子邮件。可以将这些邮件发送到任何其他电子邮件地址,甚至多个地址。

要更改默认设置,请找到“发送到电子邮件地址”字段。默认情况下,此值设置为{admin_email}。这是一个动态值,告诉wordpress将其电子邮件发送给wordpress管理员。

可以通过在“发送到电子邮件地址”字段中键入新地址来将此动态文本替换为任何其他电子邮件地址。

如果要向多个人发送电子邮件,只需用逗号分隔每个地址,如以下屏幕截图所示。

创建电子邮件通知

默认情况下,WPForms使用“新条目”和表单名称作为电子邮件主题行。

如果您想使用其他内容,只需在“电子邮件主题行”中输入新文本即可。

创建自定义WPForms主题行

另一种选择是在电子邮件主题中使用动态文本。为此,请单击“显示智能标记”链接,然后从“可用字段”列表中选择一个标记。

现在,当WPForms创建其电子邮件时,它会自动将智能标记替换为从提交的表单中获取的值。例如,如果您单击“总金额”,则WPForms将在其电子邮件主题行中显示总付款。

WPForms的智能标记

您还可以更改电子邮件正文中包含的文本。

同样,可以选择使用智能标记来创建信息量更大的电子邮件。

将动态文本与WPForms一起使用

创建自定义电子邮件通知后,需要确保将它们发送到收件人的电子邮件收件箱,而不是垃圾邮件文件夹。

最好的方法是使用SMTP服务提供商以及WP Mail SMTP来提高电子邮件的送达率。有关更多详细信息,请参阅我们的指南,了解如何修复wordpress不发送电子邮件问题。

您可能还希望向客户显示确认消息。例如,可以确认您已安全收到他们的表单,或者向他们显示个性化的“谢谢”消息。每当客户提交wordpress表单时,WPForms都会自动显示此消息。

要配置此消息,请单击“确认”选项卡。然后,只需打开“确认类型”下拉菜单,然后选择“消息”。

显示自定义表单确认消息

如果您想向所有访问者显示相同的文本,那么您只需在“确认消息”框中输入文本即可。

另一种选择是通过添加智能标记来创建个性化消息,遵循上述相同过程。

您可能更愿意显示特定页面或将访问者重定向到另一个URL,而不是显示消息。为此,只需打开“确认类型”下拉菜单。

您现在可以从“显示页面”或“转到URL”中进行选择。

更改付款确认设置

之后,可以使用这些设置来配置WPForms将在客户提交表单后显示的页面或URL。

当您对这些设置感到满意时,请不要忘记通过单击“保存”按钮来保存更改。

完成所有这些之后,您就可以将此表单添加到网站了。

为此,只需打开页面或发布要显示表单的位置即可。然后单击加号“+”图标。

在出现的弹出窗口中,键入“WPForms”以查找正确的块。一旦您单击WPForms块,它就会将该块添加到页面。

wordpress WPForms块

在新块中,继续并单击以打开下拉菜单。

现在,将看到使用WPForms创建的所有表单的列表。只需单击即可选择带有付款选项的wordpress表单。

WPForms wordpress块

WPForms现在将直接在wordpress编辑器中显示表单外观的预览。

您还可以通过单击工具栏中的“预览”按钮来预览整个页面。

带有付款选项的wordpress表单