如何删除 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