如何在WordPress中设置联系人表单7的样式

做一个 website 访问者/客户是否可以随时接触到你. Appealing Contact Form 这是个好机会吗.

Contact Form 7 是最好的选择之一吗.

The popularity of Contact Form 7 plugin 是巨大的，根据它的灵活性，易用性和简单的实现. 然而，天下没有十全十美的事 plugin has its drawbacks.

By default the Contact Form 7 plugin 不样式它的形式，虽然看起来有点简单.

Hardly surprising, 当涉及到我们的声誉或业务时，我们坚持设定高标准.

The website 它的主人和它的脸是必要的，以达到一个完美的结果.

And now, 我们将学习如何通过在表单中添加自己的样式来处理缺乏样式的问题，使其真正具有吸引力并立即吸引访问者的眼球.

在哪里添加自定义CSS规则?

我们可以很容易地通过添加简单的CSS规则 Appearance -> Customize -> Additional CSS 在管理面板中.

如何为整个表单添加样式?

让我们从基础开始. 的顶层元素 contact form has wpcf7 class. 对整体进行样式化 contact form，为该类添加样式规则 selector. It will add background 颜色和边框的整体形式.

.wpcf7 {
    background - color: # eaf6ff;
    边框:7px实线#0f80be;
}

正如你所看到的，有一些间距问题，所以让我们添加填充到表单:

div.wpcf7 {
    填料:3% 5% 3% 5%;
}

如何将样式添加到各个字段?

太好了，现在看起来好多了. 让我们添加样式到 individual fields. 最常见的字段类型是 文本、电子邮件和文本区 所以我们为它们添加一个样式规则

.wpcf7输入类型=“文本”,
.wpcf7输入(type = "电子邮件"),
.wpcf7 textarea {
    background - color: # fff;
}

比较常见的请求之一是调整 width 因此，使用下面的代码，我们将把这些区域扩展到所需的区域.

.wpcf7-textarea {
    width: 90%; 
} 

.wpcf7 input {
    width: 50%;
}

.wpcf7-text {
   width: 50%;
}

如何编辑标签样式?

此外，我们可以调整颜色，字体大小，字体族等 labels 使用以下CSS:

.wpcf7 label {
    color: #008287;
    font-size: 20px;
    font-weight: bold;
}

如何添加样式提交按钮?

我们还将学习如何编辑 background 提交按钮的边框颜色 hover view:

.Wpcf7 input[type='submit'] {
    color: #ffffff;
    background - color: # 008287;
	border: #008287; 
}
	   
.提交:悬停、输入(type = '提交'].wpcf7-submit:{徘徊
    color: #ffffff;
    background - color: # 3 b5998;
    边框颜色:# 3 b5998; 
}

刷新联系人页面，享受您的工作成果. 我祝贺你! 现在，您知道如何使窗体具有吸引力和醒目性.

如果你正在寻找高级模板来构建一个 website 从头开始，仔细查看 WordPress themes.