Contact form 7表单如何使用?实操全指南

contact form 7 表单教程全指南

Contact form 7是WordPress中最重要的一个插件之一,好好学习能够帮你获得很多海外客户的询单。接下来带你一步一步设置Contact form 7!

安装Contact form 7插件

进入网站后台,点击Plugins→Add New

contact form 7 setting

在关键词搜索框输入contact form 7

contact form 7 setting

在箭头所标处点击install now→Active即可,我这里是之前就已经安装了,所以显示已启用

contact form 7 setting

设置Contact form 7表单

安装激活完成后,后台左侧会出现一个Contact菜单,点击Contact Form进去

contact form 7 setting

这里有一个自动生成的Contact Form 1,点击Edit

contact form 7 setting

首先,可以修改一下表单的名字,再点击蓝色按钮进行保存

contact form 7 setting

Form菜单的设置

接下来就要来设置Form菜单了,下方椭圆形标记处是默认的Form菜单,如果你觉得功能够用,可以保留。

上面有一栏很长的功能菜单,我们可以根据自己的需要选择将这些功能添加到表单中

contact form 7 setting

下面我们来示范添加两个功能

首先添加一个text,将光标放在你想放的位置,然后点击text按钮

contact form 7 setting

填写好名字Name(名字)、Default value(默认值),勾选第一个小空格,点击插入Insert Tag(如果你觉得这个回答非常重要,你可以勾选Required field,即用户只有填写了这个输入才能提交表单,否则会显示错误不能提交。)

contact form 7 setting

接着可以看到text功能已经添加成功了,记得点击save按钮进行保存

contact form 7 setting

接下来添加一个file功能,还是先把光标放在想放的位置,然后点击file按钮

contact form 7 setting

填好文件的名字、大小和文件类型,然后点击Insert Tag按钮

  • File size 这里是限制附件的大小,cf7最大支持25mb,文件发送一般会送到邮件中
  • Acceptable file types 可以输入文件类型,不不同格式用 | 分开,比如gif|jpeg|png|pdf

contact form 7 setting

我们可以看到已经添加完成啦,记得点击save保存

contact form 7 setting

如果你还有其他的功能想添加,就按这个方法去做就行,不过表单还是保持简洁一点好!

Mail菜单的设置

接下来设置邮箱菜单

首先填写好询盘收件邮箱;后面三项保持默认即可,不用修改

contact form 7 setting

接下来是邮件正文部分,我们可以看到红框处的代码有部分显示为灰色,表示在下面正文中已包含这些内容,有部分显示为黑色,表示这个内容还没有添加成功,我们将[your-company]添加到Message body中去

contact form 7 setting

添加完成后,可以看到上方的[your-company]变成灰色了

contact form 7 setting

接下来我们将[your-file]拷贝粘贴到File attachments右边的空白框中(文件上限不能超过25mb

,否则会提示文件过大),点击左下角的save保存

contact form 7 setting

我们可以看到,[your-file]也变成灰色了

contact form 7 setting

Message设置

留言设置这块,我们一般保持默认即可

contact form 7 setting

创建更多表单

如果你想创建多一个表单,可以复制上一步设置好的表单

contact form 7 setting

然后修改好标题和相关内容,再点击save保存即可

contact form 7 setting

如何在网站中使用Contact form 7表单

点击表单后面的简码,复制它

contact form 7 setting

新建一个页面

contact form 7 setting

取一个标题,再将刚才复制的简码粘贴到空白处,保存发布

contact form 7 setting

待发布完成后,点击查看页面

contact form 7 setting

我们刚才设置的表单就呈现出来了,但是我们看到 your comany这部分和其他条目的格式不一致,所以我们需要去修改一下

contact form 7 setting

回到联系表单contact form编辑界面,修改为统一格式,再点击save保存

contact form 7 setting

刷新页面,表格就改好了

contact form 7 setting

做好表单后记得要测试一下是否能成功发出去,非常重要!

如何美化contact form 7

基础的contact form 7 还是有点质朴的,白话就是丑,如果想弄好看一点,可以做以下步骤:

缩短表单的高度

可以把表单的label文字弄到placeholder,这样能节省空间:

一开始的代码是这样的:

contact form 7 setting

我们改造之后变成

contact form 7 setting

前台也变成了:

contact form 7 setting

主要的变化就是把

<label>Your Name [text* your-name]</label>

改成

[text* your-name placeholder “Your Name*”]

删除label,把文字内移就行,这样节省一点表单空间。

另外我们发现Your message的肚子还是比较大的,我们可以把后台的textarea高度改一下,添加一个x4,意思就是跟高度是text的4倍,变成如下:

[textarea your-message x4 placeholder “Your Message”]

前台textarea肚子也变小了:

contact form 7 setting

Conact form 7 skins插件

Contact Form 7 Skins是一款cf7的美化插件,可以自己在wp后台插件中搜索安装。

这个插件可以实现拖拉元素进入到表格中,另外还内置了十几个表单设置以及表单样式,不用代码都能弄出好看的表格来。

contact form 7 setting

Contact Form 7 Builder And Designer

Cf7 builder是一款付费插件,价格适中,功能是可以直接对表格进行拖拽分栏,如果你想0代码做一个两栏并行的表单,这个插件很适合。

contact form 7 setting

Contact form 7 发信之后如何跳转到thanks页面

我们用时候需要用户发信之后跳转到thanks页面,这样我们就能统计网站表单的转化率,在thanks页面可以加入再营销代码,这样还能筛选出用户进行二次营销。

那么怎么跳转呢?

可以加入以下代码到cf7的表单下面


contact form 7 setting

一定要注意,location后面要填入thanks页面的链接地址,不要填错了。

Contact form 7 如何配置发信

如何解决contact form 7 发信失败?配置SMTP就行啦!

很多人的网站安装contact form 7表单之后,不能正常的收到邮件,今天的教程就是解决这个问题的。 一般 …

如何解决contact form 7 发信失败?配置SMTP就行啦! 查看全文 »

Contact form 7 垃圾邮件屏蔽

Contact form 7 防止垃圾邮件(内含一分钟视频教程)

安装contact form 7 image captcha插件阻止垃圾邮件 最近维护的网站受到了58-59开 …

Contact form 7 防止垃圾邮件(内含一分钟视频教程) 查看全文 »

更多Contact form 7教程

Contact form 7 邮件问题汇总及解决方案

虽然contact form 7广泛运用于wordpress网站,每天都有成千上万的网站的邮件通过contac …

Contact form 7 邮件问题汇总及解决方案 查看全文 »

contact form 7 添加谷歌分析跟踪代码

绝大多数外贸英文网站上线后都是利用谷歌分析工具分析网站数据,不过有一点别忘了,给自己的为网站添加谷歌分析工具只 …

contact form 7 添加谷歌分析跟踪代码 查看全文 »

使用contact form 7制作订阅下载

外贸企业建站中,需要提供一些产品目录等文档供客户下载,但又想知道是哪些客户下载的。今天教大家利用cf7的跳转实 …

使用contact form 7制作订阅下载 查看全文 »

5大contact form 7 拓展插件

Contact form 7(以下简称cf7)是一款wordpress主流的表单插件,主要收集客户需求并发送至 …

5大contact form 7 拓展插件 查看全文 »

Keen

Keen

拥有7年英文建站与营销经验,经手过上百个外贸独立站创建与推广。擅长使用低成本方法获客。 博客将分享英文建站技巧、SEO、视频营销等增长技能及案例。添加个人微信keentalks,获取第一手低成本获客增长技能!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

 
扫码关注
添加微信免费加群
返回顶部