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代码这块,但是有时候遇到了问题喜欢刨根问题,就去谷歌找答案,大部分情况下都能解决。
大家要养成动手的习惯。
更多建站营销文章,欢迎访问博客:张皓昱的博客
微信公众号:张皓昱外贸营销
网友评论