使用 Forminator 创建一个简单的付款表格(免费!)


在 WordPress 上销售商品从未如此简单,这要归功于 Forminator,我们的 5 星级表单插件.您可以使用 Stripe 和 Paypal 集成等免费付款选项、可自定义的产品功能、折扣代码等,快速高效地设置您的商店-全部免费!
如果您想找到一种更简单的方式来安全地在线接受付款或建立一个功能性的电子商店而不会使事情过于复杂,本教程将向您展示如何超级轻松地销售东西而不必担心精心设计的 WooCommerce 设置.
我们将带您逐步了解 Forminator 的一些更高级的功能,这些功能将使您和您的购物者受益.
您还将看到 Forminator 与我们的免费电子邮件捕获插件 Hustle,可以让您的网上商店"流行"(字面意思,正如您将看到的).Hustle 可以在离开您的网站之前为您的访问者提供特别折扣,同时收集他们的电子邮件,以便您可以继续向他们进行营销.
借助 Forminator,您的访客可以立即在这样的店面购物……
卖东西超级容易……不需要 WooCommerce!
我们将从设置订单开始,然后考虑使用 Hustle 进一步增强它.
在本教程中,我们将以 Dev Man T 恤的订购表为例:

奖励:当我们经历这个过程时,加入我们的乐趣吧! 点击此处查看这件 T 恤自己的网站演示并尝试一下.此外,您还可以下载此表单的文件并将其上传到您的 WordPress 网站.
我们将向您展示如何使用 Forminator 来:
1.选择高级订单选项
当然,您只需点击几下即可使用 Forminator 创建一个简单的订单,但我们正在将事情提升一个档次.
Forminator 可以使用高级选项构建令人印象深刻的销售页面,例如商品数量、销售税、折扣代码等.
如您所见,您可以创建专业的付款和订单表单,为您的购物者提供更多选择并具有视觉吸引力.此外,根据您的产品,可能需要包含其中许多功能.
虽然高级,但设置起来还是很简单的.
当我们完成时,您将知道如何将具有高级功能、计算等功能的复杂电子商务支付表单组合在一起……所有这些都使用免费组件构建!
2.使用分页构建您的订单
分页是分页符的字段.这非常适合将您的订购单分解成多个部分并减少混乱.
当您将第一个分页符字段添加到表单中时,您会在其他区域的顶部看到一个分页.
此订单分为三个部分.快速浏览一下它们......
单击分页部分将其打开并编辑表单中的分页符.在这个例子中,在标签下,它被分解为:
- 第 1 页:选择产品
- 第 2 页:送货地址
- 完成:结帐

在设置部分,您可以选择使用进度指示器来向用户显示他们浏览表单的进度.此外,您可以自定义下一个和上一个按钮的文本.

分解订单是引导用户完成结账流程的好方法.
3.使用选择字段选项创建产品标签
是时候确定 T 恤的选项并将其纳入表格了.为此,我们使用选择字段来选择样式、颜色、和尺寸. >
它们被相应地标记并放置在表单顶部的上部.

然后可以根据要在标签部分中包含的内容来编辑每个标签.例如,对于颜色,表单具有绿色和黄色选项.

样式字段的过程相同.
对于尺寸,我们需要包括一些计算变量,因为这也是显示价格的地方.价格因大小而异.

计算标签是您进行计算的地方(我很快就会向您展示这一切是如何累加起来的).
您可以启用此功能并通过每个尺寸的数值指示价格.如您所见,它们各不相同.

要指明的下一个选项是金额.为此,我们使用了 Number 字段.你想要多少? 就是它的标签方式.

您可以在字段中调整设置并指明可购买的最低和最高金额.
4.设置折扣和基本价格
当用户决定要购买的商品时,需要将所有商品加起来.您可以在此部分添加计算和折扣.
使用文本字段,您可以提及折扣选项.在这里,我们的措辞是有折扣券吗?

我们现在将包含两个计算字段以使折扣功能发挥作用.计算位于文本字段的右侧.
第一个折扣字段用于输入正确的折扣代码.计算字段随后会计算出 20% 的折扣并变得可见.
当未输入优惠券代码时,计算字段仍然是必需的,因此在这些情况下,此折扣字段将变为可见(您将在出现的可见性屏幕截图中看到)并将折扣金额显示为 0.

要使其发挥作用,请转到第一个字段 (calculator-4) 的 设置 区域.字段类型需要设置为只读,,小数位设置为2.

在计算区域,我们添加了公式 ({select-3}*{number-1})*0.2
.这表明 Select-3 (Size) 乘以 Number-1(你想要多少?)和我们想要提供的百分比折扣(在这种情况下,20 %).

此计算通过将"尺寸*数量"乘以 0.2 来计算折扣金额.
折扣优惠券的规则位于可见性标签中.我们将使用优惠券代码 DEVMAN20.我们使用字段作为文本1(有折扣券?),将条件作为是,而价值是DEVMAN20.

下一个计算字段(calculation-5)将设置为与另一个类似;但是,有一些变化.
我们将使用计算 ({select-3}*{number-1})*0
.

此外,在可见性标签中,我们将条件更改为不是.其他所有设置都与之前的"计算"选项卡相同.

既然我们已经设置了这些条件,我们将添加基本价格.基本价格是另一个计算字段(calculation-1).

在设置下,设置为只读,小数位数为两位.
对于计算字段,它包括在({select-3}*{number-1})-({calculation-4})
处设置的计算.

此计算的工作原理是找到原始价格并将大小乘以数量字段(例如 {select-3}*{number-1}
),然后减去折扣.
除此之外,没有规则或任何其他内容可以添加到此字段中.
5.计算税收和总价
数字拼图的最后一块是添加税金和总价.这些都是在我们的表单中基本价格下方添加的计算字段(计算 1 和计算 2).

对于税额字段,在标签下添加税额说明,这样用户就会知道它是 18%(您可以设置任何您需要的税率).

在设置中,字段类型为只读,小数位数为2.
至于计算,包含在税收中的是公式{calculation-1}*0.18
.这意味着 Base Price 的 18% 是我们在上一步中计算出的价格.

此字段不需要其他任何内容.
最后,总价(计算 3)的字段包括公式 {calculation-1}+{calculation-2}
.此公式将通过将基本价格与税金相加来合计总金额.

这将用于所有计算和表单的第一部分.Forminator 将计算客户的数字并将所有内容相加以确定价格.
从这里,客户将进入下一个部分,在那里他们将输入他们的地址.
您可以看到分页符表示下一部分将仅用于使用地址字段创建的地址.另一个分页符紧随其后.

对于地址字段,它包括所需的重要信息,仅此而已.您可以随意编辑特定信息(例如"国家/地区").
客户现在可以点击"下一步"结帐.查清!
6.创建结帐部分
设置这部分非常简单.请确保您有一个与 Forminator 相关联的 Stripe 或 PayPal 帐户.如果您需要这方面的帮助,请参考我们的文档.
我们包含的所有字段都是姓名、电子邮件和条纹.

从这一点来看,唯一改变的是字段底部的提交按钮.下订单是文字.

我们还将标签区域中的错误消息编辑为错误:您的表单无效,请修复错误! >

有了所有这些信息,现在是兑现并完成购买的时候了!
但是呃-哦...
看起来一位客户在没有购买我们精美的 T 恤的情况下即将离开页面.弹出窗口是您在他们起飞前向他们提供他们无法拒绝的报价的地方.
7.设置一个特殊的折扣退出意图弹出窗口-(与 Hustle)
Hustle 是我们的免费营销插件,可在您需要时弹出并保存销售.当客户准备好保释时,您会看到让他加入 Forminator 是多么有益.

您可以设置一个弹出的促销活动,并提供与订单对应的特殊折扣代码.
如果他们选择折扣,您还将获取他们的电子邮件地址以继续营销.
所以,让我们设置这个表格,让这个购物者不能去任何地方......
当 Hustle 下载并激活后,您可以创建一个新的WordPress 管理中的弹出窗口.
在 Hustle 的内容区域,我们添加了标题不要错过这个! 和副标题,我们赠送 20% 的折扣.我们还添加了图片.

在主要内容区域,我们添加了一条消息,敦促用户注册.

要提供代码,用户需要输入他们的电子邮件地址.插入电子邮件是在 Hustle 的电子邮件部分完成的.您只需放置电子邮件字段.此外,按钮文本已更改为获取我的折扣券.

一旦他们选择加入,就会通过将折扣代码添加到提交行为中来向他们提供折扣代码.

他们的电子邮件地址也可以添加到集成区域中的第 3 方应用程序(例如 MailChimp).
现在推出此促销活动,Hustle 知道何时在他们离开之前吸引他们的注意力.在行为部分的弹出式触发器下,您可以在显示时选择退出意图.

然后用户将获得特别折扣:

一旦他们选择加入,他们就会获得促销代码.谁能享受 20% 的折扣?

有了这个,他们很有可能会按 PLACE ORDER…
添加弹出窗口和促销活动可以帮助销售,建立您的列表,并为喜欢优惠折扣的用户创造积极的体验. >
如果您想知道, Elementor 帮助创建了我们的表单.Elementor 是一个 5 星级的 WordPress 页面构建器插件.您可以在此处了解有关 Elementor 的更多信息.
这些形式不是常态
如您所见,多亏了 Forminator,您可以启动和资助通过创建高于正常的结帐流程,免费关闭 WordPress 上的在线商店.
您还可以使用 Forminator 执行更多操作.他有电子签名选项,与FortressDB 集成,计算器 等等!借助所有自定义选项,您可以完全按照自己的意愿设置在线商店.
有关创建订单和接受信用卡付款的更多信息,请务必查看此快速视频:
最后,如果您在开店时需要其他帮助,请联系我们的 WPMU DEV 24/7 支持超级英雄.
有了 Forminator 和 Hustle,您的商店应该很快就会成型.