如何使用 vw 和 vh 长度单位在 Divi 中设计响应式联系表单
已发表: 2019-06-12Web 表单对您网站的成功至关重要。 考虑到大多数在线业务依赖于电子邮件选择和联系表格等形式通过建立电子邮件列表和与潜在买家沟通来赚钱，这是有道理的。 而且，现在我们需要确保我们设计的响应式表单在所有浏览器和移动设备上看起来都很棒。
在本教程中，我将向您展示如何在 Divi 中使用 vw 和 vh 长度单位设计响应式联系表单。 我们将介绍如何根据浏览器的宽度和高度调整输入字段和按钮的大小和间距。 这将使您能够最大限度地提高表单在所有设备上的可见性，即使是手机上的横向视图。
为此，我们将使用 Divi 的内置设置，它允许您轻松自定义表单文本、字段和按钮。
让我们开始吧。
抢先看
桌面
药片
电话（纵向）
电话（横向）
免费下载响应式联系表单布局（也包括响应式电子邮件 Optin 表单！）
要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。
让我们进入教程好吗？
你需要什么开始
首先，您需要进行以下设置：
- 已安装并激活 Divi 主题
- 在前端从头开始构建的新页面（可视化构建器）
- 您最喜欢的饮料（可选，除非您还没有喝咖啡）
之后，您将有一个空白画布开始在 Divi 中构建响应式表单。
为什么在响应式设计中使用 vw 和 vh 长度单位
长度单位是调整网页上元素大小和间距所需的值。 网页设计中最常用的长度单位可能是像素和百分比。 例如，像素是用于调整文本大小的常用长度单位，em 长度单位通常用于行高，百分比长度单位通常用于响应式设计的间距和大小调整元素。 事实上，Divi 元素（模块、行、节）的默认长度单位值是使用这些常见的长度单位构建的。
长度单位将是绝对的（无论其他元素的大小如何都保持相同的大小）或相对的（根据其他元素的大小变化/缩放）。 例如，一个像素是一个绝对长度单位。 因此，如果文本正文的字体大小为 16 像素，则无论其容器的大小如何，文本都将保持为 16 像素。 但百分比和 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 不会考虑滚动条的宽度。 因此，对于全角显示使用百分比总是更好。
创建联系表单
行就位后，我们现在可以将联系表单模块添加到行中。
添加联系表单后，将内容更新为标题并禁用验证码。
标题：联系我们
显示验证码：否
使字段全宽
对于此设计，我将使用全角字段。 这将允许我在字段之间添加一致的间距（因为没有使用浮动），并且它允许我为每个字段提供自定义宽度，以便稍后进行独特的设计。 现在，打开姓名和电子邮件字段的设置，并将“制作全角”选项设置为“是”。
优化响应式设计的领域
现在返回联系表单设置。 现在我们可以使用 vw 和 vh 长度单位自定义表单字段。 更新以下内容：
字段文本颜色：#333333
字段边距（桌面和平板电脑）：2vw 顶部，2vw 底部
场边距（电话）：2vh 顶部，2vh 底部
字段填充（桌面和平板电脑）：1vw 顶部，1vw 底部，2vw 左，2vw 右
字段填充（电话）：2vh 顶部，2vh 底部，2vh 左，2vh 右
字段文本大小：2.5vw（桌面），4vh（手机）
注意：使用 4vh 手机将允许您的文本大小随手机显示屏的高度缩放，这将有助于在横向手机显示中查看表单（将手机侧向转动）。 但是，如果您想要更一致的文本大小，您可能需要为手机显示屏上的字段文本大小使用像素长度单位。
设计标题文本
对于标题文本，自定义以下内容：
标题标题级别：H2
标题字体：Karla
标题字体粗细：粗体
标题文字颜色：#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 长度单位来设计响应式电子邮件选择表单。 这是电子邮件选择表单设计的屏幕截图，包含在本文提供的免费下载中。
桌面
药片
电话（纵向）
电话（横向）
最后的想法
使用 vw 和 vh 长度单位，我们可以创建一个响应式联系表单（或任何 Divi 表单），在所有浏览器大小和移动设备上看起来都很棒。 当您调整浏览器宽度时，响应式设计将平滑地缩放表单元素。 而且，如果您在手机显示屏上使用 vh 长度单位，您甚至还可以优化纵向和横向手机显示屏的形式。
不要忘记查看免费下载以获取响应式联系表单和电子邮件选择的工作示例。
希望这篇文章可以为您提供一些关于如何为您的下一个项目创建一些漂亮的响应式表单的提示。
我期待在评论中收到您的来信。
干杯!