Как удалить поля имени модуля Divi Email Optin

В сегодняшнем руководстве мы покажем вам, как удалить поля имени модуля Divi Email Optin. Удаление полей имени - это не только проверка того, что поле имени и фамилии, которые являются стандартными в модуле подписки по электронной почте, не отображаются визуально. Еще дело в функциональности. По умолчанию для подписки требуются имя и адрес электронной почты. Вот почему просто создание невидимых полей имени не поможет процессу.

Однако, чтобы помочь вам сделать это, мы покажем вам, как визуально избавиться от полей имени и заставить его работать функционально.

Результат

Если вы будете следовать этому посту шаг за шагом, вы получите следующий результат:

Почему вы хотите удалить поля имени модуля электронной почты

Вероятно, есть несколько причин, по которым вы захотите удалить поля имени. Если вы не знаете, почему; Обратите внимание на две причины, перечисленные ниже.

Чтобы сэкономить время вашего посетителя

Первая причина имеет в виду пользовательский опыт. Запрашивая только поле электронной почты, ваши посетители смогут быстро с вами взаимодействовать. Единственное, что им нужно будет сделать, это ввести свой адрес электронной почты, и вы предоставите им интересующий их контент.

Сделать барьер меньше / полагаться на быстрое поведение

Если бы люди заполняли все модули подписки, с которыми они сталкиваются в сети, у них, вероятно, не хватило бы времени. В настоящее время формы Optin являются частью всех типов веб-сайтов. Прошли те времена, когда люди увлекались ими. Если они увидят, что им нужно приложить слишком много усилий (читай: им нужно заполнить слишком много обязательных полей), чтобы подписаться, они, вероятно, просто проигнорируют это. Однако, если вы попросите только адрес электронной почты, они, скорее всего, не согласятся с этим. Чтобы просто набрать адрес электронной почты, требуется не более 5 секунд (что меньше, чем средняя продолжительность концентрации внимания человека составляет 7 секунд).

Как удалить поля имени модуля Divi Email Optin

Подпишитесь на наш канал Youtube

Без промедления давайте сделаем это.

Добавить новую страницу

Первое, что вам нужно сделать, это добавить новую страницу или открыть страницу, на которой вы хотите разместить модуль Email Optin только с полем электронной почты.

Добавить модуль подписки на электронную почту

Как только вы окажетесь на этой странице, добавьте модуль электронной почты, где хотите, чтобы он поместился. После предварительного просмотра страницы с помощью модуля Email Optin вы увидите, что она будет выглядеть так:

Если вы продолжите и нажмете кнопку подписки, не заполняя поля, вы увидите, что это не сработает. По умолчанию для работы модуля Email Optin требуется имя и адрес электронной почты. Вот почему просто заставить поля исчезнуть (но по-прежнему существовать) не сработает. Удалить их тоже не получится.

Однако вы можете добавить значение по умолчанию в поле имени. Вы можете использовать что-то вроде '*', чтобы просто убедиться, что в поле есть значение. Еще нам нужно удалить метки, связанные с полями ввода. Чтобы достичь всего этого, мы будем использовать код jQuery и код CSS.

Добавить код CSS

Начнем с добавления кода CSS. Код CSS гарантирует, что эти два поля не будут отображаться на странице. Для функциональной части нам придется использовать несколько строк кода jQuery.

Вы можете применить код CSS к одной странице в частности или ко всему веб-сайту. Метод, который вы будете использовать, скорее всего, будет зависеть от того, как часто вы хотите использовать модуль кода только с полем электронной почты. Если вы хотите использовать модуль Email Optin несколько раз и на разных страницах, воспользуйтесь вторым методом. Если вы хотите, чтобы он учитывался только на одной странице, используйте первый метод.

В частности, добавьте 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, в частности, на одну страницу, добавьте модуль кода прямо под модулем электронной почты. Откройте модуль кода и поместите в него следующие строки кода 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