如何在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 表單（如登錄或聯繫表單）上隨意使用相同的過程。 在添加自定義代碼之前，不要忘記在表單上添加自定義類。 之後，您可能需要調整表單字段的設計設置，以確保它有足夠的空間來放置這些浮動標籤。

我期待在評論中收到您的來信。

乾杯!