Как сделать форму вашей рассылки функциональной и визуально привлекательной?

Некоторые темы для публикаций, такие как QF Fashion и Technews, включают в свой дизайн форму для рассылки. В этой статье мы расскажем, как вы можете добавить форму Mailchimp или свою собственную из стороннего сервиса в тему и как вы можете изменить ее стиль, чтобы она хорошо смотрелась визуально.

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

Как нам добавить форму рассылки в тему Publii?

Добавить форму рассылки в наши темы максимально просто; вы можете просто скопировать код формы и вставить его в код темы через раздел Настроек темы в Publii.

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

В этом примере мы покажем вам, как это сделать с помощью Mailchimp (один из самых популярных доступных сервисов рассылки новостей).

В интерфейсе Mailchimp перейдите на страницу Списков, щелкнув опцию в главном меню, затем выберите Формы регистрации в раскрывающемся меню рядом со списком, с которым вы хотите работать.
Теперь выберите Встроенные формы, а затем перейдите на вкладку Naked, которая предоставит нам базовую форму. Поскольку форма простая, у нее будет довольно чистый код, но мы можем отформатировать ее еще больше, чтобы сделать действительно чистый код.
Мы можем удалить заголовок формы и / или индикаторы обязательных полей, сняв следующие флажки:
Это даст нам некоторый код, который будет выглядеть примерно так:
Как вы можете видеть, приведенный выше код по-прежнему выглядит неаккуратно, поэтому давайте немного поработаем с ним. Удалите все ненужные HTML-элементы, такие как DIV-контейнеры.
Если вы хотите сделать какие-либо элементы обязательными (то есть пользователь должен заполнить их для отправки формы), вам следует добавить обязательный атрибут HTML к вашим входным данным. Поскольку она предназначена для рассылки новостей, флажки "Адрес электронной почты" и "Согласие" должны быть обязательными, например:
```
<input name="EMAIL" class="email" placeholder="Email Address" id="mce-EMAIL" type="email" required>
```
или
```
<input value="1" name="group[3633][1]" id="mce-group[3633]-3633-0" type="checkbox" required
```
Возможно, вы захотите заменить метки полей на заполнители; именно так мы разработали форму рассылки в теме QF. Как правило, использование текста-заполнителя вместо метки не рекомендуется, поскольку это влияет на доступность - программы чтения с экрана могут читать метки, но не могут читать текст-заполнитель. Тем не менее, QF поддерживает заполнители со скрытыми метками, чтобы они были видны программам чтения с экрана
Используйте текст-заполнитель, но сохраняйте надписи, например:
```
<label for="mce-EMAIL">Email Address </label>
<input name="EMAIL" class="required email" placeholder="Email Address"id="mce-EMAIL" type="email" required>
```

Некоторые темы Publii, особенно Премиум-класса, такие как Mellisa или Cortado, включают форму рассылки во всплывающем окне. Чтобы кнопки [Закрыть] и [Отправить] работали должным образом, просто добавьте ко второй класс "newsletter-popup__submit".

<input class="newsletter-popup__submit" type="submit" name="subscribe" id="mc-embedded-subscribe" value="Subscribe">