本文详细介绍超强免费表单Jet Form Buider制作B2B询盘表单实现的过程,可以实现表单提交重定向,以及邮件转发关键词过滤,同时可以跟踪用户浏览的路径。比大部分付费表单功能还要强大。

超强免费表单Jet Form Buider制作B2B询盘表单教程

1、安装免费表单插件Jet Form Buider

免费版本在你的WordPress网站后台的插件库中搜并在线安装激活。

image 5 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

2、创建B2B询盘表单

通过Jet Form Builder菜单下面的Form菜单进入表单列表,你可以手动创建,通过导入文件创建,还可以通过AI创建(免费版本每月有15次的AI额度)。

这里我们讲解如何手动创建,需要介绍一些B2B表单必备字段的详细细节。

点击【Add New Form】进入新建标签页面。

新建Jet Form表单 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

1)设置表单名称

第一步需要设置新表单的名称。Jet From Builder默认使用的是古腾堡编辑器。

设置Jet新建表单名称 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

然后你可以选择一些做好的模版,这里我是从0开始,可以点击【Start From Scratch】按钮开始添加表单字段。

2)设置表单字段

B2B询盘表单通常会设置5个字段和一个提交按钮。当然实际的表单字段设置可以更具你自己的需求进行调整,可以参照Jet Form Builder文档进行设置。它还支持去抓取你网站中的产品分类,产品,文章分类等信息作为选择字段的数据源,非常灵活好用。

Name字段

从古腾堡元素中添加一个Text field表单元素到页面中。

对字段进行设置,按照我红色标记的地方进行设置即可,其他部分默认即可。

Company字段

Company字段也是用Text field表单元素设置,按照下面的红色标记进行设置。

Email字段

Email字段也是用Text field表单元素设置,按照下面的红色标记进行设置。需要将其设置为必填字段,同时字段类型设置为Email。

Email字段设置 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

Phone字段

Email字段也是用Text field表单元素设置,我会给它设置Input Mask,限制用户只能输入电话号码格式。

Message字段

Submit按钮

Submit按钮是一开始就添加好的,基本不需要进行修改了,一切默认即可,你可以修改按钮显示的文字。

3、设置表单动作

B2B询盘表单提交的主要3个动作:保存提交数据,重定向到特点页面,转发邮件提醒。然后在邮件转发动作中我会设置关键词过滤,最后再设置一下表单的安全提交验证,就完成了表单制作。

1)保存用户提交表单的数据

2)重定向到Thank you页面

3)转发表单提交邮件提醒

4)邮件转发关键词过滤

5)表单提交安全验证

4、如何将Jet Form制作的B2B询盘表单添加到页面

1)古腾堡页面如何添加表单

2)Elementor页面如何添加表单

3)Bricks页面如何添加表单

4)通过短码将表单填到页面

5、直接下载我制作的询盘表单Demo

本教程制作表单的导出json文件:

通过网盘分享的文件:jet-inquiry-form (1).json
链接: https://pan.baidu.com/s/1IPlj83vgLPFEMh2Dtq8bHw?pwd=i111 提取码: i111

下载之后,在网站后台插件库中搜索并安装插件Jet Form Buider。安装启用插件之后,打开Jet Form Buider的Form菜单,点击顶部的【Input Form Json】导入文件。

image - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

导入之后将自动跳转到导入的表单编辑,你只需要修改一些关键信息,尤其是邮件转发动作中的收件人,网站信息,发件人(发件人修改成你网站的SMTP服务的邮箱地址),以及重定向的页面(改成你自己的thank you页面),即可测试和使用。

1)修改重定向页面

在Form表单的编辑页面,点击Post Submit Action中的【Redirect to Page】选项修改重定向到你自己的thank you页面路径。如果你的thank you页面路径和我一样,就可以不用修改。修改之后记得点击更新按钮保存设置。

修改重定向页面 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

2)修改邮件转发配置

在Form表单的编辑页面,点击Post Submit Action中的【Send Email】选项修改邮件转发的设置。邮件转发中会包含比较多的内容,我们先修改Action,点击小笔头工具打开Action设置。

image 1 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

修改Mail To邮件地址,改成你自己用来接收询盘消息的邮箱地址,可以添加多个邮箱地址用英文逗号隔开即可。

image 3 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP
image 8 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

如果你需要抄送或者秘密抄送可以开启下面的Use CC/BCC,然后配置邮箱地址即可。

Repay To用于设置回复邮箱的地址,即当你收到这个询盘邮件提醒时,你可以直接点击回复邮件,然后邮件回复到的邮箱地址,这里我们设置为表单中的邮箱字段,然后在【REPLAY TO EMAIL FIELD】中选择表单中对应的邮箱字段即可。

image 9 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

接下来修改邮件主题(Subject),中括号中的文本你可以使用表单字段,也可以修改成你自己的网站名称。表单字段从Subject旁边的扳手按钮中获取即可。

image 10 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

Form Name设置修改,我这里设置的是用户提价表单中的名称和公司字段组合,你也可以修改成别的,别网站名称。

image 11 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

From Email Address修改成你网站SMTP服务的邮箱地址。

image 12 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

其他选项根据你自己的需求调整,也可以直接用我Demo中的配置,不必修改。修改完成之后记得点击更新按钮保存设置。

image 2 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

3)修改关键词过滤

点击Edit Condition & Events可以编辑和修改关键词过滤,我的Demo中过滤的关键词如下:

Company字段:Google、google

Message字段:https://、http://、SEO、seo

只要用户提交的表单对应字段中包含匹配的关键词,则不会转发邮件,这样避免收到大量的广告邮件。

你可以根据你自己的需求重新设置或者增加减少。需要注意逻辑关系,按照我原本设置好的方式设置即可。

image 13 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

4)修改安全验证

最后你还要修改表单提交安全验证,我的Demo里面默认没有开启,你需要开启,并配置。

你可以配置Google V3验证,然后在安全验证中启用即可。

将Google V3 Key添加到Jet Form Builder设置里面的Captcha Settings中的 reCAPTCHA v3即可。

将Google V3 Key添加到Jet Form Builder设置里面的Captcha Settings中的 reCAPTCHA v3即可。 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

另外Jet Form Builder还支持hCaptcha验证以及Friendly Captcha和Turnstile(Cloudflare提供),根据你自己的需求配置使用即可。

Jet Form Builder还支持hCaptcha验证以及Friendly Captcha和Turnstile(Cloudflare提供) - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

5)开启User Journey

如果你需要在表单提交详情里面看到用户的浏览路径,可以在Jet Form Builder中卡其User Journey。

User Journey 1 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

开启之后,每一个用户提交都会包含用户浏览路径。

6)在前端调用Jet Form表单

修改好表单之后,你可以通过Elementor、Bricks编辑器的元素直接调用并调整展示样式。同时Jet Form还提供短码,可以在任意短码中调用。

Jet Form短码 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

你可以在Elementor编辑中使用JetForm元素调取这个表单并修改表单样式。

image 4 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

Bricks也支持元素调用和风格编辑。

image 7 - 超强免费插件Jet Form Buider制作B2B询盘表单教程 - NUTSWP

最后提示:询盘表单配置需要自己去验证测试,如果测试不通过或配置有问题,需要根据自己的情况进行调整。