contact form 7 wp表单插件完整教程 一文搞定
表单系统是营销型网站的必要部分，用wordpress搭建的网站有很多方法可以实现表单，有很多插件可以满足，自行搜索以下就会发现，插件都是很简单的可视化的。但是也有不好的样式就是那么多里面选择，想要适合自己的网站风格，还是没有自己写css来的合适。
下面针对Contact Form 7插件为基础，自定义美化，可以很方便的适配自身的网站风格。Contact Form 7是比较简单的一个插件没有那么多华丽的功能，但是简单的 表单字段验证，配合其他插件，可以邮件提醒，验证码功能。
建立Contact Form 7表单
安装很简单，趣插件里搜索然后安装即可，然后打开插件，新建表单，设置好自己的表单元素，这里建议为了自己样式的修改，可以用div等标签把各个字段包裹起来：
<div class="form-msg01 flex"><label>[email* your-email placeholder "*Email"]</label><label>[text* your-name placeholder "*Name"]</label><label>[tel* your-phone placeholder "*Phone"]</label><label>[text* your-country placeholder "*Country"]</label></div> <div class="form-msg02 flex"> <label>[textarea your-subject placeholder "Message"]</label> <label class="yzm"> [captchar captcha-170 4/4 placeholder "*Verification Code"] [captchac captcha-170] </label> </div> <div class="sub-button"> [submit "Submit"] </div>
表单字段元素，插件是用下面的形式
[text your-subject placeholder "Message"]
以上的就是input type=“text”的标签，your-subject这个是name属性，placeholder “Message” 表示标签里的 placeholder=”Message”（就是默认显示的提示词），如果有*就表示必填；如果给某个字段用了css控制样式，就用个div等元素包裹起来，这样生产的HTML结构就可以匹配css样式表。
配合Really Simple CAPTCHA 实现验证码
表单验证码可以很好的防止垃圾信息，对于验证码也有多种实现方式，这里说简单的字符串型（不用那么多花里胡哨），其他的负责方式有可能需要依托于其他api，谷歌验证等。Really Simple CAPTCHA是和Contact Form 7一个开发者开发的所以配合起来和顺畅。安装方式也简单，插件里搜索就行，安装完毕后，点击联系（Contact Form 7）下面的整合，选择CAPTCHA 的配置集成。
点击集成后，一般的教程说需要谷歌的账号，但是实际测试是不用的，然后在表单里可以使用验证码元素：
[captchar captcha-170 4/4 placeholder "*Verification Code"] [captchac captcha-170]
有几种样式可以选择：
输入此验证码：[captchac captcha-170] [captchar captcha-170 4/4] 小尺寸图片，镂空 输入此验证码：[captchac captcha-778 size:s fg:#ffffff bg:#000000] [captchar captcha-778 4/4] 大尺寸图片，绿色文字 输入此验证码：[captchac captcha-118 size:l fg:#00ff00 bg:#ffffff] [captchar captcha-118 4/4]
代码实现的效果分别是如下图：
获取表单简码 模板里使用
新建好的表单元素可以用wp的简码放在模板文件里，简码就是编辑表单的上部，形如[contact-form-7 id=”xxx” title=”xxx”] 格式：
然后放在模板文件里的位置，经过wp的解析会解析出一段表单html，本文第一部分的表单的元素最后生产的HTML结构如下：上半部是自动生成的，从div（form-msg01）才是后台我们设定的结构：
<div class="wpcf7 no-js" id="wpcf7-f133-o1" lang="zh-CN" dir="ltr"> <div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div> <form action="#####" method="post" class="wpcf7-form init" aria-label="Contact form" novalidate="novalidate" data-status="init"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="133" /> <input type="hidden" name="_wpcf7_version" value="5.7.7" /> <input type="hidden" name="_wpcf7_locale" value="zh_CN" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f133-o1" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> <input type="hidden" name="_wpcf7_posted_data_hash" value="" /> </div> <div class="form-msg01 flex"> <p><label><span class="wpcf7-form-control-wrap" data-name="your-email"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="*Email" value="" type="email" name="your-email" /></span></label><label><span class="wpcf7-form-control-wrap" data-name="your-name"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="*Name" value="" type="text" name="your-name" /></span></label><label><span class="wpcf7-form-control-wrap" data-name="your-phone"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" placeholder="*Phone" value="" type="tel" name="your-phone" /></span></label><label><span class="wpcf7-form-control-wrap" data-name="your-country"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="*Country" value="" type="text" name="your-country" /></span></label> </p> </div> <div class="form-msg02 flex"> <p><label><span class="wpcf7-form-control-wrap" data-name="your-subject"><textarea cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Message" name="your-subject"></textarea></span></label><br /> <label class="yzm"><br /> <span class="wpcf7-form-control-wrap" data-name="captcha-170"><input size="4" maxlength="4" class="wpcf7-form-control wpcf7-captchar" autocomplete="off" aria-invalid="false" placeholder="*Verification Code" value="" type="text" name="captcha-170" /></span><br /> <input type="hidden" name="_wpcf7_captcha_challenge_captcha-170" value="3635729349" /><img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-captcha-170" width="72" height="24" alt="captcha" src="http://news.minewtech.com/wp-content/uploads/wpcf7_captcha/3635729349.png" /><br /> </label> </p> </div> <div class="sub-button"> <p><input class="wpcf7-form-control has-spinner wpcf7-submit" type="submit" value="Submit" /> </p> </div><div class="wpcf7-response-output" aria-hidden="true"></div> </form> </div>
如果你的css样式没问题的话，可以得到形如下面的样式的表单
Contact Form 7事件状态 自定义提醒
因为我们在设计表单的时候，在后台就规定了各个字段的数据属性，和必填与否，插件Contact Form 7可以在点击提交后做相应的数据判断，如果数据不对是不会提交成功，而是返回错误。如果我们需要自定义提示提交成功还是错误的状态就需要知道几个状态，通过状态自定修改提示形式，下面的JavaScript自定义了提交成功（未发邮件）的状态下，弹窗提示成功（当然这个弹窗需要自己写好），另外几个事件也表明，可以在响应的地方做出提示。
// 监听表单提交事件
//wpcf7invalid — 当 Ajax 表单提交成功完成，但由于存在输入无效的字段而未发送邮件时触发。
// wpcf7spam — 当 Ajax 表单提交成功完成，但由于检测到可能的垃圾邮件活动而未发送邮件时触发。
// wpcf7mailsent — 当 Ajax 表单提交成功完成且邮件已发送时触发。
// wpcf7mailfailed— 当Ajax表单提交成功完成，但发送邮件失败时触发。
// wpcf7submit — 当 Ajax 表单提交成功完成时触发，这个点击提交就触发了。。
document.addEventListener( 'wpcf7mailfailed', function( event ) { //表单提交成功，邮件未发（后台有信息了）
$('#formMask').addClass('avtive')
if($("#productForm form").length>0){
console.log('清空 productForm')
$("#productForm form").get(0).reset() //清空
}else if($("#footerForm form").length>0){
console.log('清空 footerForm')
$("#footerForm form").get(0).reset() //清空
} }, false );
document.addEventListener( 'wpcf7mailsent', function( event ) { //表单提交成功，邮件已发
$('#formMask').addClass('avtive')
if($("#productForm form").length>0){
console.log('清空 productForm')
$("#productForm form").get(0).reset() //清空
}else if($("#footerForm form").length>0){
console.log('清空 footerForm')
$("#footerForm form").get(0).reset() //清空
}
}, false );
// 弹出层 处理
$('#formMask .closed').click(function(){
$('#formMask').removeClass('avtive')
})
配合Flamingo 查看留言信息
Contact Form 7是配合邮件系统，达到用户提交表单，系统就可以自动发送邮件提醒，如果没有那么及时性的需求，只是用户提交表单后后台可查看留言即可，那么可以使用Flamingo插件，这个安装就行，安装后可以自动获取到前台表单提交的信息。
Contact Form 7默认的要配置好邮件系统，前台提交表单的时候才会提示提交成功（如果邮件系统未配置成功，及时表单元素全部验证成功，用户提交了表单，后台有留言数据，但是没有发送邮件还是会提示失败，这种提示对用户不友好，会以为没有提交成功，造成多次提交）。当我们只需要在提交表单到后台就算成功，那么我们可以在 wpcf7mailfailed 状态就弹窗提示成功，并把默认的提示（未发送邮件成功的错误提示）去掉，可以使用下面的css直接隐藏掉，这样用户就不会得到邮件未发送成功的错误提示。
.wpcf7-response-output{display:none; /* 错误提示 */}
配合Easy WP SMTP 自动发邮件提醒
如果确实需要邮件提醒功能，达到用户这边已提交了表单，那边就可以收到邮件，而不用登入后台去查看留言，那么就需要配合邮件插件了，这里推荐使用Easy WP SMTP，还是因为它够简单，没有那么多花里胡哨的功能。同样去商店搜索下载安装即可，然后点开设置，按照下面的图中的方式设置就行。前提是需要准备一个开通了SMTP的邮箱账户，QQ，网易这些都可以的，然后拿到smtp的密码，如果不知道的怎么申请的，可以自行搜索，很容易的，然后按照下面的设置，以QQ系的为例，其他的邮箱，在地址和端口会不一样：
自定义邮件格式
这样设置好了，基本上就完成了，有用户提交表单的话，系统就会自动给你设置的邮箱里发送一个邮件，提醒有人提交了表单，如果是公司企业的话，需要正式点，还可以通过自定义邮件内容，可以通过表单里的邮件功能，设置邮件格式内容，就是把用户提交过来的数据更加明目的通过邮件发过去。
至此，关于Contact Form 7的完全自定义使用教程就完了，可以完全配合自身网站的风格制定的表单样式，总结一下功能实现，验证码插件（Really Simple CAPTCHA）实现防垃圾信息，留言查看插件（Flamingo）可在网站后台浏览到表单提交的信息，邮件插件（Easy WP SMTP ）实现邮件提醒功能；如果想要自定义一些提醒状态就需要了解表单提交的几个状态事件，通过绑定事件状态可以在特定的事件点上做相应的处理。
用户IP的字段[_remote_ip]，和提交页面[_url]为插件自带字段，可以直接在自定义邮件模板里使用，如果想要获取到用户的国家地区可查看更新文章：Contact Form 7 获取提交IP 和国家地区
① 本站源码模板等资源SVIP用户永久不限量免费下载
② 所有资源来源于网络收集，如有侵权，请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流，请不要用于商业用途，否则后果自负。
④ 如果你有源码需要出售，可以联系管理详谈。
⑤ 本站提供的源码、模板、插件等等资源，都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内，为了大环境的良性发展，请尽可能的选择正版资源。
⑧ 网站资源绝不做任何二次加密或添加后门（原版加密除外）
- 需要积分的资源怎么下载？
- 您可以注册后签到等活跃动作获得积分，积分可下载，也可充值升级等级免费下载。
- 源码模板等文件安全吗？有没有后门病毒吗？
- 站内资源标有“已测试”标签的资源源码，表示已经在本地安装测试调试过才分享出来的，可以保证一定的安全；若不放心可以自行下载模板资源后使用D盾等查杀工具扫一遍确认安全。
- 本站网站模板等源码提供安装服务吗？
- 本站资源收集于网络并分享出来共同学习，不提供免费安装服务，模板源码安装等需要有一定熟悉度，小白用户可以下载资源后雇人安装调试。