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

网站搭建教程 2年前免费

如何美化contact form 7

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

缩短表单的高度

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

一开始的代码是这样的：

我们改造之后变成

前台也变成了：

主要的变化就是把

改成

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

代码放入如下位置：