专注于WordPress、Elementor、外贸建站教程与服务
大家好呀~本站正在筹备公益的B2B外贸建站实操直播,感兴趣的同学可以戳右上角微信加我报名(注明来意),直播时间视报名情况待定~
ninja forms logo

Ninja Forms – WordPress的联系表单生成器

100%初学者友好的WordPress表单生成器。拖放表单字段可在几分钟内建立漂亮,专业的联系表单。
评分:
4.5/5

无需写代码、拖拽字段就能制作表单,对于网站常用的联系表单,用免费版的ninja forms就够了(下方有教程)。

免费版的Ninja forms比contact form 7易用,还包含了WPforms的付费功能(详见下文),只是皮肤/外观是跟随主题变化的(对大多数站点来说,够用了不是吗?)。

如果你想要无编码的修改表单外观,又或者是对接到第三方网站(譬如电子邮件营销、CRM等)等等附加功能,才需要购买付费版。

ninja forms price

Ninja Forms不仅能够可视化创作询盘表单,还能记录询盘、添加隐藏字段、添加反垃圾验证、提交表单时可设置多个动作,这在Wpforms插件中可都是付费功能,同时,Ninja Form激活安装量一百万+,拥有4.5/5的好评。本文是制作B2B网站常用的询盘表单的详细教程,请往下看。

下方是Ninja Forms的图文版教程。

下载Ninja Forms并安装

Ninja Forms插件下载地址:https://wordpress.org/plugins/ninja-forms/,请安装后启用它。

若您是新手,插件安装教程请点击此处查看

使用Ninja Forms制作询盘表单

Ninja Forms默认提供了一个Contact Me表单,你可以点击图中的齿轮按钮,则将展开操作项,从中点击Edit进入编辑

ninja forms 1

进入忍者表单之后,如下图所示:

  1. Form field标签页,用于制作表单字段
  2. Emails & Actions标签页,用于配置邮件通知与表单提交动作的
  3. Advanced标签页是用于设置更高级的功能
  4. Preview changes是预览按钮
  5. 加号按钮用于向当前标签页添加新内容,譬如添加字段
  6. 发布按钮,用于保存和发布当前表单。
ninja forms 2

首先进行表单的制作

默认的Contact Me表单中已有三个字段,作为询盘而言已经够用了,我们不用再添加新的内容型字段,只需要添加一些隐藏字段(hidden)和反垃圾字段(anti-spam)。

隐藏字段用于存储询盘的来源页面和IP,而反垃圾字段是通过简单的加法来实现屏蔽营销邮件。

ninja forms 3

请点开右下角的加号展开字段选择面板,找到其中名叫hidden的字段,单击它就可以将它加入到表单中,你也可以左键点选之后拖拽到左侧的表单的指定位置。

我们一共添加3个隐藏字段,分别是:询盘来源页面标题、询盘来源页面网址、询盘来源的IP,隐藏字段在表单中所放的位置没有影响,你可以把它放在提交按钮下方,它不会向用户展示。

当你把隐藏字段加到页面中之后,如下图所示,左键点选这个字段,然后在页面右侧就会显示这个字段的编辑面板,请点击第2个输入框右侧的小图标,在下拉选项中选择wordpress,然后找到并点击页面标题({wp:post_title}),这是动态调用数据库字段的做法,非常便利。

ninja forms 6

如下图所示,在label中输入这个隐藏字段的名称,在default value中选择动态调用的字段,然后一定要点击右上角的DONE按钮进行保存,这样这个字段就设置完成了。

ninja forms 4

接下来你可以复制这个隐藏字段,以便创作另外两个隐藏字段,如下图所示,将鼠标悬停于字段上方,在字段的右侧会出现齿轮图标,鼠标悬停在齿轮上,你将会看到左边出现复制和删除图标。

需要注意的是,如果你当前已经选中这个字段,也就是说这个字段的边框是绿色的,那么他将不会出现齿轮图标,也就不能进行复制和删除了。

ninja forms 7

通过复制字段的方法,我们再创建另外两个隐藏字段。分别是询盘来源页面的网址-{wp:post_url}和询盘来源的IP-{other:user_ip},如下图所示,便是循盘来源IP的设置方法。

ninja forms 5

接下来我们添加反垃圾字段(anti-spam),请将它添加到提交按钮上方,如下图所示,你可以设置2+3等于几这种简单的算术问题。

ninja forms 8

完成这些步骤后请点击右上角的发布进行保存。

其次,设置提交询盘时的邮件通知和动作

默认已经提供了如下4个常用动作,分别是:

  1. Store Submission:记录询盘
  2. Email confirmation:向提交询盘的人发送邮件确认
  3. Email notification:向网站管理员或其他自定义人员发送询盘邮件
  4. Success message:向提交询盘的人显示成功提交信息
ninja forms 9

每个动作都提供了开关按钮,如果你不想使用它,就将它关闭。

点击每个动作的右侧的齿轮图标,就可以进入动作的设置,我们逐一查看。

记录询盘

ninja forms 10

这个动作的设置通常保持默认即可,在图中Save all表示存储所有字段信息,如果你不想存储某些字段,可以添加except字段进行排除。

向提交询盘的人发送邮件确认

这个动作的默认功能如下图所示。他会将用户提交的所有字段信息,发送邮件给用户。你可以在这里配置邮件的主题、邮件正文包含的表单字段,默认的表单字段设置是不包含隐藏字段的。

ninja forms 11

在上图中,但凡字段的右侧有一个数据库的小图标的,都可以调用动态内容,譬如调用网站管理员邮箱,也可以直接输入指定的值,譬如非网站用户的邮箱。

邮件的正文也可以由你自行编辑内容的构成。

向网站管理员或其他自定义人员发送询盘邮件

这个功能与上节功能是相似的,只是收件人变成了网站管理员,邮件回复人设置为了询盘邮箱。

建议你在邮件正文中添加隐藏字段信息,这样你收到的询盘通知邮件里面,就能清楚的显示询盘来源的页面以及询盘客户的IP。

向提交询盘的人显示成功提交信息

在用户提交完询盘后,页面上会显示一句提示文案,告知用户已经成功提交。这个文案你可以自己进行编辑,也可以保持默认。

在这个默认的表单中,成功提交信息里面还向用户展示了如下信息:有一封确认邮件已经发往了您的邮箱xxx。这与上文中的邮件确认进行了呼应。如果你没有开启邮件确认的功能,记得将这句话删除。

ninja forms 12

如果你使用Google analytics进行目标转化的跟踪,那么你可能还需要添加一个redirect动作,如下图所示,在URL中填写询盘提交成功后所进入的页面,通常是感谢页面。

ninja forms 2

高级设置

在高级设置中,常用的功能如下:设置表单标题的名称、表单标题展示开关、清除成功提交的表单开关、隐藏成功提交的表单开关。

关于“清除成功提交的表单开关”和“隐藏成功提交的表单开关”,如果你没有设置redirect到thank you页面,那么我建议你开启它们,因为如果不清除的话,很可能会造成误会,令人以为表单没有提交成功,从而导致反复提交表单。

ninja forms 13

至此你可以将表单发布了,然后关闭表单回到ninja forms的dashboard页面,从中可以获取ninja forms的shortcode,将它粘贴到需要放询盘表单的页面中,譬如联系我们页面、产品页面或者弹出层(Popup)中。

ninja forms 14

最后,无比在页面中提交询盘进行测试,你将看到询盘记录在后台的submission页面。

ninja forms 15

如果你的邮箱中没有收到询盘通知,那很可能是因为你还没有配置smtp发件功能。请参考这篇教程安装smtp插件进行配置

如果想使用Contact form 7或Elementor Pro制作询盘表单的话,请看下文:如何在WordPress中制作联系表单(3种方法)

如果想在WooCommerce产品页面添加询盘标签页,请查看:如何给产品页面添加询盘表单标签页

常见问题

在Elementor的弹出层上无法显示Ninja表单,怎么办?

不要在Elementor的popup(弹出层)中放Ninja forms、Wpforms、Gravity Forms,他们都有类似的问题:无法展示表单或是表单无法提交;
你可以安装免费插件Popup maker实现弹出层上放表单。
也可以直接使用Elementor的Forms元素制作表单,缺点是无法添加数学验证码。

Ninja Forms:免费的联系表单插件,却提供了付费表单才有的功能【视频+图文】

Ninja Forms不仅能够可视化创作询盘表单,还能记录询盘、添加隐藏字段、添加反垃圾验证、提交表单时可设置多个动作,这在Wpforms插件中可都是付费功能,同时,Ninja Form激活安装量一百万+ …

Astra主题教程:免费建外贸网站

超详细15000+字的外贸建站Astra教程,图文、视频兼备。除了域名和主机,WordPress主题、插件通通是免费版,零经验的你也能建个靠谱的外贸网站,只要肯花点时间照着步骤做就能行~我选用了 …

如何在WordPress中制作联系表单(3种方法)

本篇教程提供3个在wordpress中创建联系表单并记录询盘的方法: 插件Contact Form 7 + Flamingo,两者都免费插件Elementor Pro+Elementor Contact Form DB,前者付费,是网页可视化编辑器,后者免费。插件N …

如何用Elementor Pro制作产品页的弹出式询盘表单

思路:用Elementor Pro制作产品详情页模板(single product)和询盘表单弹出层(popup),在产品详情页模板上添加一个询盘按钮,将按钮链接设置为dynamic调用popup即可。 注意,不要将Ninjaform、W …
elementor logo

Elementor页面编辑器

最先进的WordPress页面编辑器,能够快速创建高端的、完美的网站。适合任何主题,任何页面,任何设计。

post smtp logo

Post SMTP – 发送邮件+邮件记录

Post SMTP既可以配置发件邮箱以便Wordpress网站能发出邮件通知,又能够记录所有发出的邮件,能让你清晰的知道邮件有没有送出或是发送失败。

暂无模板,原因或如下:

  1. 这个插件不是页面编辑类插件,没有网站模板。
  2. 这个插件的模板还没来得及上架。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Copyright © LOYSEO.COM
Do NOT follow this link or you will be banned from the site!
微信扫一扫
扫码加我微信吧 ~

在朋友圈无分组分享本站首页,或点赞知乎专栏置顶文章,联系我可获得以下任一正版主题或插件~
插件:Elementor Pro、WP Rocket、Essential addons elementor、WPML...
主题:Astra、bridge、avada、manufacturer、Jnews...

外贸网站或同类博客交换友情链接也可以联系我哦~
loyseo weixin 0804