студия занимательная МИХАЛИКА
! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !

издатель:   в теме: Техническое SEO
студия занимательная МИХАЛИКА

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

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

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

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


…итак:

 

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

 

 

 

 

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

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

 

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

 

 

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

 

 

как поправить input строки

продолжить чтение о 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»>

 

 

 

к слову:

Совершенно просто можно настроить код сервиса FeedBurner, но — он достаточно простой и вы с ним сами разберётесь, если изучите эту статью. Посмотреть пример можно здесь таким образом и под вашу стилистику всё замечательным образом настроится.

 

 

Ноне рассмотрим пример такого сервиса как автовебофис 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:

 

 

Напоминаю, — использовать css в html коде  не желательно ввиду всевозможных правильных настроек сайта, а желательно же их перенести в основной файл стилей. Чем и займёмся… (сравнивайте со своим полученным кодом-подписки, который, к слову сказать, будет много больше показанного выше)

 

 

Итак:

Основной селектор 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  — этот селектор при настройке любых форм подписки нужно использовать в своём цсс: именно такой, который указан в оригинальном коде формы — просто заместо вашего уже используемого в селекторах имени пропишите оригинальный, иначе — когда на вашем сайте пользователь введёт свои данные в форму и кликнет «подписаться» его перебросит на бестолковую страничку, где будет сообщение о том что «вы забыли ввести свои данные».

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

 

 

Понимаете!? если вы выберете какой-то иной сервис, вам всего-то нужно будет в вашем файле стилей заменить имя селектора на тот что в коде (искать в цикле функций): как видите в нашем случае это field_value. И коли вы сейчас подстраиваете код иного сервиса…

 

не забывайте: в коде имя будет иное. Нужно заменить имя в показанном ниже селекторе css.

 

 

 

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

 

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

 

 

 

Напоминаю: пугаться этой работы не стоит, правда — всё достаточно просто — это вы поймёте… когда разберётесь в описанном способе нынешней статьи.

 

 

 

Как только разберётесь с 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=»Ваше имя *», а значит должно быть и у вас.

 

 

Если вернётесь к фотке формы подписки, то увидите «имя» и «е-маил» выведены за окошки ввода личных данных подписчика, а это значит что в аригинальном КОДЕ placeholder="" пустой!!

Я же подсказки «Введите имя» и «e-mail» поместил внутрь окошек: они пропадут как только подписчик введёт первую букву своего имени или эл/п… это делается placeholder="Ваше имя" соответственно. А вот пустые плейсхолдер нужно удалить.

И так далее…

 

 

 

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

 

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

 

…и т.д. и т. п.

 

 

 

Финальное:

 

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

 

 

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

 

Под занавес:

 

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

 

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

 

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

 

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

 

 

 

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

 

 

Но !! если вдруг организовались трудности, обращайтесь…

 

…или пишите в комментариях.

 

 

 


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


 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!


!..подписываясь на обновления mihalica.ru
...расстаёмся с невежеством..!


 

 

Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!


меточная навигация:


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

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Ваш e-mail не будет опубликован. Обязательные поля помечены *