Украшаем форму подписки на обновление
Приветствую! В данной статье будет рассказано, как можно украсить форму подписки на обновление сайта по E-mail при помощи языка стилей CSS. Суть данной манипуляции - сделать Ваш сайт более индивидуальным в плане дизайна и привлечь внимание потенциальных подписчиков. Если Вы еще не используете данную форму, то настало самое время, т.к. это даст дополнительных посетителей для сайта.
В интернете Вы найдете множество подробнейших инструкций, как организовать подписку через сервис feedburner.google.com, поэтому данный процесс я не буду описывать, чтобы не делать полный плагиат. Будем считать, что Вы уже это сделали и теперь останется только украсить данную форму.
По умолчанию нам предлагаю код, который выводит нечто подобное на сайте (цвет заднего фона зависит от Вашего шаблона сайта):
А вот и код, который сделал подобную форму на моем сайте:
Вот его мы и будем слегка модифицировать, чтобы в итоге получилось нечто подобное (или на что у Вас хватит фантазии):
Код данной формы будет следующим:
Это код для моего сайта. Далее я расскажу, что можно менять и как, чтобы Вы могли настроить под дизайн своего сайта.
Модифицируем форму подписки по E-mail
Хоть далее я буду все рассказывать как можно понятнее, но это не служит оправданием незнания Вами азов HTML и CSS. Поэтому почитайте соответствующую литературу. Справочник Вам в помощь http://htmlbook.ru/.
Поехали дальше.
Сразу же избавляемся от лишней ссылки, которая будет вести на сайт feedburner. Для этого удаляем в первоначальном коде следующие символы (полностью):
Delivered by FeedBurner
Как видим по первой картинке, форма ввода адреса E-mail стоит над кнопкой Подписаться. На каком-то сайте это может и красиво, но мне лучше, чтобы все было в одну строку, как на втором скриншоте. Чтобы сделать подобное, нужно убрать </p> из следующей связки (только этот набор символов </p>):
name="email"/>Следующая строка отвечает за текст, который будет выводиться перед формой ввода почты. Вы ее можете перевести (Введите свой адрес электронной почты), либо удалить.
Enter your email address:
Далее настраиваем дизайн поля ввода почты. Выдержка из моего кода с пояснением:
Здесь, в элементе style, как раз и настраиваем внешний вид поля. Фактически - это те параметры, которые Вы вправе менять, чтобы форма продолжала работать без сбоев:
border:1px solid #cccccc;- это рамка вокруг белого поля ввода: толщина рамки 1px; solid - значит непрерывная; #cccccc - это цвет рамки.color: #808080;- здесь мы задаем цвет шрифта (на картинке "E-mail адрес").width: 146px;- ширина поля ввода адрес в пикселях. Подбирайте индивидуально.-webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;- эта конструкция отвечает за скругление углов поля ввода. Работает на всех современных браузерах, за исключением старых версий Internet Explorer. Если Вам не нужно скругление углов, то просто удаляем данную конструкцию. Если же надумали установить, то вместо 2px поставьте свое целочисленное значение.value="E-mail адрес"- здесь Вы вводите произвольный текст, который будет отображаться в форме ввода. Можете оставить пустым, тогда ничего не будет показано.this.value == 'E-mail адрес'- аналогичный текст с предыдущим пунктом.height:70px;- данного пункта нет в моем коде, но Вы можете его добавить. Назначение простое - задать точную высоту поля ввода. Т.е. мы можем задать ширину (width) и высоту (height).
Настройка кнопки "Подписаться"
По умолчанию данная кнопка у нас на английском языке (Subscribe). Напишем необходимый нам текст на русском языке. Для этого заменяем слово Subscribe
на любое русское
После этого переходим к настройке ее внешнего вида. Отвечает за это следующий код:
Далее настройки данной кнопки будут фактически идентичны с настройкой поля ввода электронной почты, за исключением некоторых добавочных пунктов, которые Вы так же можете применить на своем сайте:
margin: 0 0 0 2px;- внешний отступ (читайте справочник CSS). С помощью данной команды я сделал промежуток между кнопкой и формой ввода почты.text-transform: lowercase;- переводим буквы в прописные (ставим по желанию).background: #DD4B39 url('https://mojwp.ru/wp-content/uploads/social/gmail.png')- здесь мы задаем картинку, которая будет отображаться в кнопке. Предварительно закачиваем картинку нужного Вам размера на сайт и прописываем путь до нее.
no-repeat 1px 1px;#DD4B39обозначает цвет заднего фона. При желании, Вы можете обойтись без картинки, а ограничиться просто сменой цвета кнопки и обратое, т.е. обойтись только картинкой на весь размер кнопки без заливки цветом фона.no-repeatделает так, чтобы картинка не размножалась на всю ширину и высоту кнопки. В конце по 1px отступы сверху и снизу.padding: 0 0 0 20px;- внутренний отступ (не путать с margin). Цифра 20px отодвинула надпись "подписаться" от левого края и поставила за картинкой письма.
Все остальное аналогично с настройкой поля ввода адреса почты, поэтому не дублирую.
Вот и закончили с настройками. Осталось сохранить и любоваться на результат.
Будут вопросы - пишите в комментариях. Помогу чем смогу.
