美文网首页
如何修改Contact Form 7的按钮颜色和大小

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

作者: 张皓昱外贸营销 | 来源:发表于2019-06-22 19:04 被阅读0次

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代码这块,但是有时候遇到了问题喜欢刨根问题,就去谷歌找答案,大部分情况下都能解决。

大家要养成动手的习惯。

更多建站营销文章,欢迎访问博客:张皓昱的博客

微信公众号:张皓昱外贸营销

相关文章

网友评论

      本文标题:如何修改Contact Form 7的按钮颜色和大小

      本文链接:https://www.haomeiwen.com/subject/fabvqctx.html