分享WP资源
是件美好的事情

Contact form 7 管理表单插件使用介绍

腾讯云限时秒杀活动

Contract Form 7 可以管理多个联系表单,而且您可以自定义窗体并灵活调整邮件内容。该表单还支持ajax,CAPTCHA验证码,Akismet 垃圾邮件过滤,等等。

1. 安装并激活Contact form 7插件

搜索 contact form 7 即可找到,作者是日本人,所以图标是富士山,选择install now, 安装成功之后点击activae激活即可。

2. 修改并设置Contact form 7表单

安装完成后,WP后台的左侧会出现一个contact 的菜单,这就是contact form 7的快捷菜单,直接点击contact,然后就可以看到contact form 1这个是自动生成的一个表单,点击它进行编辑。

进入之后,修改表单的名字,然后点击save保存,接下来进行具体的菜单的设置。

2.1 Form菜单的设置

Form里面是表单的元素的设置,这里的内容将会呈现的网页当中。你可以在这里自由添加,删除相关的功能

这里会默认生成一个表单,你也可以在上面的功能菜单中选择你需要的功能进行添加

下面介绍各个菜单的功能是什么

text 文本

email 邮箱,它自带验证功能,如果你的格式不对,它会提示你

URL 链接

tel 电话

number 数字

date 日期

text area 文字段落

drop-down menu 下拉菜单

checkboxes 打勾选项

radio buttons 子弹选项

acceptance 接受条款

quiz 验证码

file 文件上传功能

submit 表单提交按钮

你可以根据你的需求添加以上功能,下面示范添加两个功能

我们来添加一个验证码,首先把光标定位到你想要添加的位置,然后点击quiz

接下来弹出设置窗口,首先按提示的格式输入问题和答案,然后点击insert tag

就可以看到这个验证码的功能加入到正确位置了,然后点击save保存。

接下来我们添加上传文件的功能,还是先定位需要添加功能的位置,然后再点击file

然后就弹出了设置的窗口,首先填上上传文件的大小,再按格式要求填上可以上传的文件类型,我这里只是示范,你要根据你自己的实际情况来填即可。填好之后,点击insert tag。

然后就可以看到代码已经添加到相应位置了,再点击SAVE保存即可。

你可以参考我这个示范的方法,添加所需要的功能,当然,表单是越简单越好的,只添加必需的功能即可。

2.2 Mail菜单的设置

这里是设置相关的发信息资料,收件人信息,标题,内容格式和文件上传功能,以及追踪发件人IP和发送询盘的页面链接和标题等,下面详细说明

开头mail这里,它会用加粗文件提示你,把在上一步form添加的功能,要加到这一步的相关位置。

如我上一步中添加了上传文件的功能,那就把这个代码[file-420]加入到底下file attachment里面,不然收不到文件。

而我上一步还添加了验证码功能,但是这里为什么不提示呢,因为验证码是不需要发给收件人的,所以不需要。

所以你只需要看清楚这里的加粗提示。如果是上传文件的功能就是放到file attachment,如果是其他的功能就放到message body中。 切记一定要添加,不然收不到相关的信息

To 这里是设置收件箱,这里可以随便填你方便的邮箱

From 这里是默认的,不用改它,保持默认即可

Subject 这里是询盘的标题,你可以前面的文件部分修改成你想要的,后面的[your-subject]保留即可

Additional headers 这里保持默认即可,不用改

Message body 这里是邮件的正文部分, 你需要在这里添加几个内容:

第一个就是开头提到的mail那里加粗的代码,要加到这里(除了file,file不是加这里,是加到下面file attachments里),如果上面没的提示,那你就不用管。

第二个就是一些有用的TAG, 像 [_remote_ip]  可以获取发送询盘的人的IP,这样可以查到他是哪里的客户; 还有 [_url]  可以获取发送询盘的页面的链接,这样可以知道发送者感兴趣的是哪个产品; [_post_title]  可以获取询盘发送页面的标题等。把这几个放到message body里面, 你收到询盘后就可以看到相关的数据了,非常方便。全部的tag可以查看这里 https://contactform7.com/special-mail-tags/

File attachments 如果设置了文件上传,那就要把你那个代码[file-420]加到这里面了。如果没有就留空

mail 这里一般留空即可

全部设置好之后,点击save保存。

2.3 Message设置

这里面是一些提示信息文字的设置,一般保持默认即可,只需要改一个,把submission was referred to as spam这个框里面的内容修改一下,这样如果被拦截就可以知道是什么原因了。

2.4 Addtional settings

这里面可以增加一些扩展的代码,不过基本用不到,所以留空即可。

2.5 如何添加更多表单

可以直接点击contact – add new来添加更多菜单,我们也可以直接复制已经添加好的菜单,然后在上面修改 ,这样可以少做很多设置,方法如下

把光标放到已经设置好的inquiry表单,出现duplicate,然后点击它,即可生成一个一模一样的表单

然后修改标题,同样的方法进行编辑修改,再点击save保存即可。

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

设置好表单之后,点击表单后面的shortcode,复制它。

然后把这个表单的shortcode粘贴到post,page或portfolio页面,然后update。

再刷新前台页面,就可以看到表单显示出来了。

完成以后,一定要发一个测试询盘,看是否能发送成功,看是否能收到测试的所有信息,切记! 以免错过客户的百万大单!

4. 10种好看的Contact form 7 表单代码

以下是Hunk用css实现的10种还不错的contact form 7表单,如果有需要可以拿去使用

使用方法如下

  • 首先新建一个contact form 7,然后把下列对应表单代码放在Contact form 7的FORM当中,然后保存或更新
  • 其次,把对应的CSS代码放到你网站的CSS文件当中,如果你使用的是AVADA主题,那就是放在theme options – custom css中,然后更新
  • 再次,把[your-phone]放在contact form 7的Mail菜单中的message body中(如果这一个表单有这一项的情况下),然后保存
  • 最后,把这新建的这个表单放到需要显示的页面, 保存,刷新即可看到效果。

另外,所有绿色的button都是没有自定义的,跟你的网站设置的button会一致,你把这个表单放在你网站后,它自动变会成设置的颜色。

 

 

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:莲花不妖 » Contact form 7 管理表单插件使用介绍
分享到: 生成海报

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录