如何在Divi中的表单字段中添加浮动标签

在 Divi 中为表单字段添加浮动标签可以以一种微妙而强大的方式提升任何 Divi 表单的设计和用户体验。 任何网站表单（不仅仅是 Divi）通常都包含某种输入字段和该输入字段的标签。 例如，表单可能有一个用于输入名称的文本输入字段，您可以在其中输入文本（或名称）和该字段输入框的标签（即“名称”）。 根据表单样式，此标签可能可见或隐藏。 除了标签之外，输入字段还可能包含占位符伪元素，作为输入字段内的一种临时标签，在用户输入输入值之前保持可见。 在 Divi 中，默认设计隐藏标签元素并仅显示占位符文本。 将浮动标签添加到 Divi 表单将允许设计人员保持“仅占位符”表单样式的流畅感觉，并在用户添加值时在字段上方显示（或浮动）标签。

在本教程中，我们将向您展示如何向 Divi 电子邮件选项表单添加浮动标签。 为此，我们将使用 Divi 构建器来设计电子邮件选项表单。 然后，我们将添加一些自定义 CSS 和 JQuery，以在用户关注该字段时将这些隐藏的标签浮动到视图中。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

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

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

https://youtu.be/j1m14XFztdc

订阅我们的 YouTube 频道

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

在 Divi 中为表单字段添加浮动标签

构建电子邮件选择表单

将一列行添加到 Divi Builder 中的默认部分。

将电子邮件选择表单添加到该列。

打开电子邮件选择设置模式。 在内容选项卡下，更新标题文本并删除正文文本。

确保链接您的电子邮件帐户服务提供商。 如果没有，电子邮件选择将不会出现在实时页面上。

接下来，将以下背景颜色添加到电子邮件选项中：

• 背景颜色：#1f4b74

在设计选项卡下，更新表单的布局：

• 布局：身体在顶部，形式在底部

然后按如下方式更新字段样式：

• 字段背景颜色：透明
• 字段文本颜色：#ffffff
• 字段边距：1.5em 顶部
• 字段填充：顶部 0.5em，底部 0.5em，左侧 1em，右侧 1em
• 字段文本大小：1.2em
• 字段线高：2em

接下来，更新字段边框样式：

• 字段圆角：0px
• 字段底部边框宽度：2px
• 字段底部边框颜色：#ffffff

让我们也更新标题字体样式：

• 标题字体粗细：粗体
• 标题字体样式：TT
• 标题文本对齐：居中

现在让我们继续设计按钮的样式。

• 为按钮使用自定义样式：是
• 按钮文字颜色：#1f4b74
• 按钮背景颜色：#ffffff
• 按钮字母间距：0.1em
• 按钮字体粗细：粗体
• 按钮字体样式：TT

对于我们最后的设计定制，让我们为表单添加一个 max-width 和 padding，如下所示：

• 最大宽度：500px
• 填充：顶部 5%，底部 5%，左 3%，右 3%

最后，我们需要向模块添加一个 CSS 类，以便我们可以在下一步中使用我们的 CSS 和 JQuery 代码来定位它。

添加自定义代码

要添加自定义 CSS 和 JQuery，请在电子邮件选择加入表单模块下添加代码模块。

CSS

在代码内容框中，粘贴以下 CSS，确保将 CSS 包裹在必要的样式标签中：

.et-float-labels p {
  position: relative !important;
}

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

JQuery

在结束样式标签下，粘贴以下 JQuery 并用必要的脚本标签包装它。

jQuery(document).ready(function ($) {
  var $floatLabelInput = $(".et-float-labels .input");
  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });
  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });
});

分解代码

关于 CSS

首先，我们定位字段并给它们一个相对位置，以便我们可以给标签元素一个在字段（或 p 元素）内的绝对位置。

.et-float-labels p {
  position: relative !important;
}

接下来，我们给表单上的标签元素和绝对位置以及放置标签文本的其他样式，使其与放置文本重叠。 display:block 覆盖了默认的 display:hidden 属性，这样标签就可以显示了。 然后我们隐藏它并隐藏可见性。

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

然后，一旦标签接收到由 JQeury 控制的“活动”类，我们就会显示、缩放和平移（移动）带有向上滑动动画的标签。

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

CSS 的其余部分是关于用过渡隐藏占位符。 有很多行可以做到这一点，因为每个浏览器都需要不同的前缀来定位占位符伪元素。 但想法很简单——将占位符的颜色更改为透明。

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

关于 JQuery

首先，我们将变量 $floatLabelInput 定义为每个表单字段上的输入元素。

  var $floatLabelInput = $(".et-float-labels .input");

然后我们使用带有函数的焦点事件处理程序，每当输入元素处于焦点时，将一个类（“活动”）添加到标签元素（输入元素的前一个兄弟元素）。 将“active”类添加到标签后，标签将显示、缩放并移动到具有相应 CSS 的输入上方的适当位置。

  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });

最后，我们将模糊事件处理程序与一个函数一起使用，该函数确定何时将“活动”类保留在标签上。 如果输入没有值，即使输入字段不在焦点上，它也会保持活动状态。 如果它没有值，则删除该类并返回该字段的默认状态。

  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });

使用“focus”和“blur”事件处理程序（而不是“click”）添加和删除类允许用户即使在仅使用键盘导航时也能看到效果（即按 Tab 键循环浏览字段）。

最后结果

这是我们在 Divi 电子邮件选项表单中的表单字段上的浮动标签的最终结果。

最后的想法

将浮动标签添加到 Divi 表单并不困难。 设计电子邮件选项表单（或任何 Divi 表单）非常简单。 但是，在添加浮动标签时，请记住自定义表单字段的大小和间距，以便为浮动标签留出适当的空间。 之后，当用户关注该字段时，我们使用自定义 CSS 来有效地隐藏或显示占位符。 由于每个浏览器都需要不同的前缀来定位占位符伪元素，因此正确使用这些前缀很重要。 我们添加的 JQuery 在标签元素上添加和删除了一个类，该类将在需要时将其浮动到视图中。 总而言之，它是一种可靠的微交互，可以增加用户体验。

也可以在其他 Divi 表单（如登录或联系表单）上随意使用相同的过程。 在添加自定义代码之前，不要忘记在表单上添加自定义类。 之后，您可能需要调整表单字段的设计设置，以确保它有足够的空间来放置这些浮动标签。

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

干杯!