Wordpress插件:Contact Form 7联系表单插件样式美化及高级功能使用方法
如何美化contact form 7
基础的contact form 7 还是有点质朴的,白话就是丑,如果想弄好看一点,可以做以下步骤:
缩短表单的高度
可以把表单的label文字弄到placeholder,这样能节省空间:
一开始的代码是这样的:
我们改造之后变成
前台也变成了:
主要的变化就是把
<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肚子也变小了:
这里特别需要注意,区域默认值,如:name* 不要和系统预留字段冲突,如:Name*,否则会需要一个一个删除才能输入。
[text* your-name placeholder "Name*"] //如果用大写的Name的话会冲突
[email* your-email placeholder "Email*"] //如果用大写的Email的话会冲突
[text* your-name placeholder "name*"]
[email* your-email placeholder "email*"]
常用询盘表单的代码参考
将以下代码放到 contact form 7第一个选项FORM里面,保存,就可以调用到这个询盘表单了,这是我常用的一个。
<p class="cf7-title"><h2 style="font-size:25px;"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</h2></p>
<p>[text* your-name placeholder "Your name*"]</p>
<p>[email* your-email placeholder "Email Address*"]</p>
<p>[text your-subject placeholder "Your website*"]</p>
<p>[textarea your-message placeholder "Give us your need as specific as possible*"]</p>
<p>[submit "Send"]</p>
Conact form 7 skins插件
Contact Form 7 Skins是一款cf7的美化插件,可以自己在wp后台插件中搜索安装。
这个插件可以实现拖拉元素进入到表格中,另外还内置了十几个表单设置以及表单样式,不用代码都能弄出好看的表格来。
Contact form 7 发信之后如何跳转到thanks页面
我们用时候需要用户发信之后跳转到thanks页面,这样我们就能统计网站表单的转化率,在thanks页面可以加入再营销代码,这样还能筛选出用户进行二次营销。
那么怎么跳转呢?
可以加入以下代码到cf7的表单下面
<script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = '/thanks/'; }, false ); </script>
一定要注意,location后面要填入thanks页面的链接地址,不要填错了。
Contact form 7 如何设置并排的两栏
如果你的表单中单个输入框比较长,可以考虑设置两栏,就像上面这张图这样,那么你需要把下面这段代码覆盖掉你之前的表格代码:
<div class="keen-form">
<div class="one-half">[text* your-name placeholder "Your Name*"] </div>
<div class="one-half last">[email* your-email placeholder "Your Email*"] </div>
<div> [text* your-subject placeholder "Your Subject*"] </div>
<div>[textarea your-message placeholder "Your Message"] </div>
<div>[submit "Submit"]</div>
</div>
<style>
.keen-form div{margin-bottom:20px;}
.one-half,.one-third {
position: relative;
margin-right: 4%;
float: left;
z-index: 99;
}
.one-half { width: 48%; }
.one-third { width: 30.66%; }
.last {
margin-right: 0 !important;
clear: right;
}
@media only screen and (max-width: 767px) {
.one-half, .one-third {
width: 100%;
margin-right: 0;
}
}
</style>
代码放入如下位置:
这片代码段中,我将name和email设置成了one-half,如果你想设置三栏,将class=”one-half”换成class=”one-third”,并在三栏中的最后一栏的class添加一个last。
如果你觉得输入框之间的间距不够大,可以设置 .keen-form div{margin-bottom:20px;}
中的数值。