美文网首页
如何修改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