Как на сайте настроить форму подписки сервиса рассылок, сделаем более валидной…

Настроим форму подписки нашего сервиса рассылки совершенно адаптивной и валидной!

Нынче, в свете событий по закрытию услуг смартреспондер(а), наблюдается великий ажиотаж и смятение в душах админов: большинство владельцев сайтов нервничают в поисках нового сервиса!

Конечно, в выборе каждый волен! и об этом сегодня говорить не станем. А вот как настроить и адаптировать, чтобы форма подписки на сайт обновления была красивой и, что важнее, валидной, – подробно разберёмся. 1- большинство форм подписки имеют невалидный код, и более того с множеством лишней атрибутики – вот весь этот код и приведём в порядок: (так возможно настроить форму любого сервиса рассылок)

 

 

…итак:

 

форма подписки на сайт

 

 

 

 

…предоставляемая сервисами, зачастую имеет очень невалидный код…

Но это совершенно не говорит о некачественных услугах…

 

Любой код предоставляется на широкую аудиторию и имеет множество вариантов настроек: кто-то регулирует стилистику этак, а кто-то эдак – под себя. Но в любом случае (скажу так) в исходном примере кода формы подписки остаются незадействованные атрибуты настроечных тегов… а значит – предоставляемый код (желательно) подстраивать. Вот и всё!

 

 

…примерно так будет выглядеть классическая форма подписки, которую предлагают сервисы:

 

 

продолжить чтение о placeholder

 

 

Как видите форма пописки не совсем симпатичная) или совсем не симпатичная – мне этот дизайн окна не нравится! и более того, во некоторых сервисах – оно не адаптивное… сами знаете что это значит в наш век-то адаптации… ))

 

 

А значит вопрос: как сделать так, чтобы

 

 

 

форма подписки на рассылку была красивой и валидной

 

 

 

остаётся весьма актуален! А раз так, давайте адаптацией и займёмся…

 

 

 

 

 

 

как настроить форму подписки – input строки html

 

 

 

 

…в этих примерах в основном и скрываются закавыки.

 

 

 

<input maxlength=”255″ name=”Contact[email]” class=”field_value form_margin” placeholder=”Ваш E-mail *” type=”text”>

 

И…

 

<input value=”1″ id=”required_fields_name” name=”required_fields[name]” type=”hidden”><input class=”field_value” maxlength=”255″ name=”Contact[name]” placeholder=”Ваше имя *” type=”text”>

 

 

 

 

 

Ноне рассмотрим пример такого сервиса как автовебофис https://autoweboffice.com/  ибо в его форме подписки присутствуют два окошка (так было некогда и в смарте): формочка ввода емейла и имени – это полезнее в плане изучения…

…и я этот сервис немного изучил, посмотрел код, и, на основе своего смартовского, причесал и автовебовский до приличного, – теперь делюсь решением.

 

 

 

 

 

 

делаем валидным html код формы подписки на рассылки

 

 

 

 

Что нам нужно выполнить… 1 – вычистить код от встроенной css стилистики (перенесём значения в основной стилевой файл темы)

…далее – поубираем лишнюю теговую атрибутику…

И как итог подстроим отображение формы подписки под себя, вследствие чего получится красивая форма подписки и удовольствие от работы..!

 

 

 

Приступим:

 

Берите код в панели управления своего сервиса рассылок и переносите, скажем, в нотепад – в нём и будем править (а в прочем, кому как удобнее).

 

 

 

Ниже показываю настроенный вариант кода формы подписки.

 

 

Посмотрите внимательно на функцию связки окон подписки нашего сайта с сервисом (функция связки в самом верху):

основные нужные нам значения выделены жирным красным (ищите примеры в своём коде) если у вас какой-то иной сервис рассылки, не пугайтесь: в принципе всё аналогично!

 

 

 

<div class="showbiz">

<script type="text/javascript" src="https://autoweboffice.ru/js/jquery.mask.js"></script>
<script type="text/javascript">
$(function() {$("body").on("submit", ".form_newsletter", function() {var message = "Укажите значения всех обязательных для заполнения полей!";
var ret = 0;if($(".name-block .field_value", this).val().length < 1){$(".name-block .field_value", this).css("border-color","red");ret = 1;}if($(".email-block .field_value", this).val().length < 1){
$(".email-block .field_value", this).css("border-color","red");ret = 1;}if(ret == 1){alert(message);return false;}});$(".phone-block input", this)
.keydown(function (e) {if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||(e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) ||
(e.keyCode >= 35 && e.keyCode <= 40)) {return;}if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {e.preventDefault();}});$('body')
.on('change', '.surname-block input, .name-block input, .patronymic-block input, .phone-block input, .email-block input' , function() {$(this).css('border-color','');});$('#Contact_date_of_birth')
.mask('00-00-0000', {placeholder: 'ДД-ММ-ГГГГ'});});</script>

<div class="show-c"><form class="form adpage_form" target="blank" action="https://адрес подписной странички...;lg=ru" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8" >

<br />

 
<!-- регулировка инпут -->
 

<input value="1" id="required_fields_name" name="required_fields[name]" type="hidden"><input class="field_value" maxlength="255" name="Contact[name]" placeholder="Ваше имя *" type="text">
<input value="1" id="required_fields_email" name="required_fields[email]" type="hidden">
<input maxlength="255" name="Contact[email]" class="field_value form_margin" placeholder="Ваш E-mail *" type="text">


<input class="send" value="ВПЕРЁД" type="submit">
<span class="contex">Почта в тайне</span>
<!-- Обязательный параметр. Не удалять и не изменять! -->
<input value="1" id="form_newsletter_id_newsletter" name="Contact[id_newsletter]" type="hidden"> <!-- API код канала рекламы --> <input value="0" id="form_newsletter_id_advertising_channel_page" name="Contact[id_advertising_channel_page]" type="hidden">
</form></div></div>

<!-- регулировка инпут -->

 

 

Нам нужно совершенно повычёркивать всякие style=”значения” в строчках инпут кода, а вместо них задать имена селекторов css:

 

 

 

 

Итак:

Основной селектор div-контейнера формы подписки:  showbiz (его закрывающий div самый последний элемент кода перед комментарием).

И, если у кого будет подложка (фон формы), например, картинка, то можно добавить в свои ccs селекторы – showbiz img.

 

 

Далее  прописываем имена селекторов css, которым зададим значения свойств в файле стилей style.css.

 

1- (в нашем случае, через пробел от form) adpage_form

 

2 – добавим селектор show-c – закрывающий тег </div> предпоследний (необходим для коррекции поля ввода емейла).

 

3 – send

 

4 – в инпуте E-mail к field_value (об этом значении расскажу ниже)  добавить (через пробел) form_margin

 

Вот так:

 

 

class="field_value form_margin" placeholder="Ваш E-mail *"

 

 

 

…и, конечно же, которые забыли при настройках в консоли сервиса подписок указать атрибут target="blank" – указываем (допишите его, если нужно) – чтобы страничка обработки подписки открывалась в новом окне. Прописывать в начальной <form class… там где ссылка перехода на страничку вашего сервиса рассылок (см. код выше).

 

 

 

Теперь обратите внимание на связывающие селекторы:
.email-block  В особенности на .field_value  – этот селектор при настройке любых форм подписки нужно использовать в своём цсс: именно такой, который указан в оригинальном коде формы – просто заместо вашего уже используемого в селекторах имени пропишите оригинальный, иначе – когда на вашем сайте пользователь введёт свои данные в форму и кликнет “подписаться” его перебросит на бестолковую страничку, где будет сообщение о том что “вы забыли ввести свои данные”.

Юзеру нужно будет снова писать… а это нехорошо с нашей стороны по отношению к гостю!

 

 

 

 

 

Ну вот вроде почти всё о теории…

 

Теперь практично прописывайте к себе, например, в сайдбар тестового сайта, отредактированный код вашего сервиса…

 

 

 

 

 

 

Как только разберётесь с html кодом, можно прописать селекторы в свой файл стилей style.css.

 

 

 

 

как настроить адаптивные стили css формы подписки на рассылку

 

 

 

 

Вот и стили:

 

Это совершенно настроенный вариант (но, как понимаете, его всё-таки придётся подстраивать на свой скус. Я его дал как пример).

Можете перенести к себе… связать с формой подписки… а уж потом заняться тонкой регулировкой под стилистику своего сайта.

 

 

 

/* CSS стили */
.showbiz{background-color:rgba(194,240,255,0.2);max-width:335px;border:2px dashed #4ee0ff;box-sizing:border-box;padding:8px;margin:auto}
.showbiz img{display:block;margin-right:auto;margin-left:auto;width:100%}
.showbiz a{font-size:10px}
.show-c{text-align:center}
.adpage_form{width:100%}
.form__field{margin-top:7px;border:2px solid #c1c1c1;border-radius:6px;background:#fff;padding:2px;width:94%;font-family:'Open Sans',Arial,sans-serif;font-size:12px;max-width:307px}
.form_margin{margin-bottom:10px}
.send{font-weight:700;color:#002AFF;width:97%;height:20pt;font-size:16px;font-style:italic;font-family:intro;text-decoration:none;border:none;outline:none;border:1px solid #A7A7A7;margin:auto;background:linear-gradient(#FFF,#C2D0DA);display:block;line-height:1.2;border-radius:8px;border-bottom:3px solid #80B3FF;text-shadow:0 1px #FFF;cursor:pointer}
.send:active{border:none}
.send:hover{border:2px solid #C1C1C1;border-bottom:2px solid #80B3FF;font-size:15px;background:linear-gradient(#DBDBDB,#FFF)}
.contex{color:#7D7D7D;font-size:11px;line-height:1;margin-top:7px;text-align:center}
/* CSS стили */

 

 

 

И как только html будет вычищен, а в файл стилей помещены нужные селекторы – проверяйте отработку кода на сайте!

 

…Смотрите подсказки валидатора об ошибках (например, этого http://validator.w3.org/) – подстраивайте не спеша, чтобы ошибок не было.

 

Обращайте внимание на пустые атрибуты в инпут – input – цикле placeholder="" и т.д. смело удаляйте их ! ИБО я  уже прописал в инпут строках показанного кода – placeholder=”Ваше имя *”, а значит должно быть и у вас.

 

 

 

 

 

Может быть, кто-то решит подключить медийную обработку для мобильников…

 

@media only screen and (max-width:375px) {
.form__field{width:auto}
}

 

…и т.д. и т. п.

 

 

 

Финальное:

 

что-то типа этого должно получиться: вам останется подстроить…

 

 

…тем, кто заметит шутку в форме подписки – приз!!

 

 

Под занавес:

 

…что вам нужно было сделать…

 

1 – прописать имена селекторов в html коде, и как следствие удалить ненужные строчные стили цсс (к этому же, почистить код от излишней инпут атрибутики).

 

2 – прописать в своих css стилях шаблона предложенный мною код.

 

3 – тестировать, подстраивая…

 

 

 

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

 

 

 

 

 

На этом моя повесть нынче решительно окончена...!