本文详细介绍超强免费表单JetFormBuilder制作B2B询盘表单实现的过程,可以实现表单提交重定向,以及邮件转发关键词过滤,同时可以跟踪用户浏览的路径。比大部分付费表单功能还要强大。
1、安装免费表单插件JetFormBuilder
免费版本在你的WordPress网站后台的插件库中搜并在线安装激活。
2、创建B2B询盘表单
通过Jet Form Builder菜单下面的Form菜单进入表单列表,你可以手动创建,通过导入文件创建,还可以通过AI创建(免费版本每月有15次的AI额度)。
这里我们讲解如何手动创建,会介绍一些B2B表单必备字段的详细细节。
点击【Add New Form】进入新建标签页面。
1)设置表单名称
第一步需要设置新表单的名称。Jet From Builder默认使用的是古腾堡编辑器。
然后你可以选择一些做好的模版,这里我是从0开始,可以点击【Start From Scratch】按钮开始添加表单字段。
2)设置表单字段
B2B询盘表单通常会设置5个字段和一个提交按钮。当然实际的表单字段设置可以更具你自己的需求进行调整,可以参照Jet Form Builder文档进行设置。它还支持去抓取你网站中的产品分类,产品,文章分类等信息作为选择字段的数据源,非常灵活好用。
Name字段
从古腾堡元素中添加一个Text field表单元素到页面中。
对字段进行设置,按照我红色标记的地方进行设置,其他部分默认即可。
Company字段
Company字段也是用Text field表单元素设置,按照下面的红色标记进行设置。
Email字段
Email字段也是用Text field表单元素设置,按照下面的红色标记进行设置。需要将其设置为必填字段,同时字段类型设置为Email。
Phone字段
Phone字段也是用Text field表单元素设置,但是字段类型不要选择Phone,选择Text,然后给它设置Input Mask,限制用户只能输入电话号码格式。
你可以直接复制我的复制电话号码Input Mask格式:+99 [999][9{5,15}]
Message字段
Meesage字段使用Textarea Field字段,设置为必填字段。
Submit按钮
Submit按钮是一开始就添加好的,基本不需要进行修改了,一切默认即可,你可以修改按钮显示的文字。
隐藏字段
另外我还设置了2个影藏字段,用于抓取用户提交表单的页面URL和页面标题,这样我可以在邮件转发内容中调用。
3)Jet表单布局设置
Jet表单布局是通过古腾堡编辑器来实现的,比如你需要设置一行有2个字段,就使用古腾堡的Columns元素来设置。
将Columns元素设置为2列,然后将字段拖拽到对应的位置。
然后修改Colums元素的样式,将Padding设置为0px。
其他的布局,以此类推即可。
3、设置表单动作
B2B询盘表单提交我主要设置3个动作:1)保存提交数据,2)重定向到特点页面,3)转发邮件提醒。
然后在邮件转发动作中我会设置关键词过滤,最后再设置一下表单的安全提交验证,就完成了表单制作。
表单动作在表单设置的【Post Submit Action】中添加,点击选项中的【+New Action】你可以在弹出框中看到所有可以使用的表单动作。
1)保存用户提交表单的数据
在表单设置中的【Post Submit Action】中点击【+New Action】,并在弹出的列表中点击【Save Form Record】动作。
开启存储IP地址和请求标头,保留未通过垃圾邮件或验证码保护的表单记录,然后前往JetFormBuilder设置中开启用户旅程(用户旅程可以记录用户在网站用访问的页面路径)。然后点击更新按钮保存动作。
通过上图中的【Go to Setting】链接跳转到JetFormBuilder设置中的User Journey开启用户旅程。
开启之后,每一个用户提交都会包含用户浏览路径。
2)重定向到Thank you页面
Thank you页面一般可以用来做跟踪转化,所以我们会设置表单提交成功之后自动跳转到Thank you页面。
在Jet form的动作中添加【Redirect to Page】
如果你已经做好了Thank You页面,可以选择Redirect to:Static Page,然后选择你做好的Thank You页面,你还可以选择是否开启【Open in New Tab】,设置完成之后点击更新按钮保存。
这里我没有做好Thank You页面,所以选择Contact页面代替。
当然,你也可以设置自定义连接(输入链接的URL),或者选择重定向到当前页面。可以根据自己的实际需求进行设置。
3)转发表单提交邮件提醒
在Jet form的动作中添加【Send Email】
设置Mail To(也就是用户提交表单之后将提交的信息邮件发给谁),一般是设置你自己的邮箱,或者公司业务员的邮箱地址,收到邮箱之后确认是有效询盘就可以开始接洽了。
Mail To选择Custom email,然后填写你自己的邮箱地址或者公司业务的邮箱地址,可以添加多个收件地址,用英文逗号隔开。
下面的Use CC/BCC是设置抄送邮箱地址和秘密抄送邮箱地址的,根据你自己的需要设置,最后在测试的时候验证设置是否生效,也就是抄送的邮箱检查是否可以收到邮箱。
Replay To是回复的邮箱地址,也就是说当你的邮箱收到询盘消息之后,在邮箱客户端点击回复,会回到这个邮箱地址,这里我们一般设置为表单的邮箱字段,也就是用户提交表单留的邮箱地址,这样点击回复右键可以直接回复到客户的邮箱地址。
所以这里选择Email Form Submit Form Field,然后选择Email字段。
Subject(邮件主题),From Name(发件人名称),From Email Address(发件邮箱地址,通常我们设置为网站配置的SMTP服务的邮箱地址),这三个选项都可以使用动态的表单字段来填写。
Subject我设置为New Inquiry Submission from [Website Name],其中Website Name可以设置成你自己的网站名称,这样方便你知道这个询盘消息来自哪里。
From Name我设置为%name% from %company%,%name% 和 %company%都是来自选项的动态标签选择的表单字段信息(注意不要复制我的内容,请自己点开From Name旁边的小扳手选择,这样确保数据获取正确),意思是来自XXX公司的XXX,XXX都是用户填写在表单字段中的信息。这里还需要注意的一点是如果你SMTP服务设置了强制发件人名称,那么这里的设置可能会不生效,如果你测试发现From Name和你设置的不匹配,请检查SMTP服务是不是开启了强制发件人名称。
From Email Address我设置是我网站配置SMTP服务的邮箱地址,你根据你自己的设置填写。如果测试邮件转发没有收到,优先检查这里的发件邮箱设置对不对。
点开小扳手你可以看到表单字段的ID,根据你的需要选择对应的字段ID即可。
最后是设置邮件内容,内容类型我们设置为HTML,Content则需要自己编辑,并插入表单字段,这样邮件中会显示详细的提交信息。你可以参照我的格式设置,但是动态的表单字段请自己点开扳手去选择,确保数据准确,最后有个Attachment附件选项,这里如果的表单字段中有Media Field可以提供用户上传文件,可以使用它将字段中用户上传的文件作为附件转发。
注意:Media Field使用建议限定文件格式和大小,并设之字段描述告诉用户支持的文件格式和大小,避免被恶意上传危险文件。同时建议定期将文件清理掉,避免占用服务器空间。
设置完成之后点击更新按钮保存设置。
4)邮件转发关键词过滤
邮件转发关键词过滤是通过在表单提交动作中设置Action Conditions & Events(动作可见性和事件)来实现的。Jet Form所有的提交事件都是可以设置Action Conditions & Events进行事件执行过滤。
这里我们重点介绍表单字段关键词过滤的设置逻辑和方法。
因为我们需要过滤邮件转发的动作,所以在表单设置的Send Email动作中设置Conditions & Events,点击Send Email后面的过滤小图标,进入设置窗口。
这里我简单描述一下我的设置逻辑,我们需要先进行字段比较,也就是逻辑条件设置,然后再去匹配动作执行状态,动作执行我们是希望正确的邮件是可以转发的,所以在Events Match中要选择DEFAULT.PROCESS,其他的进程会不执行转发。
然后再反推我们过滤逻辑,转发邮件时我们希望Company字段不含Google,并且Company字段不含google,并且Message不含http://,并且Message不含https://,等情况才转发,只要有一个情况是否都不转发。
所以Condition Operator(执行操作)我们要选择And(所用情况必须同时满足),然后再设置每一个情况。
由于每一个选择的Operator只有Contain Text,但是我们希望的是不包含,所以我们需要关闭【To fulfill this condition, the result of the check must be FALSE】,代表此选项为False时是满足Condition条件的。
比如下面这个选项设置,我设置Message字段中包含文字http://的情况True,但是我需要这个情况的结果是False,所以需要将顶部的 【To fulfill this condition, the result of the check must be FALSE】关闭。
按照上面的逻辑,我设置了6条Condition。
满足以上条件之后切换到Events Match选择DEFAULT.PROCESS,代表转发邮件动作执行。
最后总结一下思路就是:当表单字段Massage不含https://,并且不含http://,并且不含SEO,并且不含seo,同时Company字段不含Google,并且不含google,进行邮件转发,否则不转发邮件。这样就实现了表单字段关键词过滤,你还可以在Condition中添加你想过滤的其他字段和关键词。
设置完成之后可以开始对表单进行测试,也就是模仿用户提交,检测自己设置的内容是否生效。比如邮箱是否收到邮件提醒,邮件内容和你设置是否匹配,关键词过滤是否生效。
5)表单提交安全验证
Jet Form Builder提供四种表单验证服务,你只需要配置好对应的API KEY即可使用。在JetFormBuiler中可以设置全局验证密钥。设置之后,只需要在表单中开启,并使用全局设置即可。
推荐使用reCAPTCHA v3或者hcaptch,这两个配置简单,都有免费的额度,Google reCAPTCHA v3更加无感知,但是隐私性差一点,Google会收集很多用户行为数据,hcaptch隐私性更好,但是需要用户点击,也会弹出验证图形选择,增加提交难度。
配置之后,返回到表单编辑,在Jet From设置中开启和选择对应的验证即可。
在表单中如果你不想使用全局的安全验证密钥,你可以单独设置,需要将密钥粘贴到对应的文本框中,然后保存表单即可。
我自己更推荐使用全局的密钥模式,这样可以统一管理。
当然你还可以使用验证元素放在表单中,效果其实差不多。
以上你就通过JetFormbuilder免费版插件完成了一个B2B询盘表单的制作,接下来就是需要将表单展示在网站页面中。
4、如何将Jet Form制作的B2B询盘表单添加到页面
1)古腾堡页面如何添加表单
你可以在古腾堡编辑器的Blocks中搜索JetForm Block添加到古腾堡编辑的页面中,并选择你制作好的Form表单。
在古腾堡编辑器中你只能对JetForm Block进行简单的表单设置,没有针对表单样式的选项,如果需要编辑表单样式你需要进入jet Form表单编辑中进行编辑和修改。
2)Elementor页面如何添加表单
在Elementor编辑器中你可以搜索JetForm 元素,然后在元素设置中选择你做的Form表单。
Elementor的JetForm元素支持修改表单字段的样式,在元素的Style中修改,Style中包含了所有JetForm的字段样式编辑,但是实际上你的表单并不一定会使用所有的字段,所以根据你的表单去编辑对应字段的样式即可。另外表单字段之间的间距还会受到你在古腾堡编辑器中创建的block间距的影响,所以如果你发现部分间距无法调整之后,可以尝试去直接编辑Jet Form,在古腾堡编辑器中调整对应的风格参数。
3)Bricks页面如何添加表单
和Elementor一样,Bricks也有JetForm元素可以调取你制作的表单编辑外观和展示。
4)通过短码将表单添加到页面
在Jet From表单列表中你可以看到表单的短码,你可以直接复制,然后通过短码工具添加到网站的任意位置。大部分页面编辑器都有短码功能,找到对应的短码元素之后,将Jet Form的断码粘贴进去即可。
5、直接下载我制作的询盘表单Demo
导入Json文件有一定的风险,请务必在网站导入之前做一次完整备份,确保导入文件有问题可以直接恢复到导入之前的状态。
本教程制作表单的导出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】导入文件。
导入之后将自动跳转到导入的表单编辑,你只需要修改一些关键信息,尤其是邮件转发动作中的收件人,网站信息,发件人(发件人修改成你网站的SMTP服务的邮箱地址),以及重定向的页面(改成你自己的thank you页面),即可测试和使用。
1)修改重定向页面
在Form表单的编辑页面,点击Post Submit Action中的【Redirect to Page】选项修改重定向到你自己的thank you页面路径。如果你的thank you页面路径和我一样,就可以不用修改。修改之后记得点击更新按钮保存设置。
2)修改邮件转发配置
在Form表单的编辑页面,点击Post Submit Action中的【Send Email】选项修改邮件转发的设置。邮件转发中会包含比较多的内容,我们先修改Action,点击小笔头工具打开Action设置。
修改Mail To邮件地址,改成你自己用来接收询盘消息的邮箱地址,可以添加多个邮箱地址用英文逗号隔开即可。
如果你需要抄送或者秘密抄送可以开启下面的Use CC/BCC,然后配置邮箱地址即可。
Repay To用于设置回复邮箱的地址,即当你收到这个询盘邮件提醒时,你可以直接点击回复邮件,然后邮件回复到的邮箱地址,这里我们设置为表单中的邮箱字段,然后在【REPLAY TO EMAIL FIELD】中选择表单中对应的邮箱字段即可。
接下来修改邮件主题(Subject),中括号中的文本你可以使用表单字段,也可以修改成你自己的网站名称。表单字段从Subject旁边的扳手按钮中获取即可。
Form Name设置修改,我这里设置的是用户提价表单中的名称和公司字段组合,你也可以修改成别的,别网站名称。
From Email Address修改成你网站SMTP服务的邮箱地址。
其他选项根据你自己的需求调整,也可以直接用我Demo中的配置,不必修改。修改完成之后记得点击更新按钮保存设置。
3)修改关键词过滤
点击Edit Condition & Events可以编辑和修改关键词过滤,我的Demo中过滤的关键词如下:
Company字段:Google、google
Message字段:https://、http://、SEO、seo
只要用户提交的表单对应字段中包含匹配的关键词,则不会转发邮件,这样避免收到大量的广告邮件。
你可以根据你自己的需求重新设置或者增加减少。需要注意逻辑关系,按照我原本设置好的方式设置即可。
4)修改安全验证
最后你还要修改表单提交安全验证,我的Demo里面默认没有开启,你需要开启,并配置。
你可以配置Google V3验证,然后在安全验证中启用即可。
将Google V3 Key添加到Jet Form Builder设置里面的Captcha Settings中的 reCAPTCHA v3即可。
另外Jet Form Builder还支持hCaptcha验证以及Friendly Captcha和Turnstile(Cloudflare提供),根据你自己的需求配置使用即可。
5)开启User Journey
如果你需要在表单提交详情里面看到用户的浏览路径,可以在Jet Form Builder中卡其User Journey。
开启之后,每一个用户提交都会包含用户浏览路径。
6)在前端调用Jet Form表单
修改好表单之后,你可以通过Elementor、Bricks编辑器的元素直接调用并调整展示样式。同时Jet Form还提供短码,可以在任意短码中调用。
你可以在Elementor编辑中使用JetForm元素调取这个表单并修改表单样式。
Bricks也支持元素调用和风格编辑。
最后提示:询盘表单配置需要自己去验证测试,如果测试不通过或配置有问题,需要根据自己的情况进行调整。