如何刪除 Divi Email Optin 模塊的名稱字段

在今天的教程中，我們將向您展示如何刪除 Divi Email Optin 模塊的名稱字段。 刪除姓名字段不僅僅是為了確保電子郵件選擇模塊中的標準名稱和姓氏字段不會出現在視覺上。 這也與功能有關。 默認情況下，訂閱需要名字和電子郵件地址。 這就是為什麼僅僅使名稱字段不可見將無助於該過程的原因。

然而，為了幫助您完成它，我們將向您展示如何在視覺上擺脫名稱字段並使其在功能上也能正常工作

結果

如果你一步一步地關注這個帖子，你會得到以下結果：

為什麼要刪除電子郵件 Optin 模塊的名稱字段

您想要刪除名稱字段可能有幾個原因。 如果你不知道為什麼； 看看下面列出的兩個原因。

節省訪客的時間

第一個原因牢記用戶體驗。 通過只要求一個電子郵件字段，您的訪問者將有可能快速與您互動。 他們唯一需要做的就是輸入他們的電子郵件地址，您就會向他們提供他們感興趣的內容。

使障礙更小/依靠快速行為

如果人們要填寫他們在網絡上遇到的所有 optin 模塊，他們可能沒時間了。 如今，Optin 表單是各種網站的一部分。 人們對它們著迷的日子已經一去不復返了。 如果他們看到他們必須付出太多努力（閱讀：他們必須完成太多必填字段）才能訂閱，他們可能會忽略它。 但是，如果您只要求提供電子郵件地址，他們更有可能接受。 輸入一個電子郵件地址最多需要 5 秒（這比人類平均 7 秒的注意力持續時間要短）。

如何刪除 Divi Email Optin 模塊的名稱字段

訂閱我們的 YouTube 頻道

不要再拖延了，讓我們完成這項工作。

添加新頁面

您需要做的第一件事是添加一個新頁面或打開您想要放置僅包含電子郵件字段的電子郵件選項模塊的頁面。

添加電子郵件選擇模塊

進入該頁面後，在您希望它適合的任何位置添加電子郵件選項模塊。 使用 Email Optin Module 預覽頁面後，您會看到它如下所示：

如果您繼續單擊訂閱按鈕，而不填寫任何字段，您將看到它不起作用。 默認情況下，電子郵件選項模塊需要名字和電子郵件值才能工作。 這就是為什麼僅僅讓字段消失（但仍然存在）是行不通的。 刪除它們也不起作用。

但是，您可以做的是向名字字段添加默認值。 您可以使用諸如“*”之類的東西，這將確保該字段具有值。 我們需要做的另一件事是刪除鏈接到輸入字段的標籤。 為了實現所有這些，我們將使用一些 jQuery 代碼和 CSS 代碼。

添加 CSS 代碼

我們將從添加 CSS 代碼開始。 CSS 代碼將單獨確保這兩個字段不會顯示在頁面上。 對於功能部分，我們將不得不使用一些 jQuery 代碼行。

您可以將 CSS 代碼應用於特定頁面或整個網站。 您將使用的方法很可能取決於您希望僅將代碼模塊與電子郵件字段一起使用的頻率。 如果您想在不同的頁面中多次使用電子郵件選擇模塊，請使用第二種方法。 如果您只想讓它計入一頁，請使用第一種方法。

特別是在一頁中添加 CSS 代碼

要將 CSS 代碼特別添加到一個頁面，請單擊您正在處理的頁面中的以下圖標：

在出現的屏幕中，複製並粘貼以下 CSS 代碼行：

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

將 CSS 代碼添加到主題選項

要將 CSS 代碼添加到整個網站，請轉到您的WordPress 儀表板 > Divi > 主題選項 > 向下滾動常規選項卡，並將以下 CSS 代碼行添加到自定義 CSS 字段：

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

添加jQuery代碼

繼續，我們將添加所需的 jQuery 代碼。 要添加 jQuery 代碼，您還有兩種可能性：添加代碼以使其特別適用於一個頁面或將代碼添加到整個網站。

特別將 jQuery 代碼添加到一頁（代碼模塊）

要將 jQuery 代碼特別添加到一個頁面，請在 Email Optin 模塊正下方添加一個代碼模塊。 打開代碼模塊並將以下幾行 jQuery 代碼放入其中：

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

由於我們刪除了標籤，因此我們要確保電子郵件地址字段的值中沒有任何內容。 為了補償標籤，並確保人們知道要輸入的內容，我們使用佔位符代替。 在這種情況下，佔位符是“電子郵件地址”，但您可以隨意將其轉換為其他任何內容。

將 jQuery 代碼添加到主題選項

要使 jQuery 代碼適用於整個網站，您可以將其放置在主題選項中。 為此，請轉到您的WordPress 儀表板 > Divi > 主題選項 > 集成並將以下 jQuery 代碼行放在您網站的頭部：

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

結果

如果您按照本文中的每一步操作並將 CSS 和 jQuery 代碼應用於特定頁面或您網站的所有頁面，您應該獲得以下結果：

最後的想法

在這篇文章中，我們向您展示瞭如何實現只有一個電子郵件地址字段的電子郵件選項模塊。 你可能想要達到這樣的結果的原因是有效性。 通過僅詢問電子郵件地址，您的受眾將不必付出更少的努力來獲得訂閱，並且您將能夠更快地建立您的電子郵件列表。 如果您有任何問題或建議，請務必在下方評論區留言！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

特色圖片來自 adichrisworo/shutterstock.com