如何使用 Divi 在 Click 上创建联系表

在本 Divi 教程中，我们将向您展示如何创建一个在单击按钮后出现的联系表单（作为叠加层），只使用 Divi、一些 jQuery 代码和 CSS 代码。

这是让您的网站访问者通过单击按钮专注于他们所承诺的操作的好方法。 它不会将他们带到不同的页面，而是将他们锁定在该操作中，直到完成为止。

您可以在下面快速了解我们将要创建的内容，然后进入教程！

桌面上的结果

手机和平板电脑上的结果

灵感

这篇文章的灵感来自一个评论请求，可以在 B3multimedia 上找到。 尽管他们使用另一种方法来完成这项工作，但他们也有一种令人惊叹的方式来创建单击时的联系表单。 看看结果：

使用按钮模块创建部分

通常我们会展示如何在 Divi 的前端视觉构建器中完成几乎所有的事情。 然而，在今天的帖子中，我将使用后端构建器。 由于我们使用的代码，它更容易一些。 也就是说，如果您和我们一样喜欢前端编辑器，那么您可以使用前端“骨架”视图轻松完成本教程。

好的，让我们进入本教程！

订阅我们的 YouTube 频道

我们需要做的第一件事是添加一个新部分，在其中放置允许弹出联系表单的按钮。 只需添加一个标准部分并选择一列行。 完成后，向其中添加一个按钮模块。

您可以随意设置按钮样式，但必须确保按钮 URL 以“#”开头，后跟其他内容。 您不能将其留空或仅使用“#”字符。 通过添加“#”和一些文本，单击按钮后页面将不会移动。 如果将其留空，则页面将在单击时刷新。 如果您只使用“#”，您将被发送到页面顶部。

我们需要做的下一件重要事情是为按钮分配一个 CSS 类。 我们稍后将在这篇文章的 jQuery 代码中使用这个 CSS 类，以确保在单击后弹出联系表单。 我们需要分配给按钮的类只是“按钮”。

单击创建桌面联系表

我们需要做的下一件事是创建桌面联系表单，一旦有人单击我们在本文的前一部分中创建的按钮，就会显示该表单。 在这篇文章的后面，我们还将向您展示如何创建移动版本。

如果您使用此方法，您基本上可以在一行中创建您想要的任何设计，并使其显示为弹出窗口。 我们只会通过向您展示如何创建以下示例来让您体验一下您可以实现的目标：

添加新标准截面

首先向您正在处理的页面添加一个新的标准部分。 转到您刚刚添加的部分的“高级”选项卡，并将“弹出”添加到“CSS 类”字段。 向下滚动同一个选项卡，并将以下 CSS 代码行放入自定义 CSS 子类别的 Before 字段中：

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

通过添加这一点，我们确保该部分占据整个选项卡。 您可以在 CSS 代码中调整背景颜色以创建您想要的背景叠加。 在这种情况下，我们使用具有一定透明度的黑色。 在同一个选项卡中，还将以下 CSS 代码行添加到 Main Element：

display: none;

我们需要在高级选项卡中做的最后一件事是禁用可见性子类别中的手机和平板电脑部分。

添加两列行

继续添加一个两列的行并转到“设计”选项卡。 首先修改 Sizing 子类别中的行宽。 在此示例中，我们使用了 1291 像素的自定义宽度。

向下滚动“设计”选项卡，并在“间距”子类别中对两列的顶部、左侧和右侧填充使用“30px”。

转到高级选项卡完成。 在 Main Element 中，添加以下 CSS 代码行：

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

添加第一个文本模块

对部分和行进行所有更改后，就可以添加要显示的不同模块了。 我们要添加的第一件事是显示的标题。 首先向行的第一列添加一个新的文本模块，在“内容”选项卡中写入文本，然后转到“设计”选项卡。 在“设计”选项卡中，我们对“文本”子类别使用了以下设置：

• 文字方向：居中
• 文字字体：龙虾
• 字体样式：粗体
• 文字字体大小：37
• 文字颜色：#002282
• 文本行高：1.7em

添加第二个文本模块

继续添加一个新的文本模块，然后键入要在“内容”选项卡中显示的文本。 转到“设计”选项卡，并将以下设置应用于“文本子类别”：

• 文字方向：居中
• 文字字体：Arial
• 文字字体大小：13
• 文字颜色：#002282
• 文本行高：1.7em

添加社交媒体关注模块

继续，我们还将把社交媒体关注模块添加到第一列。 在本例中，我们选择了三个社交图标； 脸书、推特和 Instagram。 在“内容”选项卡中添加这些社交图标后，将“图标”子类别中的“链接形状”更改为“圆形”。

我们需要做的最后一件事是在“高级”选项卡中向该模块添加左填充。 将以下 CSS 代码行添加到主元素：

padding-left: 40%;

添加联系表单模块

然后，我们可以转到该行的第二列。 在该列中，我们要放置的第一件事是联系表单模块。 在这个例子中，我们只选择了两个字段； 姓名和电子邮件。 添加联系表单模块后，转到联系表单模块的设计选项卡并对表单字段文本子类别进行以下更改：

• 表单域字体大小：15
• 表单字段文本颜色：#002282
• 表格场线高度：1.7em

在同一个选项卡中，对 Button 子类别进行以下更改：

• 为按钮使用自定义样式：是
• 按钮文字大小：20
• 按钮文字颜色：#FFFFFF
• 按钮背景颜色：#0086c4
• 按钮边框宽度：2
• 按钮半径：3

转到高级选项卡并添加 5% 的顶部填充。

添加模糊模块

我们需要添加到第二列的另一件事是 Blurb 模块。 我们唯一需要这个模块的是弹出窗口右上角的退出图标。 在图标列表中选择以下图标并将所有其他内容留空。

继续，转到“高级”选项卡并键入“关闭”作为 CSS 类。 在同一个选项卡中，将以下代码行添加到自定义 CSS 子类别的主要元素：

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

将渐变背景应用于行

最后但并非最不重要的一点是，我们将为该行添加一些漂亮的渐变背景。 打开设置并对渐变背景选项进行以下更改：

• 第一渐变色：#FFFFFF
• 第二个渐变颜色：#0c71c3
• 渐变类型：线性
• 梯度方向：124度
• 起始位置：50%
• 结束位置：50%

单击创建平板电脑和手机联系表

现在我们已经创建了桌面版本，平板电脑和手机版本会快很多。 我们用于桌面版本的大多数模块与移动版本相同。 移动端的最终结果如下所示：

添加新标准截面

首先添加另一个标准部分。 此部分需要与我们之前创建的部分具有相同的设置。 将 'popup' 添加到 CSS 类，并将以下 CSS 代码行添加到 Before 字段：

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

还将以下 CSS 代码行添加到 Main Element 中：

display: none;

我们将在桌面版本的可见性子类别中禁用它，而不是在手机和平​​板电脑上禁用它：

添加一列行

对于手机和平板电脑弹出窗口，我们只需要一列。 对于这一行，我们不会使用自定义宽度。 但是，我们将像在桌面版本中一样应用自定义填充； 30px 用于列的顶部、左侧和右侧填充。

我们还需要确保将以下 CSS 代码行添加到自定义 CSS 子类别的主元素中：

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

克隆文本、社交媒体关注和联系表单模块

我们需要做的下一件事是克隆我们用于桌面版本的第一个文本模块以及社交媒体关注和联系表单模块。 克隆它们后，将它们放置在您刚刚创建的新部分的一列行中。

在高级选项卡中克隆 Blurb 模块和更改 CSS 代码

您还可以克隆用于桌面版本的 Blurb 模块，但需要对 CSS 代码进行一些小的更改。 不要使用桌面代码，而是使用以下代码：

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

确保'close' CSS 类也用于 Blurb 模块。

将渐变背景应用于行

对于移动版本，我们对行的渐变背景使用不同的设置：

• 第一渐变色：#FFFFFF
• 第二个渐变颜色：#0c71c3
• 渐变类型：线性
• 梯度方向：180度
• 起始位置：40%
• 结束位置：40%

将 jQuery 代码添加到主题选项

对于本教程，我们需要做的最后一件事是添加 jQuery 代码。 您可以通过主题选项或通过放置在您正在处理的页面中的代码模块添加代码。 对于这个例子，我们只是将它放在主题选项中。

为此，请转到您的WordPress 仪表板 > Divi > 主题选项 > 集成 > 并将以下 jQuery 代码行粘贴到您网站的头部：

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

结果

如果你按照帖子一步一步来，你应该能够在桌面上获得以下结果：

平板电脑和手机上的结果如下：

最后的想法

在这篇文章中，我们向您展示了如何通过点击创建联系表单。 使用这种方法与访问者取得联系是微妙而有效的。 如果您有任何问题或建议； 确保您在下面的评论部分发表评论。

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

La1n/shutterstock.com 的特色图片