如何修改Contact Form 7的按钮颜色和大小

Contact Form 7是Wordpress出品的一款比较流行的询盘插件，全球下载量非常高，但是这个表单存在几个问题：

1，如果你是腾讯企业邮箱，如果你设置的CONTACT FORM的默认收件箱是你的腾讯企业邮箱，很大可能你是收不到询盘的。

2，CONTACT FORM默认的样式非常死板，不美观。

针对第一个问题，我的建议就是如果真的收不到测试的邮件，可以先把contact form默认收件箱改成其他家的邮箱，比如gmail,hotmail,outlook的，然后设置自动转发到你的企业邮箱。

还有一个可能性收不到邮件是因为你主机用的bluehost家的，使用siteground主机这种情况出现的比较少。但是有时候也会出现在垃圾箱里，记得检查。

今天我们主要是写写如何修改Contact Form 7的按钮大小和颜色。

首先我们来看下默认的contact form表单是什么样子的，基本上就是非常简单形式如下：

十分的没有特色，比较丑陋，如果你想改成比较漂亮的样式，我推荐去hunk的博客，有篇文章专门教你如何修改contact form的样式，之前我也提过hunk是比较早的一批在米课外贸圈里wordpress建站老司机了，我最早学习wordpress外贸建站经常去他的博客学习。

当然现在也会经常去访问，hunk人比较低调，我喜欢低调的人。

我们先看下修改后的表单按钮的样式：

鼠标没有放上去的样式如下

鼠标放到按钮上的Hover效果

这个按钮的背景色和鼠标放上去的Hover颜色是如何修改的呢，一般情况下就是在appearance-theme option-custom css里面，我们需要会一点css的技术，如果不懂也没有关系，可以直接去谷歌搜索问题 How to change button color of contact form button/size，一般都能找到答案的，只要你不怕麻烦。

这个背景色的css代码如下，直接复制粘贴到custom css里面即可，当然颜色都是可以自己去修改的。

input.wpcf7-form-control.wpcf7-submit {
background-color: red;
color: white;
}

Hover效果的代码：

input.wpcf7-form-control.wpcf7-submit:hover {
background-color: black;
color: yellow;
}

另外我们再修改下这个Button size，代码如下：

.wpcf7-submit {
    display: block;
    width: 100% !important;
}

其中，width就是说这个Button的宽度，我这边设置的是100%的宽度，你可以自己改成自己想要的样子。

contact form按钮里面的字体和大小修改代码：

input.wpcf7-form-control.wpcf7-submit {
    font-family: “futura-pt”,sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.135em !important;
    font-size: 16px !important;
}

以上就是整个修改过程，其实我本人也不是非常擅长css代码这块，但是有时候遇到了问题喜欢刨根问题，就去谷歌找答案，大部分情况下都能解决。

大家要养成动手的习惯。