如何制做免费的WordPress联系表单?这个插件提供了付费表单才有的功能【视频+图文教程】

2020年11月22日 阅读数:6
这篇文章主要向大家介绍如何制做免费的WordPress联系表单?这个插件提供了付费表单才有的功能【视频+图文教程】,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

下方是Ninja Forms的图文版教程。
原文地址:https://loyseo.com/how-to-create-a-contact-form-with-ninja-forms/数据库

下载Ninja Forms并安装

Ninja Forms插件下载地址:Https://Wordpress.Org/Plugins/Ninja-Forms/,请安装后启用它。wordpress

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

使用Ninja Forms制做询盘表单

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

ninja forms 1

进入忍者表单以后,以下图所示:网站

  1. Form Field标签页,用于制做表单字段url

  2. Emails & Actions标签页,用于配置邮件通知与表单提交动做的插件

  3. Advanced标签页是用于设置更高级的功能3d

  4. Preview Changes是预览按钮code

  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种方法)

常见问题

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

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

本文原文由LOYSEO 发布,LOYSEO专一于WordPress、Elementor、外贸建站教程。

推荐阅读

2020年B2B外贸建站的终极教程
2020年外贸建站须要注意什么?(4300字经验谈)