如何以简单的方式自定义您的联系表 7 样式

联系表格是每个网站的一个非常重要的元素。 我们使用它们来收集和共享各种类型的信息，因此必须注意它们的外观与我们网站的其他部分一样好。 过于简单的联系表格，风格看起来不属于页面，无法为您的用户灌输信任感，并且在他们想要采取的时候失去您的观众是很遗憾的更进一步，将他们的一些数据留在您的联系表格中。

创建联系表格的一种非常流行的方法是使用联系表格 7 插件，这是一个实用且易于使用的工具，通常免费包含在许多 WordPress 主题中，可让您轻松创建各种联系表格。 这个插件涵盖了创建联系表单的所有技术方面——要设置它的样式，您需要额外的技能或其他插件。

在本文中，我们将向您展示如何使用免费工具轻松设置联系表单以匹配您的网站设计。

请继续关注以了解更多信息：

• 使用 Elementor 的 Qi 插件来样式化您的联系表格
• 设置联系表格样式

使用 Elementor 的 Qi 插件来样式化您的联系表格

适用于 Elementor 的 Qi Addons是一个免费的、功能丰富的插件，带有 60 个小部件，并包括一个专门为帮助您对表单进行样式化而创建的 Contact Form 7 小部件。 该插件需要零编码知识，从字面上看，任何人都可以舒适地使用它。 它没有为您提供创建联系表格的选项，但如果您使用联系表格 7 插件，您将能够使用 Qi 自定义和重新设计您的表格，使其与您的网站风格完美匹配。

适用于 Elementor 的 Qi 插件易于安装和配置，其过程与任何其他插件几乎相同。

安装后，转到要设置样式的联系表单所在的页面，然后选择在 Elementor 中对其进行编辑。

然后在左侧菜单的搜索字段中键入 Contact Form 7以查找 Contact Form 7 小部件。

现在，当您获得它时，单击它并将鼠标悬停在您希望联系表单所在的位置上。

您以这种方式添加的表单是您使用 Contact Form 7 插件创建的表单，此小部件仅用于帮助您设置表单样式，您无法使用它创建表单。 因此，现在您已将联系表单放置在您想要的位置，您可以在左侧菜单中看到联系表单 7 小部件设置。

菜单中的第一个选项卡为您提供了选择要在页面上显示哪种类型的联系表的选项。 我们可以在三个选项之间进行选择——联系表格 1、时事通讯和联系我们，当然，您可以选择之前为您的网站创建的任何表格。 现在让我们向您展示我们如何在我们的网站上自定义“联系我们”表单。

设置联系表格样式

要打开表单样式选项，请单击样式选项卡。

第一个选项是标签排版，您可以在其中设置字体、字体大小、标签单词之间的间距、字体样式、单词中字母之间的间距，最棒的是您可以看到所有的变化立即生活，这样你就不会盲目地做任何事情。

在下图中，您可以准确地看到我们的选择如何反映在标签排版上。

下一个选项是指标签颜色。

您可以根据需要创建自己的阴影。 我们为标签选择深蓝色，因为它与页面的背景颜色非常吻合。

现在，当您都设置好标签样式后，接下来的设置是指输入样式。

您在这里也将有类似的选项——您可以选择输入排版字体样式、大小和颜色。 如果您不希望它默认为白色，您还可以设置输入字段的背景颜色。 您还可以在此处找到用于调整输入字段边框样式的设置，您可以在实线、虚线、凹槽、点线、双线或无线之间进行选择，并且您可以针对每个选项进行额外调整。

您还可以在输入字段处于活动状态时设置不同的样式。 您可以使用所有相同的选项，但仅当输入字段处于活动状态时才会应用。

下一个设置参考复选框样式。 这个微小的元素在联系表格中非常重要，它应该看起来整洁且易于访问，因为这是您为网站用户提供某种选择的步骤。

使用 Qi，您将轻松使此元素看起来完美。 您可以设置复选框输入大小，您可以在两个复选框之间以及复选框和其他输入字段之间留出或多或少的空间。 您可以在下面的照片中清楚地看到我们的选择在这种情况下如何影响联系表：

下一个重要的设置是按钮样式设置。

您可以更改按钮背景的颜色，将按钮周围的边框设置为不同的颜色和样式（实线、虚线或虚线）。 您还可以通过在按钮颜色选项中选择所需的颜色来更改按钮中文本的颜色。 所有更改都立即可见，因此您可以轻松了解哪些设置引用了联系表单的哪个元素。

如果您希望按钮的样式在悬停时更改，请单击“活动”选项卡并调整设置——您可以调整按钮悬停颜色、按钮悬停背景颜色、按钮悬停边框颜色等。

当您对联系表单的外观感到满意时，您现在可以通过打开“间距样式”选项卡中的设置来调整间距。 您可以在此处调整联系表单的每个元素的间距。

全局样式设置是指联系表单的对齐方式。 您可以选择左对齐、居中对齐和右对齐。

错误样式设置允许您控制当有人未在表单中键入正确数据时显示的错误消息的样式。 您可以轻松设置错误消息的位置、排版和颜色。

响应样式设置允许您微调插入到联系表单中的响应的详细信息。 您可以控制字体、字体颜色、设置响应填充和响应边距以及边框类型。

这是有人发送消息后我们的表单的样子：

而且，就像这样，您的页面上有一个优雅的联系表格，可以为您工作。

把它包起来

适用于 Elementor 的 Qi Addons 的优点在于，您可以实时查看所做的所有更改，以便您可以快速浏览不同的选项并学习如何直观地使用它们。 尽管添加联系表格并不是一项特别有创意的任务，但即使在这种情况下，此插件也可以让您发挥创意。 您的联系表单的外观会极大地影响用户对您的看法，如果您也设法在该部门提供相同的标准，这将为您的网站、品牌和业务带来巨大的优势。

我们希望这篇文章对您有所帮助。 如果您喜欢它，请随时查看其中的一些文章！

• 值得拥有的最佳 WordPress 按钮插件
• 4种创建WordPress按钮的简单方法
• 按钮设计技巧：如何获得访问者的点击