Wordpress插件:Contact Form 7联系表单插件样式美化及高级功能使用方法

如何美化contact form 7

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

缩短表单的高度

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

一开始的代码是这样的:

Wordpress插件:Contact Form 7联系表单插件使用和美化-1

我们改造之后变成

Wordpress插件:Contact Form 7联系表单插件使用和美化-2

前台也变成了:

Wordpress插件:Contact Form 7联系表单插件使用和美化-3

主要的变化就是把

<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肚子也变小了:

Wordpress插件:Contact Form 7联系表单插件使用和美化-4

这里特别需要注意,区域默认值,如:name* 不要和系统预留字段冲突,如:Name*,否则会需要一个一个删除才能输入。

[text* your-name placeholder "Name*"]  //如果用大写的Name的话会冲突
[email* your-email placeholder "Email*"] //如果用大写的Email的话会冲突

[text* your-name placeholder "name*"]
[email* your-email placeholder "email*"]

Wordpress插件:Contact Form 7联系表单插件样式美化及高级功能使用方法-1

常用询盘表单的代码参考

将以下代码放到 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后台插件中搜索安装。

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

Wordpress插件:Contact Form 7联系表单插件使用和美化-5

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

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

那么怎么跳转呢?

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

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) 
{ location = '/thanks/'; }, 
false );
</script>
Wordpress插件:Contact Form 7联系表单插件使用和美化-7

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

Contact form 7 如何设置并排的两栏

Wordpress插件:Contact Form 7联系表单插件使用和美化-8

如果你的表单中单个输入框比较长,可以考虑设置两栏,就像上面这张图这样,那么你需要把下面这段代码覆盖掉你之前的表格代码:

<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>

代码放入如下位置:

Wordpress插件:Contact Form 7联系表单插件使用和美化-9

这片代码段中,我将name和email设置成了one-half,如果你想设置三栏,将class=”one-half”换成class=”one-third”,并在三栏中的最后一栏的class添加一个last。

如果你觉得输入框之间的间距不够大,可以设置 .keen-form div{margin-bottom:20px;}中的数值。

发表评论

后才能评论