Contact Form 7 配置教程

Contact Form 7是什么?

网站在线表单留言工具,用于网站上客户发消息给商家,插件因为是完全免费并且配置简单所以大量的网站使用。

插件地址:

https://wordpress.org/plugins/contact-form-7/

Contact Form 7 怎么使用?

可添加多个表单,不同表单ID不同,可以用于不同页面调用。

组成部分:

Form

Mail

Message

Additional Setting

【详细介绍】

Form

配置客户填写的内容(填写内容慎选,填写框越多客户愿意填写的越少)

栏位类型:

text 文本

email 邮箱

URL 链接

tel 电话

number 数字

date 日期

text area 文字段落

drop-down menu 下拉菜单

checkboxes 多选项

radio buttons 单选项

acceptance 接受条款

quiz 验证问题

file 文件上传功能

submit 提交按钮

补充:

Contact Form CheckBox多选框如何将选择框放在后面:
添加label_first

选框在前:

[checkbox your-cb “Option 1” “Option 2” “Option 3”]
选框在后:

[checkbox your-cb label_first “Option 1” “Option 2” “Option 3”]

CheckBox多选框竖着排列:

Appearance-Customizing-Additional CSS(主题CSS样式表中)添加代码

span.wpcf7-list-item { display: block; }

Mail

配置发件人收件人及栏位信息

如果有信息遗漏字段黑色提示

To 收件箱

From 发件箱

Subject 主题

Additional headers 默认即可,收到表单点击回复自己加载客户预留邮箱

Message body 邮件内容,把添加的其他栏位标签增加进来,如果有遗漏的头部是黑色标识。

有用的TAG推荐:

[_remote_ip] 获取发送询盘的人的IP(能看出是哪个国家客户)

[_url] 获取发送询盘的页面的链接(如果表单在产品页就可以看出客户对哪个产品感兴趣)

[_site_title]调取此网站的标题(区分是哪个站收到的询盘)

[_site_url]调取此网站的链接(区分是哪个站收到的询盘)

[_date]调取日期

[_time]调取时间

[_contact_form_title]调取此表单标题

File attachments 文件上传部分对应file标签(不建议使用)

Mail 留空

Messages

栏位提示内容,发送成功或失败或错误提示的内容,大部分默认设置,成功可以增加部分营销语言比如24小时内回复,失败也可以增加可以直接联系XX@XX邮箱等等。

Additional Setting

额外设置

可以设置发送表单内容后跳转到制定页面

<script>

document.addEventListener( ‘wpcf7mailsent’, function( event ) {

setTimeout( () => {

location = ‘http://example.com/‘;

}, 3000 ); // Wait for 3 seconds to redirect.

}, false );

</script>

【其他】

Integration

支持谷歌验证工具reCAPTCHA减少垃圾信息

(需要提前注册reCAPTCHA账户,配置根据提示操作就可)

 

Contact form 7样式调整

宽度:

.wpcf7{width:500px!important;}

高度:

每一个输入框的高度

每一个输入框的下外边框

信息框的高度

对应的CSS代码

.wpcf7-form-control-wrap input{height:30px!important;}

.wpcf7-form-control-wrap textarea{height:100px!important;}

.wpcf7 p{margin-bottom:10px!important;}

按钮样式:

.wpcf7-submit{padding:15px 40px!important;background:#fff!important;border-radius:30px!important;border:2px solid #333!important;color:#333!important;}

.wpcf7-submit:hover{background:#333!important;color:#fff!important;}

搭配邮箱发送插件

WP Mail SMTP by WPForms

https://wordpress.org/plugins/wp-mail-smtp/

GA4统计Contact Form 7事件

谷歌官方插件:

Site Kit by Google – Analytics, Search Console, AdSense, Speed

https://wordpress.org/plugins/google-site-kit/

0
分享到: