mojwp.ru
Назад

Украшаем форму подписки на обновление

Опубликовано: 28.02.2012
22
382
Украшаем форму подписки на обновление
Оцени статью

Приветствую! В данной статье будет рассказано, как можно украсить форму подписки на обновление сайта по E-mail при помощи языка стилей CSS. Суть данной манипуляции — сделать Ваш сайт более индивидуальным в плане дизайна и привлечь внимание потенциальных подписчиков. Если Вы еще не используете данную форму, то настало самое время, т.к. это даст дополнительных посетителей для сайта.


В интернете Вы найдете множество подробнейших инструкций, как организовать подписку через сервис feedburner.google.com, поэтому данный процесс я не буду описывать, чтобы не делать полный плагиат. Будем считать, что Вы уже это сделали и теперь останется только украсить данную форму.

По умолчанию нам предлагаю код, который выводит нечто подобное на сайте (цвет заднего фона зависит от Вашего шаблона сайта):

А вот и код, который сделал подобную форму на моем сайте:

Вот его мы и будем слегка модифицировать, чтобы в итоге получилось нечто подобное (или на что у Вас хватит фантазии):

Код данной формы будет следующим:

Это код для моего сайта. Далее я расскажу, что можно менять и как, чтобы Вы могли настроить под дизайн своего сайта.

Модифицируем форму подписки по E-mail

Хоть далее я буду все рассказывать как можно понятнее, но это не служит оправданием незнания Вами азов HTML и CSS. Поэтому почитайте соответствующую литературу. Справочник Вам в помощь http://htmlbook.ru/.

Поехали дальше.

Сразу же избавляемся от лишней ссылки, которая будет вести на сайт feedburner. Для этого удаляем в первоначальном коде следующие символы (полностью):

Как видим по первой картинке, форма ввода адреса E-mail стоит над кнопкой Подписаться. На каком-то сайте это может и красиво, но мне лучше, чтобы все было в одну строку, как на втором скриншоте. Чтобы сделать подобное, нужно убрать </p> из следующей связки (только этот набор символов </p>):

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

Далее настраиваем дизайн поля ввода почты. Выдержка из моего кода с пояснением:

Здесь, в элементе 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 отодвинула надпись «подписаться» от левого края и поставила за картинкой письма.

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

Вот и закончили с настройками. Осталось сохранить и любоваться на результат.

Будут вопросы — пишите в комментариях. Помогу чем смогу.

Украшаем форму подписки на обновление
Оцени статью

Автор:
Поделиться
Комментарии:
  • Лисёнок Рэнди
    Опубликовано: 28.02.2012 Ответить на сообщение

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

    Извини за глупый вопрос, а как такие же окошечки делать в статьях? Те в которых код у тебя вставлен на показ.

    • mojWP
      Опубликовано: 28.02.2012 Ответить на сообщение

      плагин WP-Syntax выводит и подсвечивает код
      http://mojwp.ru/wp-syntax.html

  • Александр
    Опубликовано: 28.02.2012 Ответить на сообщение

    вау, круто у тебя в последнее время сайт преобразился 🙂 офигенный дизайн

    • mojWP
      Опубликовано: 28.02.2012 Ответить на сообщение

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

  • Александр
    Опубликовано: 29.02.2012 Ответить на сообщение

    ага, я тоже пока упор делаю на статьи, чтобы хоть какая-то база была и пользователь проводил на сайте больше времени 🙂 кстати, вы не могли бы рассказать о том, как сделать подгрузку постов с помощью jquery? )

  • Sueno
    Опубликовано: 04.03.2012 Ответить на сообщение

    Очень полезная статья 🙂 а главное во время. Спасибо тебе огромное! Буду эксперементировать. Кстати не нашла как закруглить кнопку, я не внимательно читала?

  • Sueno
    Опубликовано: 04.03.2012 Ответить на сообщение

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

  • alimugik
    Опубликовано: 30.03.2012 Ответить на сообщение

    Офигенный пост, как раз то что искал, все просто и понятно… )))

  • seogrot
    Опубликовано: 01.06.2012 Ответить на сообщение

    Симпатичненько, нужно и себе что-то подобное замутить. Вообще уже месяц собираюсь добавить форму подписки на блог, никак руки не дойдут. Хотя по сути делов на пол часа.

  • Женя
    Опубликовано: 14.06.2012 Ответить на сообщение

    Давным-давно я нашел эту статью в Интернете и по примеру сделал себе форму подписки на сайт. Доволен остался, ведь все доходчиво написано и главное РАБОТАЕТ!

  • seogrot
    Опубликовано: 16.06.2012 Ответить на сообщение

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

  • Илья
    Опубликовано: 15.07.2012 Ответить на сообщение

    Отличная статья. Все понятно описано, Виталий, спасибо. У меня возникла маленькая проблема — закрывающий тег удалил, но кнопка подписки, по прежнему внизу. Подскажите пожалуйста, в чем может быть проблема. Может в CSS (таблице стилей)темы? Вот код, который у меня получился, немного правда доработал кнопку —

    • Виталий
      Опубликовано: 15.07.2012 Ответить на сообщение

      код не пройдет через комментарии.
      кидайте файлом на почту

      • Илья
        Опубликовано: 15.07.2012 Ответить на сообщение

        Ок =) На почту для обратной связи отослал.

  • Надежда
    Опубликовано: 15.07.2012 Ответить на сообщение

    Очень понравилась кнопка. У меня как раз отсутствует такая подписка, только на RSS есть. Надо сделать и такую. Спасибо.

  • Татьяна
    Опубликовано: 13.12.2012 Ответить на сообщение

    Виталий! ДОбрый день! Скажите, а можно ли уже готовый (отрисованный в ФШ или скачанный) рисунок подписки (поле для e-mail и кнопка) вписать в код feedburner? Может, вы писали об этом уже? Ткните носом пожалуйста. Спасибо

    • Виталий
      Опубликовано: 13.12.2012 Ответить на сообщение

      без проблем. Это «верстка» называется

  • Андрей
    Опубликовано: 18.12.2012 Ответить на сообщение

    Доброе время суток Виталий!
    Сделал сайт, тему выбрал WP_Premium эта тема уже с формой подписки только что то она не хочет работать уже все перерыл там, не могли бы Вы глянуть, с меня вознаграждения.
    Заранее благодарен.
    С уважением,
    Андрей

  • Артём
    Опубликовано: 21.05.2013 Ответить на сообщение

    Спасибо, украсил свою формочку) Можете посмотреть)
    Может посоветуете, как-то по другому немного сделать?

  • Анастасия
    Опубликовано: 06.07.2013 Ответить на сообщение

    Здравствуйте, возникла слудующая проблема.
    Форму сделала, как мне нравится, только пишу адрес,нажимаю кнопку подписаться, и меня перебрасывает на страницу с моими записиями, а не на форму подписки. Что сделать?
    Заранее спасибо.

    • Виталий
      Опубликовано: 06.07.2013 Ответить на сообщение

      Добрый.
      Вы действительно думаете, что я могу подсказать что-то дельное не видя проблемы? Смотрите код: где-то что-то неправильно сделали.

  • игор
    Опубликовано: 10.12.2018 Ответить на сообщение

    Ищу качественные емейл базы для рассылок, но рассмотрю и спам по умеренной цене, готов заплатить хорошую цену за хорошие базы, писать на igor.veter89@mail.ru

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.