06/12/2023

为什么要设计您的Contact Form 7表单？

Contact Form 7是WordPress中最受欢迎的联系表单插件之一。它免费使用并允许您使用短代码添加表单。

然而，Contact Form 7的功能非常有限。其表单样式非常单调，并且插件没有内置选项来更改表单样式。这使得难以使联系表单的设计与您的网站主题匹配或编辑字体和背景颜色使表单脱颖而出。

如果您想要更可自定义且具有高级功能的表单，我们推荐WPForms，这是一款对初学者非常友好的联系表单插件。它带有拖拽式表单构建器，1800多个预构建表单模板和众多的自定义选项。WPForms也有免费的版本，包括60多个模板、条件逻辑、Stripe支付等功能。

开始使用Contact Form 7

首先，您需要在网站上安装并激活Contact Form 7插件。如果您需要帮助，请参见我们的指南如何安装WordPress插件。

激活后，您可以从WordPress控制面板转到Contact » Add New。

您现在可以编辑表单并为表单设定一个标题。插件会自动添加默认的姓名、电子邮箱、主题和消息字段。您也可以通过拖拽添加更多字段。

完成后，不要忘记点击“保存”按钮并复制短代码。
接下来，将其添加到您的博客文章或页面。

在WordPress中通过自定义CSS设计Contact Form 7表单

由于Contact Form 7没有内置样式选项，您需要使用CSS来设计您的表单。Contact Form 7生成的是标准合规的表单代码，每个元素都有相应的ID和CSS类，这让自定义变得非常容易。

每个Contact Form 7表单都使用CSS类.wpcf7，您可以用它来设计表单。

在这个例子中，我们将在输入字段中使用名为Lora的自定义字体，并更改表单的背景颜色。

div.wpcf7 { 
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif;
font-style:italic;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

如果您需要帮助添加自定义CSS，请参见我们的指南如何在WordPress网站中轻松添加自定义CSS。

在应用此CSS后，我们的联系表单看起来如下。

为多个Contact Form 7表单设计样式

如果您使用多个联系表单并希望为每个表单设计不同的样式，则需要使用每个表单生成的ID。上面的CSS将应用到网站上的所有Contact Form 7表单。

首先，打开包含您想要修改的表单的页面。接下来，将鼠标移动到表单的第一个字段，右键点击并选择“检查”选项。

浏览器屏幕将分裂，您将看到页面的源代码。在源代码中，找到表单代码的起始行。

如截图所示，我们的联系表单代码从这行开始：
<div role="form" class="wpcf7" id="wpcf7-f113-p114-o1" lang="en-US" dir="ltr">

id属性是Contact Form 7为此表单生成的唯一标识符，它是表单ID和表单所在页面ID的组合。

我们将使用此ID在CSS中为我们的联系表单设计样式，并将我们的第一个CSS代码段中的.wpcf7替换为#wpcf7-f113-p114-o1。

div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

您现在可以为您想要自定义的每个Contact Form 7表单重复此步骤并替换表单ID。