如何使用 vw 和 vh 长度单位在 Divi 中设计响应式联系表单

Web 表单对于您网站的成功至关重要。 考虑到大多数在线业务都依赖电子邮件选项和联系表格等形式通过建立电子邮件列表和与潜在买家沟通来赚钱，这是有道理的。 而且，现在我们需要确保我们设计的响应式表单在所有浏览器和移动设备上都看起来很棒。

在本教程中，我将向您展示如何使用 Divi 中的 vw 和 vh 长度单位设计响应式联系表单。 我们将介绍如何根据浏览器的宽度和高度调整输入字段和按钮的大小和间距。 这将使您能够最大限度地提高表单在所有设备上的可见性，即使对于手机上的横向视图也是如此。

为此，我们将使用 Divi 的内置设置，让您轻松自定义表单文本、字段和按钮。

让我们开始吧。

抢先看

桌面

药片

电话（纵向）

电话（横向）

免费下载响应式联系表单布局（也包括响应式电子邮件选择表单！）

要掌握本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们来看看教程好吗？

你需要什么开始

要开始使用，您需要进行以下设置：

1. Divi 主题已安装并处于活动状态
2. 在前端从头开始构建的新页面（可视化构建器）
3. 您最喜欢的饮料（可选，除非您还没有喝咖啡）

之后，您将有一个空白画布开始在 Divi 中构建响应式表单。

为什么使用 vw 和 vh 长度单位进行响应式设计

长度单位是网页上元素大小和空间所需的值。 网页设计中最常用的长度单位可能是像素和百分比。 例如，像素是用于调整文本大小的常用长度单位，em 长度单位通常用于行高，百分比长度单位通常用于响应式设计的间距和调整元素大小。 事实上，Divi 元素（模块、行、节）的默认长度单位值是使用这些常见的长度单位构建的。

长度单位将是绝对的（无论其他元素的大小保持相同的大小）或相对的（根据其他元素的大小更改/缩放）。 例如，一个像素是一个绝对长度单位。 因此，如果正文的字体大小为 16px，则无论其容器大小如何，文本都将保持 16px。 但是百分比和 em 都是相对长度单位。 因此，具有 em 值的行高将随着元素文本大小的变化而调整。 由于百分比也是一个相对长度单位，因此宽度为 80% 的行将占其容器（或部分）的 80%。

vw 和 vh 长度单位也是相对长度单位，但不是相对于元素父容器，而是相对于实际的浏览器视口。 视口宽度（vw）是相对于浏览器的宽度，视口高度（vh）是相对于浏览器的高度。 使用这些长度单位是使您的设计在所有浏览器上保持一致的一种方法，因为它会根据视口进行缩放。 这使得每个元素的大小更加可预测和易于管理，而不必担心在每个设备或响应断点上为每个元素提供不同的大小。 vh 长度单位特别适用于手机显示器，因为它会考虑手机在纵向和横向视图中的视口高度。

这种技术最适用于依赖于桌面上的大型全宽显示器的设计，当用户调整浏览器宽度时，尺寸会平滑地缩放。

有关长度单位的更详细说明，请查看有关在 Divi 中使用长度单位的指南。

第 1 部分：在 Divi 中设计响应式联系表单

创建节和行

创建具有单列行的常规部分。 在添加任何模块之前，请按如下方式更新部分设置：

背景渐变左颜色：#fd7b5b
背景渐变右颜色：#a92200

然后打开行设置并给它背景渐变。

背景渐变左颜色：#ffdb8b
背景渐变右颜色：#fdb15b

接下来，让我们使用 vw 长度单位调整行的大小，以便它随浏览器缩放。

宽度：66vw（台式机）、66vw（平板电脑）、100%（手机）
最大宽度：66vw（台式机）、66vw（平板电脑）、100%（手机）
最小高度：100vh（电话）

内边距：0px 顶部，0px 底部

66vw 值将确保该行将保持大约三分之二的浏览器视口宽度。 手机显示屏上的 100vh 值将确保行高等于手机视口的高度（可选，但对于手机上行内容区域的最佳显示来说是一个不错的选择）。

请注意，行的宽度设置为 100%（不是 100vw）。 这是因为当您向下滚动页面时，100vw 不会考虑滚动条的宽度。 因此，对全角显示使用百分比总是更好。

创建联系表

有了我们的行，我们现在可以将联系表单模块添加到行中。

添加联系表单后，将内容更新为标题并禁用验证码。

标题：联系我们
显示验证码：否

使字段全宽

对于这个设计，我将使用全角字段。 这将允许我在字段之间添加一致的间距（因为没有使用浮动），并且它将允许我为每个字段提供自定义宽度，以便稍后进行独特的设计。 现在，打开名称和电子邮件字段的设置，并将“Make Fullwidth”选项设置为“YES”。

优化响应式设计的字段

现在返回联系表单设置。 现在我们可以使用 vw 和 vh 长度单位自定义表单字段。 更新以下内容：

字段文本颜色：#333333
字段边距（台式机和平板电脑）：2vw 顶部，2vw 底部
字段边距（电话）：2vh 顶部，2vh 底部

字段填充（台式机和平板电脑）：顶部 1vw，底部 1vw，左侧 2vw，右侧 2vw
字段填充（电话）：2vh 顶部，2vh 底部，2vh 左侧，2vh 右侧

字段文本大小：2.5vw（桌面），4vh（手机）

注意：使用手机的 4vh 将允许您的文本大小随手机显示屏的高度缩放，这将有助于在手机横屏显示中查看表单（将手机侧向转动）。 但是，如果您想要更一致的文本大小，您可能需要使用像素长度单位作为手机显示屏上的字段文本大小。

设计标题文本

对于标题文本，自定义以下内容：

标题标题级别：H2
标题字体：卡拉
标题字体粗细：粗体
标题文字颜色：#f56845
标题文字大小：7vw（桌面），8vh（手机）
标题字母间距：1vw
标题行高度：0.6em

为响应式设计优化按钮

对于联系表单按钮，我们将添加与我们之前设计的字段类似的间距和文本大小。

单击以使用自定义按钮样式并更新以下内容：

按钮文字大小：2.5vw（桌面），4vh（手机）
按钮文字颜色：#ffffff
按钮背景颜色：#333333
按钮边框宽度：0px
按钮边框半径：0px
按钮字体：蒙特塞拉特
按钮边距（桌面）：顶部 1vw，左侧 0px，右侧 0px
按钮边距（电话）：1vh 顶部
按钮填充（桌面）：3vw 顶部，3vw 底部
按钮填充（电话）：3vh 顶部，3vh 底部

按钮框阴影：见截图
盒子阴影水平位置：2em
盒子阴影垂直位置：0.4em
阴影颜色：rgba(245,104,69,0.29)

在联系表格中添加间距

接下来，使用 vw 长度单位和框阴影添加一些填充联系人表单到表单字段，如下所示：

填充（桌面）：3vw 顶部，3vw 底部，5vw 左侧，5vw 右侧
填充（电话）：5vh 顶部，5vh 底部，3vh 左侧，3vh 右侧

按钮框阴影：见截图
盒子阴影水平位置：2em
盒子阴影垂直位置：0.4em
阴影颜色：rgba(245,104,69,0.29)

到目前为止的结果

桌面

药片

电话（纵向）

电话（横向）

最后的润色

调整表单域的宽度

对于独特的设计选项，您可以自定义每个字段的宽度。 打开名称字段设置并更新宽度如下：

宽度：50%（桌面）、100%（手机）

然后打开电子邮件字段设置并更新宽度，如下所示：

宽度：65%（桌面）、100%（手机）

接下来，打开消息字段设置并更新宽度，如下所示：

宽度：80%（桌面）、100%（手机）

使按钮全宽

要使响应式联系表单按钮全宽，首先我们需要在联系按钮输入框中添加以下自定义 CSS：

width: 97%;

然后打开页面设置，添加如下自定义css：

.et_contact_bottom_container {
  float: none;
}

最终设计

现在我们已经完成了，查看我们响应式表单的最终结果。 注意在桌面和平板电脑上调整浏览器宽度时联系表单是如何缩放的，以及在手机上调整视口高度时设计是如何调整的。

桌面

药片

电话（纵向）

电话（横向）

对电子邮件选择表单使用相同的设计设置

您也可以使用相同的 vw 和 vh 长度单位来设计响应式电子邮件 optin 表单。 这是电子邮件 optin 表单设计的屏幕截图，包含在这篇文章的免费下载中。

桌面

药片

电话（纵向）

电话（横向）

最后的想法

使用 vw 和 vh 长度单位，我们可以创建在所有浏览器尺寸和移动设备上看起来都很棒的响应式联系表单（或任何 Divi 表单）。 当您调整浏览器宽度时，响应式设计将平滑地缩放表单元素。 而且，如果您在手机显示屏上使用 vh 长度单位，您甚至可以优化纵向和横向手机显示屏的形式。

不要忘记查看免费下载以获取响应式联系表单和电子邮件选择的工作示例。

希望这篇文章能给你一些关于如何为你的下一个项目创建一些漂亮的响应表单的提示。

我期待在评论中收到您的来信。

干杯!