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

在 WordPress 上销售商品从未如此简单,这要归功于 Forminator,我们的 5 星级表单插件.您可以使用 Stripe 和 Paypal 集成等免费付款选项、可自定义的产品功能、折扣代码等,快速高效地设置您的商店-全部免费!

如果您想找到一种更简单的方式来安全地在线接受付款或建立一个功能性的电子商店而不会使事情过于复杂,本教程将向您展示如何超级轻松地销售东西而不必担心精心设计的 WooCommerce 设置.

我们将带您逐步了解 Forminator 的一些更高级的功能,这些功能将使您和您的购物者受益.

您还将看到 Forminator 与我们的免费电子邮件捕获插件 Hustle,可以让您的网上商店"流行"(字面意思,正如您将看到的).Hustle 可以在离开您的网站之前为您的访问者提供特别折扣,同时收集他们的电子邮件,以便您可以继续向他们进行营销.

借助 Forminator,您的访客可以立即在这样的店面购物……

卖东西超级容易……不需要 WooCommerce!

我们将从设置订单开始,然后考虑使用 Hustle 进一步增强它.

在本教程中,我们将以 Dev Man T 恤的订购表为例:

An online shop image made with Forminator.
我们使用的销售页面有大量定制选项.

奖励:当我们经历这个过程时,加入我们的乐趣吧! 点击此处查看这件 T 恤自己的网站演示并尝试一下.此外,您还可以下载此表单的文件并将其上传到您的 WordPress 网站.

我们将向您展示如何使用 Forminator 来:

  1. 选择高级订单选项
  2. 使用分页构建您的订单
  3. 使用选择字段选项创建产品标签
  4. 设置折扣和基本价格
  5. 计算税收和总价
  6. 创建结帐部分
  7. 设置特殊折扣退出意向弹出窗口(使用 Hustle)

1.选择高级订单选项

当然,您只需点击几下即可使用 Forminator 创建一个简单的订单,但我们正在将事情提升一个档次.

Forminator 可以使用高级选项构建令人印象深刻的销售页面,例如商品数量、销售税、折扣代码等.

如您所见,您可以创建专业的付款和订单表单,为您的购物者提供更多选择并具有视觉吸引力.此外,根据您的产品,可能需要包含其中许多功能.

虽然高级,但设置起来还是很简单的.

当我们完成时,您将知道如何将具有高级功能、计算等功能的复杂电子商务支付表单组合在一起……所有这些都使用免费组件构建!

2.使用分页构建您的订单

分页是分页符的字段.这非常适合将您的订购单分解成多个部分并减少混乱.

当您将第一个分页符字段添加到表单中时,您会在其他区域的顶部看到一个分页.

此订单分为三个部分.快速浏览一下它们......

 

单击分页部分将其打开并编辑表单中的分页符.在这个例子中,在标签下,它被分解为:

  • 第 1 页:选择产品
  • 第 2 页:送货地址
  • 完成:结帐
A look at the pagination set up.
为表单添加分页符标签的位置.

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

Progresss indicator and buttons text.
分页设置区域.

分解订单是引导用户完成结账流程的好方法.

3.使用选择字段选项创建产品标签

是时候确定 T 恤的选项并将其纳入表格了.为此,我们使用选择字段来选择样式颜色、尺寸. >

它们被相应地标记并放置在表单顶部的上​​部.

The select fields options for style, color, and size.
根据内容标记的选择字段.

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

The labels section where you can add various color options.
标签部分,您可以在其中添加各种选项.

样式字段的过程相同.

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

Different size options for t-shirts.
您可以看到因尺寸而异的各种价格.

计算标签是您进行计算的地方(我很快就会向您展示这一切是如何累加起来的).

您可以启用此功能并通过每个尺寸的数值指示价格.如您所见,它们各不相同.

Where individual calculations are added.
在此计算个别价格.

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

Number fields option for the amount of items that are to be purchased.
指示用户项目数的数字字段选项想购买.

您可以在字段中调整设置并指明可购买的最低和最高金额.

4.设置折扣和基本价格

当用户决定要购买的商品时,需要将所有商品加起来.您可以在此部分添加计算和折扣.

使用文本字段,您可以提及折扣选项.在这里,我们的措辞是有折扣券吗?

The Text field with the discount feature.
具有折扣功能的文本字段.

我们现在将包含两个计算字段以使折扣功能发挥作用.计算位于文本字段的右侧.

第一个折扣字段用于输入正确的折扣代码.计算字段随后会计算出 20% 的折扣并变得可见.

当未输入优惠券代码时,计算字段仍然是必需的,因此在这些情况下,此折扣字段将变为可见(您将在出现的可见性屏幕截图中看到)并将折扣金额显示为 0.

Two calculations fields for discounts.
两个计算字段.

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

The detailed calculation settings.
计算设置.

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

Calculations formula for the number of items.
您将在其中输入尺寸和尺寸的计算公式项目数.

此计算通过将"尺寸*数量"乘以 0.2 来计算折扣金额.

折扣优惠券的规则位于可见性标签中.我们将使用优惠券代码 DEVMAN20.我们使用字段作为文本1(有折扣券?),将条件作为,而价值DEVMAN20.

Calculations rule for the promo code.
当所有条件都到位时,点击完成并应用保存.

下一个计算字段(calculation-5)将设置为与另一个类似;但是,有一些变化.

我们将使用计算 ({select-3}*{number-1})*0.

The calculation formula for the size and number of items a customer wants.
一个客户物品大小和数量的计算公式想要.

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

A rule for the calculations tab.
计算选项卡中的其他规则.

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

The field for the base price.
基本价格字段的放置位置.

设置下,设置为只读,小数位数为两位.

对于计算字段,它包括在({select-3}*{number-1})-({calculation-4})处设置的计算.

Base price calculation.
底价计算公式.

此计算的工作原理是找到原始价格并将大小乘以数量字段(例如 {select-3}*{number-1}),然后减去折扣.

除此之外,没有规则或任何其他内容可以添加到此字段中.

5.计算税收和总价

数字拼图的最后一块是添加税金总价.这些都是在我们的表单中基本价格下方添加的计算字段(计算 1 和计算 2).

The fields for the tax and total price.
税收和总价字段.

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

Amount of tax entered and description.
您在此处描述将向客户收取的税额.

设置中,字段类型为只读,小数位数为2.

至于计算,包含在税收中的是公式{calculation-1}*0.18.这意味着 Base Price 的 18% 是我们在上一步中计算出的价格.

Where the tax formula is entered.
税收公式.

此字段不需要其他任何内容.

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

The total amount is calculated here.
总量计算.

这将用于所有计算和表单的第一部分.Forminator 将计算客户的数字并将所有内容相加以确定价格.

从这里,客户将进入下一个部分,在那里他们将输入他们的地址.

您可以看到分页符表示下一部分将仅用于使用地址字段创建的地址.另一个分页符紧随其后.

Where the address field is entered between page breaks.
分页符之间的地址字段.

对于地址字段,它包括所需的重要信息,仅此而已.您可以随意编辑特定信息(例如"国家/地区").

客户现在可以点击"下一步"结帐.查清!

6.创建结帐部分

设置这部分非常简单.请确保您有一个与 Forminator 相关联的 Stripe 或 PayPal 帐户.如果您需要这方面的帮助,请参考我们的文档.

我们包含的所有字段都是姓名电子邮件条纹.

Payment fields for the checkout area.
为结帐区域创建的字段.

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

Where the submit button field is located.
提交按钮字段.

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

Where you'll enter the button text and error message.
按钮文本和错误消息.

有了所有这些信息,现在是兑现并完成购买的时候了!

但是呃-哦...

看起来一位客户在没有购买我们精美的 T 恤的情况下即将离开页面.弹出窗口是您在他们起飞前向他们提供他们无法拒绝的报价的地方.

7.设置一个特殊的折扣退出意图弹出窗口-(与 Hustle)

Hustle 是我们的免费营销插件,可在您需要时弹出并保存销售.当客户准备好保释时,您会看到让他加入 Forminator 是多么有益.

Image of Forminator and Hustle teaming up.
Hustle 和 Forminator:他们一起组成了完美的二人组.

您可以设置一个弹出的促销活动,并提供与订单对应的特殊折扣代码.

如果他们选择折扣,您还将获取他们的电子邮件地址以继续营销.

所以,让我们设置这个表格,让这个购物者不能去任何地方......

Hustle 下载并激活后,您可以创建一个新的WordPress 管理中的弹出窗口.

在 Hustle 的内容区域,我们添加了标题不要错过这个! 副标题,我们赠送 20% 的折扣.我们还添加了图片.

View of the content area of Hustle.
Hustle 的内容区域.

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

View of Hustle’s main content area.
Hustle 的主要内容区.

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

Where the email area of Hustle is located.
Hustle 的电子邮件区域.

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

Showing where you'll enter a message and promo code.
您可以在其中输入任何消息以及促销代码.

他们的电子邮件地址也可以添加到集成区域中的第 3 方应用程序(例如 MailChimp).

现在推出此促销活动,Hustle 知道何时在他们离开之前吸引他们的注意力.在行为部分的弹出式触发器下,您可以在显示时选择退出意图.

View of the exit intent area of Hustle.
在哪里设置广告的弹出窗口.

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

Look at the promotion created by Hustle.
促销弹出窗口.

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

A look at the discount code being displayed.
DEVMAN20 是他们可以用来打折的.

有了这个,他们很有可能会按 PLACE ORDER…

 

添加弹出窗口和促销活动可以帮助销售,建立您的列表,并为喜欢优惠折扣的用户创造积极的体验. >

如果您想知道, Elementor 帮助创建了我们的表单.Elementor 是一个 5 星级的 WordPress 页面构建器插件.您可以在此处了解有关 Elementor 的更多信息.

这些形式不是常态

如您所见,多亏了 Forminator,您可以启动和资助通过创建高于正常的结帐流程,免费关闭 WordPress 上的在线商店.

您还可以使用 Forminator 执行更多操作.他有电子签名选项,与FortressDB 集成,计算器 等等!借助所有自定义选项,您可以完全按照自己的意愿设置在线商店.

有关创建订单和接受信用卡付款的更多信息,请务必查看此快速视频:

最后,如果您在开店时需要其他帮助,请联系我们的 WPMU DEV 24/7 支持超级英雄.

有了 Forminator 和 Hustle,您的商店应该很快就会成型.

1

发表回复