Contact Form 7插件教程-手把手教你如何自定义联系表单

Contact Form 7是Wordpress插件库比较老也是非常受欢迎的一款表单插件，而且这款插件完全免费。对于B2B外贸网站而言，表单也是我们获取询盘最主要的方式之一，设计一款高转化的表单也是整个外贸建站过程中非常重要的一个步骤。

Contact Form 7并非拖拽式设计表单，相对WPForms等表单有点复杂，但是没关系，今天这个教程我就详细的教大家如何使用这个表单。

什么是Contact Form 7?

Contact Form 7 是一款出色的免费 WordPress 插件，它可让您为网站生成各种联系表单。你可以使用这个插件轻松创建和管理多个联系表单，也可以根据需求自定义。

这个插件是完全免费的插件（无付费选项），并且你创建的任何表单都会生成对应的自定义代码，你可以轻松插入到任何页面或者任何区域。

但是，相对于Wpforms插件来说，Contact Form 7不支持可视化，拖拽式设计表单，也就意味着你需要懂得其中的一些字段或者代码才可以轻松驾驭这个表单插件。

Contact Form 7 的主要特点：

• 多种联系表格
• 可定制的表格
• 基于 Ajax 的联系表单 7 提交
• CAPTCHA 集成
• Akismet 反垃圾邮件
• 表单标签语法
• 可定制的邮件模板
• 文件上传支持
• 本地化翻译

安装Contact Form 7插件

首先第一步我们需要在Wordpress上安装Contact Form 7插件，你可以在WordPress.org上面下载这个插件压缩包，然后在Wordpress上传安装，也可以在Wordpress后台插件库直接搜索Contact Form 7。

• 进入网站后台
• 选择Plugins > Add New
• 搜索Contact Form 7
• 点击安装并且启用

点击Install Now安装,安装成功之后activate启用

设置Contact Form 7插件

安装插件成功之后，在Wordpress后台左侧菜单中会出现Contact的菜单，我们点击这个菜单可以对Contact Form 7进行设置，默认地，CF7会创建一个基本的表单。当我们鼠标滑到这个表单，会弹出设置选项Edit，我们点击进行Edit编辑。

进入编辑页面之后，我们可以命名这个表单的名称。在底下Form表单编辑区域，我们先删除默认的表单，然后设置我们的想要的表单选项。以下是几个我们常用的选项

• text–短文本
• email–邮箱
• tel –电话
• text area–文本框
• file — 文件
• submit –提交

如果我们想添加 某个选项，就点击其按钮，这时候就会弹出一个对应的设置对话框。

如下图所示。在对话框内我们可以设置其是否必填项目，名称，默认值等。也可以勾选将默认值设置为placeholder。

设置好之后，我们点击保存。

设置Mail部分

在Mail区域，我们可以设置表单信息到达我们邮箱的格式。Contact Form 7默认的为我们创建的表单选项生成了对应的段代码。我们把段代码放对应的区域即可。如下下图所示。

设置好之后，同样我们点击保存。

网站添加表单

当我们设置好表单之后，我们返回到Contact Form 7找到对应的表单，并且复制其短代码。然后在想要添加表单的的位置粘贴其段代码，假设我们使用的是Elementor设计网站，我们可以使用short code小工具添加，然后我们刷新页面开测试表单。

如上图所示，在我的邮箱成功的接受到了表单信息！

使用 reCAPTCHA 保护您的联系表单？

设置并设计好您的联系表单后，下一步就是保护表单。Contact Form 7 插件包含验证码功能。请按照以下视频步骤将 reCAPTCHA 添加到您的网站：

总结：

Contact Form 7插件作为一款免费的插件其功能几乎可以和一些付费表单插件相比较，唯一的缺点就是Contact Form 7设置相对复杂了一些。当然Wordpress发送邮件很容易被判定为垃圾邮件，我们设置SMTP来让我们的表单信息发送的更加轻松，安全！