如何在WordPress中制做联系表单（3种方法）

本篇教程提供3个在WordPress中建立联系表单并记录询盘的方法：

1. 插件Contact Form 7 + Flamingo，二者都免费

2. 插件Elementor Pro+Elementor Contact Form DB，前者付费，是网页可视化编辑器，后者免费。

3. 插件Ninja Forms，免费，这是我目前新发现且推荐的方式，相关教程请查看：Ninja Forms：免费的联系表单插件，却提供了付费表单才有的功能【视频+图文】

本文原文首发于：https://loyseo.com/how-to-create-a-contact-form-in-wordpress/

制做联系表单的教程概述

方法1、使用Contact Form 7 插件制做联系表单，使用Flamingo插件记录收到的询盘

1. 全部wordpress网站都能使用，不限主题，不限页面编辑器

2. 优势：可以提供自定义问题验证功能，能够实现简单数学题验证

• 譬如2+2=?，这个功能可以阻止大部分的广告邮件

• 很多广告邮件都出自一个工具：GSA Website Contact，GSA可以根据产品词搜索目标企业网站，按既定规则找到联系页面，自动根据自定义的广告内容提交表单，这也是一种常见的拓客方式（感兴趣的也能够试试哟~），

• GSA还能破解谷歌验证码，我也不推荐用谷歌验证码，由于它会让网站速度变慢很多

• 别用复杂的数字计算问题，它会下降客户提交询盘的意愿

4. 缺点：相比Elementor，Contact form7不能可视化编辑，操做起来有点不方便，参见下图

contact form 7制做联系表单的操做界面

contact form 7制做的表单

方法2、使用Elementor Pro编辑器插件的form元素制做联系表单，并用Elementor DB插件记录收到的询盘

1. 适合使用Elementor Pro编辑器的wordpress网站

2. 优势：可以可视化编辑表单，操做起来方便

3. 缺点：不提供自定义数字计算问题验证功能

elementor可视化制做联系表单的操做界面，所见即所得

elementor制做的联系表单

建立完表单后，须要配置SMTP，以便收到询盘后能发通知到你的邮箱。

了解了两种制做联系表单的方法的优缺点后，咱们逐一讲解制做表单的细节教程。

Contact Form 7 + Flamingo制做联系表单教程

安装并启用插件Contact Form 七、Flamingo，相关教程：如何安装wordpress插件（3种方法）

若是你要制做英文的询盘表单，须要确保用户的语言也是英文（修改方法见下图），由于contact form7会根据你的后台语言为你建立表单的文案、提示信息。

修改用户语言与询盘表单语言一致

1. 见下图，咱们开始制做表单，进入contact》add new，你将看到默认表单的内容

2. 输入表单的标题，譬如contact us

3. 在form页面中制做表单内容，下文会详细介绍

4. 在mail页面中制做询盘通知邮件的模板，下文也会详细介绍

在form页面中，将默认表单中的subject字段去掉，只保留Your name、Your email、Your message三个字段，由于简单的表单便于客户提交，不要搞复杂的表单增长客户填写难度

接下来咱们添加一个简单的数字计算验证问题，以便阻挡部分广告邮件；数字计算简单好算便可，别搞10以上的加减法，它会增长客户提交询盘的难度

操做步骤以下，在form页面中，点击下图中的quiz按钮

填写questions and answers，问题和答案之间用|符号隔开，譬如2+2=?|4，而后点击insert tag便可将问题插入到表单中

以下图所示，问题插入到了提交按钮[submit “send”]上方。

以下图所示，在字段下方增长空白行能为字段下方增长一点空白，经过回车增长1个空白行便可，多个空行不会累积。（实际是这个操做将label变为了p，而p通常都会有行下的间距，从而增长了字段间的空隙）。

至此，能够保存一下表单，你将在表单的标题下方看到下图中的蓝色区域，复制其中的短代码，将它黏贴到联系咱们页面中，以便预览表单的效果。

接下来，请建立一个联系咱们页面，即使不使用页面编辑器，使用wordpress默认的编辑模式也可使用联系表单的短代码，只需将上面复制的端代码黏贴到页面中，并保存便可。

若是你使用Elementor编辑器，能够在建立页面时，在左侧元素栏中，找到名为shortcode的元素，将其拖拽到右侧页面中，

而后在左侧内容框内输入表单代码，你将会看到右侧直接显示了contact form7的表单，

呃…不大好看是吧，不懂css代码就很难去调整它的外观，固然，能够借助其余插件来为表单定义样式，或者直接就用这个朴素版的，

咱们稍微对它作一些简单的样式调整，譬如将表格宽度改成全宽（我懂的css也只是入门级别的?，没法提供复杂花样的代码

下面是我作的“朴素的”修改，将字段宽度改成了100%全宽。（你想用的话，就拿去用吧

<label style="width:100%"> Your Name *
    \[text* your-name\] </label>

<label style="width:100%"> Your Email *
    \[email* your-email\] </label>

<label style="width:100%"> Your Message *
    \[textarea* your-message\] </label>

\[quiz quiz-57 "2+2=? | 4"\]

\[submit "Send"\]

对应的表单效果以下图所示

下面对字段的构成的要点作一下说明，譬如[text* your-name]

• text是字段的输入类型，譬如这里表示文本输入类型，email表示输入邮箱类型，若是不是邮箱，将没法提交表单

• *表明这个字段是必填的

• your-name是字段的名称，若是改了这个名称，在mail页面内的邮件模板也要配套修改，我曾经在改过字段名称后，忘了在mail里修改，结果致使收到的邮件通知里缺乏内容

接下来咱们去mail页面配置邮件通知模板，在下图中，每一个序号对应的内容分别是

1. 在form中包含的字段，他们在下面的四、五、6中可调用并获取字段的值，如若form中不包含的字段，即使引用也没用

2. to：这里填写邮件通知的收件人邮箱，通常默认是后台帐户邮箱

3. from：这里填写发送通知邮件的邮箱，此处要注意填写你在smtp中配置的发件邮箱，若是你用的发件邮箱的域名不等于本网站域名，那么，即使填写后页面上出现❗感叹号警示也不用在乎

4. subject：此处填写邮件通知的标题，按本身喜爱填就能够了，也能够在此处加入字段的调用，譬如：来自[your-name]的询盘

5. additional headers：默认是reply-to:[your-email]，表示你如果回复邮件通知，那么回复邮件的收件人默认就是发询盘给你的邮箱，等于直接回复通知邮件就能够直接回复客户了

6. message body：这里填写邮件正文内容，如若你有新增或删减字段，在此处记得对应把字段也进行调整，譬如前文中，我把[your-subject]字段去掉了，那在此处也须要把它相关的内容都删除。

作完表单后，记得测一下邮件通知是否能收到、内容是否准确，在flamingo插件中是否有询盘记录（见下图）,flamingo默认有subject字段，若是你删掉了这个字段，就会看到subject列内容都是[your-subject]，没啥关系哈~

Elementor Pro + Elementor Contact Form DB 制做联系表单教程

我将这种方法用在了个人模板站上，而且将询盘表单作成了全局通用的，譬如点击按钮弹出询盘表单的popup、联系咱们页面的表单都共用同一个

1. 配置发件邮箱帐号，在wordpress后台安装SMTP插件并设置发件功能

2. 安装插件

   Elementor、Elementor pro

   、Elementor Contact Form DB并启用

3. 用Elementor添加新模板，模板类型为popup（弹出窗），咱们将在popup里放联系表单

4. 在popup模板库里不要选择模板导入，直接点击右上角关闭

5. 将heading和form元素加入到页面，以下图所示

6.设置须要用户必须填写的字段，并显示*标记；你也能够在左侧新增字段，默认状况下是name、email、message三个字段，建议字段不要过多，下降用户填写难度

7.将调整完毕的form元素右键存储为Global元素，以便于在其余地方重复使用

8.发布表单，并将条件设为全站，保存便可，不须要设置其余（triggers或advanced rules）

9.若是须要在产品页面点击询盘按钮时弹出询盘，请在elementor中编辑对应页面，并点击对应按钮，而后在左侧按钮设置中，点击link 右侧的dynamic 按钮（图中的2），在下拉选项中选择popup，而后继续点击popup，在setting中搜索并选中刚才添加的popup

设置按钮的link值为popup

搜索已添加的popup名称，并选择

10.此时，点击询盘按钮，将可见到询盘弹出窗口

11.咱们在任一产品页面提交询盘进行测试，查看是否能收到询盘邮件通知以及后台是否记录，询盘邮件将发送到你的wordpress帐户邮箱里，如需添加收件邮箱，请在询盘表单中进行配置，多个邮箱之间用英文逗号间隔便可。同时，在此处也能设置通知邮件的标题、正文。

在发完测试询盘后，咱们查看邮箱是否收到邮件（注意检查垃圾邮箱），同时在后台Elementor DB中查看询盘记录，以下图所示，大功告成。

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

推荐阅读

2020年B2B外贸建站的终极教程
2020年外贸建站须要注意什么？（4300字经验谈）