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

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

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

1.安装Contact Form 7插件

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

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

2.设置Contact Form 7插件

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

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

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

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

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

 

 

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

3. 设置Mail部分

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

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

网站添加表单

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

 

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

总结：

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