如何使用 Divi 创建内联联系表

已发表: 2017-07-14

主页的英雄（或首屏）部分是主要的房地产。和大多数房地产开发商一样，您希望最大化您的空间。这就是内联联系表派上用场的地方。内联表单基本上是一种所有字段或控件保持并排、内联和左对齐的表单。这种紧凑的布局非常适合增加主页或登录页面的转化率。

今天我将向您展示如何使用 Divi 的 Visual Builder 为您的网站创建内联联系表格。完成这项工作所需的工作实际上就是调整表单字段的宽度和对齐方式。为此，我们将利用联系人模块的设计功能，并在“高级”选项卡中添加一些自定义 CSS。

如果您是 Divi 的新手，请不要让“高级”选项卡阻止您学习本教程。我已尽力使事情简单明了。

享受。

这是内联联系表单的外观示例

在线联系表格

概念与灵感

如果您曾经不得不在网上购买汽车保险或搜索新房，那么您可能已经看到了一个内嵌表格，它有目的地使用最少的输入字段进行紧凑，以便您（用户）更倾向于让球滚动新报价。所以我想创建一个简单的在线联系表单，它可以为 Divi 用户做类似的事情。尽管此联系表无法执行诸如生成报价或拉出房屋列表之类的操作，但它确实满足了希望为客户或用户提供简单联系方式的企业主或博主的需求。

使用 Divi 实现设计

订阅我们的 YouTube 频道

我们首先添加一个具有单列结构行的常规部分。

在线联系表格

由于我们的其余元素在白色背景上很难看到，让我们继续将背景颜色添加到我们的部分，方法是转到“部分设置”并更新以下内容：

内容选项

背景颜色：#006ea5

在线联系表格

保存设置

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

在线联系表格

更新联系表单设置如下：

内容选项

提交按钮文本：“获取报价”
电子邮件：[输入应发送消息的电子邮件地址]
显示验证码：否
表单背景颜色：rgba(255,255,255,0)

在线联系表格

设计选项

表单域字体：Lato
表单域字体大小：24px
表单字段文本颜色：#ffffff
输入边框半径：3px
使用边框：是
边框颜色：#ffffff
边框宽度：1px
按钮文字大小：24px 桌面，20px 平板电脑，20px 智能手机
按钮文字颜色：#0c71c3
按钮背景颜色：#f4f11f
按钮边框宽度：3px
按钮边框半径：3

在线联系表格

保存设置

返回内容选项卡并通过单击字段栏右侧的垃圾桶图标删除消息字段。然后通过单击带有位于各个字段栏下方的白色加号的灰色圆圈按钮来添加新字段。这将是电话字段。

在线联系表格

更新字段设置如下：

内容选项

字段 ID：“电话”
标题：电话

在线联系表格

设计选项

制作全宽：否
允许的符号：仅数字 (0-9)

在线联系表格

高级选项

在Main Element框中输入以下自定义 CSS ：

Max-width: 18%;
Float: left;
Margin-top: -1.5%;
Clear: none !important;

在线联系表格

保存设置

现在返回联系表单设置的内容选项卡，复制刚刚创建的电话字段并将其转换为邮政编码字段。

在线联系表格

更新字段设置如下：

内容选项

字段 ID：“邮编”
标题：邮政编码

在线联系表格

高级选项

在Main Element框中输入以下自定义 CSS ：

Max-width: 17%;
Margin-top: -1.5%;

在线联系表格

保存设置

到目前为止，我们已经调整了电话和邮政编码字段的宽度和对齐方式。现在我们需要对 Name 和 Email 字段执行相同的操作。

转到名称字段设置并使用主元素框中的以下自定义 CSS更新高级选项：

Max-width: 20%;
Margin-top: -1.5%;

在线联系表格

保存设置

接下来转到电子邮件字段设置并使用主元素框中的以下自定义 CSS更新高级选项：

Max-width: 20%;
Margin-top: -1.5%;

在线联系表格

保存设置

重要说明：请注意，用于每个字段的自定义 CSS 将 max-width 属性设置为特定百分比。此百分比决定了您的字段与内容区域的宽度相关的宽度。例如，Divi 的默认内容区域是 1080 像素，因此名称字段是 1080 像素的 20%。如果您想为内联表单创建更多空间，了解这一点很重要。您需要做的就是根据需要调整 max-width 属性的百分比值。

就快结束了。现在我们要做的就是清理包含表单的部分和行的间距。转到“设计”选项卡下的“部分设置” ，并更新以下内容：

自定义填充：顶部 12 像素，底部 14 像素

在线联系表格

保存设置

现在转到“设计”选项卡下的“行设置” ，并更新以下内容：

自定义填充：顶部 48 像素，右侧 0 像素，底部 0 像素，左侧 0 像素

在线联系表格

保存设置

使其具有响应性

因为这是一个水平表单，所以需要在移动设备上调整表单字段。要解决此问题，只需要一小段自定义 CSS 即可。转到“高级”选项卡下的“页面设置” ，然后在“自定义 CSS”框中执行以下操作：

@media (max-width: 767px) {

p.et_pb_contact_field {
max-width: 100% !important;
}
}

以下是表单如何响应不同的屏幕尺寸。

在线联系表格

创建三字段内联联系表

在线联系表格

现在您已经创建了一个包含四个字段的内联表单，您可以通过更新几个选项轻松地将其转换为三个表单字段。以下是步骤：

编辑您刚刚创建的内联表单或复制该表单。
删除邮政编码字段（现在您只有三个字段）
更新电话字段（或任何第三个字段）设置，在高级选项卡下，使用以下自定义 CSS
```
Main Element box:max-width: 25%;
float:left;
margin-top: -1.5%;
clear: none !important;
```
更新电子邮件字段（或任何第二个字段）设置，在高级选项卡下，在主元素框中使用以下自定义 CSS：
```
max-width: 25%;
margin-top: -1.5%;
```
更新名称字段（或任何第一个字段）设置，在高级选项卡下，在主元素框中使用以下自定义 CSS：
```
max-width: 25%;
margin-top: -1.5%;
```

注意：请注意，每个字段的 max-width 属性现在为 25%，以增加字段的宽度。

创建两字段内联联系表单

在线联系表格

您还可以通过更新一些选项将内联表单转换为两个字段的表单。以下是步骤：

编辑您刚刚创建的内联表单或复制该表单。
删除邮政编码字段和电话字段，以便您只有两个字段（姓名和电子邮件）
更新名称字段（或任何第一个字段）设置，在高级选项卡下，在主元素框中使用以下自定义 CSS：
```
max-width: 37%;
margin-top: -1.5%;
```
更新电子邮件字段（或任何第二个字段）设置，在高级选项卡下，在主元素框中使用以下自定义 CSS：
```
max-width: 37%;
margin-top: -1.5%;
clear: none !important;
```

添加其他字段类型

本教程主要针对常规输入字段类型，但您可以轻松将其更改为不同的字段类型。例如，如果您想使用选择下拉字段类型，您可以应用与其他字段相同的样式。但是，您需要为该特定字段添加背景颜色 (#006ea5)，以便您可以看到选项。

这是下拉字段的样子……

在线联系表格

最后的想法

根据我的经验，内联联系表格可以成为您业务的强大工具。有更高级的插件和更强大的选项，但如果另一个插件不是你的菜，并且更简单的解决方案有意义，请尝试一下。希望你喜欢。

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