Nazyrov.ru » » Как сделать красивую форму подписки?

Как сделать красивую форму подписки?

красивая форма подписки
Здравствуйте, уважаемые посетители и читатели моего блога. В сегодняшней статье я расскажу как сделать красивую форму подписки на блог WordPress. Но сразу скажу вам, что этот способ подойдет и для любой другой популярной CMS.

Сейчас редко кто не использует форму подписки. Ее можно встретить практически на всех сайтах и блогах. И это не удивительно, ведь подписчики это:

  • Постоянные посетители;
  • Дополнительный целевой трафик;
  • Клиенты ваших товаров и услуг;
  • Партнеры по бизнесу;

Существует немало сервисов, через которые можно генерировать формe подписки и автоматически рассылать письма подписчикам. Но я бы хотел выделить Google Feedburner. Этот сервис позволяет сгенерировать форму подписки, ленту RSS и автоматически отправляет письма вашим подписчикам на e-mail при появлении новой статьи на вашем блоге.

Feedburner очень гибок в настройке и имеет множество функций. Но я покажу лишь основное.
В первую очередь вам нужно зарегистрировать аккаунт в Google, если его еще нет. Если все в порядке, то переходите по ссылке и вводите свои данные от Google.

Чтобы вам было понятнее, сразу измените язык.

сменить язык

Перед вами должна быть надпись «Зажигай фид прямо сейчас». Здесь вам необходимо ввести адрес своего сайта и нажать кнопку «NEXT».

новый фид

У вас появится уведомление, что по данному адресу более одного фида. Вам нужно выбрать первый вариант, следующего вида:

http://адрес сайта/feed

456123

Затем вы можете задать название и адрес фида. Я оставил по умолчанию.

На этом завершен первый этап настроек. Вас поздравляют, у вас появилась своя RSS лента, которую можете посмотреть перейдя по ссылке, данной сервисом Feedburner.

feed_gotov

Теперь приступаем ко второму этапу, в котором необходимо настроить форму подписки.

На открывшейся следующей странице, появилось горизонтальное меню с надписями – анализируй, оптимизируй, публикуй, решай проблемы. При помощи этого меню, мы и будем делать следующие настройки.

Перейдите во вкладку «Публикуй», «Подписки по электронной почте».

Если у вас еще не активна эта услуга, нажмите «Активировать» на открывшейся странице.

publikui

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

Но предоставленный сервисом код, не делает форму подписки симпатичной. У меня получилось вот что:

первый вариант формы

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

Enter your email address:

«Subscribe„ />

Delivered by FeedBurner

Вместо надписи «Enter your email address:», в коде пропишите «Введите свой e-mail».

Вместо надписи «Subscribe», впишите «Подписаться».

В конце кода, удалите следующую часть:

Delivered by FeedBurner
У вас должно получиться примерно так:

второй вариант подписки

Теперь нам нужно вставить фоновую картинку, поменять цвет кнопки и вставить кнопки социальных сетей.

Загрузите 2 изображения на свой хостинг. Одно, из ни х то, что будет использоваться в качестве фона, второе в качестве кнопки «Подписаться».

Измените свой код формы подписки следующим образом.

  • Заключите код Feedburner в теги
  • Перед надписью value="Подписаться" вставьте следующий класс — class="burner_submit_1".
  • Удалите в начале кода стиль
    и вместо него вставьте —

У вас должно получиться примерно так:

Введите свой e-mail:

Скопируйте и вставьте следующий код в файл style.css

/*---------- Feedburner bar ----------*/
.feedburner {
        position: relative;
        width: 240px;
        height: 311px;
        padding top: 180 px;
        margin-bottom: 0px;
        background: url(ссылка на фоновое изображение) no-repeat top center;
        overflow: hidden; 
}
 
.burner_form {
        width: 240px;
height: 108px;
padding: -10px 30px 40px 0px;
margin: 180px 0px 10px 25px;
text-align: center;
 }
 
.feedburner_submit{
border: 1px solid #FFFFFD;
background: #000000;
 }
 
.burner_submit_1 {
        width: 140px;
        height: 30px;
        margin-bottom: 80px;
        background: url(ссылка на изображение кнопки) no-repeat;
        border: 1px solid #ffffff;
        box-shadow: 1px 1px 5px #aaaaac;
        font: bold 14px Arial, sans-serif;
        color: #ffffff;
        cursor: pointer; }

Не забудте поменять надпись «ссылка на изображение кнопки» на свою ссылку.

Если форма съезжает в сторону, неправильная ширина или высота, просто измените это в файле style.css

Теперь наша форма подписки приобрела более приятный вид. Осталось только добавить кнопки соц. сетей.

forma_1

Добавляем кнопки соц. сетей в форму подписки.

Добавить кнопки можно при помощи обычного HTML кода. Но чтобы вы не заморачивались, сделайте следующее:

1. Загрузите на свой хостинг изображения иконок соц. сетей необходимого размера. Я на примере буду показывать иконки 45 X 45.

2. Скопируйте и вставьте HTML код под кодом формы подписки, вставив в код свои ссылки:

1
2
3
4
5
6
7
8
9
10

Общайтесь со мной:

Аналогичным способом можно добавить другие иконки или изменить эти.

На этом настройки закончены. У меня получилась вот такая форма:

Все вопросы можете задать в комментариях. С удовольствием отвечу на них.

Как вам статья?
Полная ерундаНичего интересногоТак себеХорошоОтлично (1 голосов, оценка: 5,00 из 5)
Loading...Loading...

Понравилась статья? Поделись с другими, нажав на одну из кнопок.


Комментариев 62 на “Как сделать красивую форму подписки?

  1. Круто! Вот эта статья. Давно хотел поменять свою форму подписки, но не знал как сделать это профессионально, как у тебя. Добавлю статью в закладки — будет время займусь.

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

    • Спасибо, Алексей.

      Я просто взял картинку из поика Google, в фотошопе пририсовал конверт, вот и вся уникальность :)

      • Кстати, по поводу конверта, не поняла, как его прорисовать. С фотошоп вообще не дружу, если честно.)) Хотела конверт сделать, но в итоге сделала просто подписку саму, где вписываем данные, и обвела это рамкой такой, в осеннем стиле.) На заднем фоне девочка с зонтиком, тоже осенняя такая, чтобы в тему осени было.)

        • Здесь простая работа со слоями. Первый слой — девушка, второй — конверт. То есть одно изображение наложено на другое в фотошопе, и второе изображение сделано прозрачным.

        • Хм... А слои то лучше делать все таки в CSS, а не в фотошопе — фотошопные в разных браузерах по разному отображаться могут.

      • И неужели она полностью стала уникальной от этих манипуляций? Гугл не выдает копии при поиске по картинке — или ты просто этим не заморачиваешься?

        • До поры до времени, да стала уникальна.

    • Алексей — нарисованную девченку можно найти на фотостоках, можно заказать у фрилансеров, а можно и самому нарисовать. Кстати не нужно откладывать в долгий ящик — решение проблем выгодно делать уже в процессе чтения статьи.

  2. Не-е. Мне такая не пойдет! Такую девку я видел на других блогах. Мне нужна не тронутая. Наверное ты прав — тоже буду искать в Google.

        • И как успехи — прошло уже столько времени после комментария, Алексей — получилось найти девственницу для подписной формы?

      • Андрей, все возможно, если задаться целью — тем более что за 100 рублей фрилансеры нарисуют сейчас все что угодно.

        • Ну за 100 рублей, это вряд ли...

        • Да я так, образно сказал — цена её максимум 300-500 рублей.

      • Так где же такие искать — тут разве что самому сделать, воспитать — и уже тогда её вмонтировать в форму подписки — классно все получится — ведь инструкция то не сложная.

    • Так почему же все таки не искать на специализированных сайтах, на которых предоставляются вагоны бесплатной графики, которую можно как бы изменять уже под себя (благодаря заливкам, изменениям цвета и так далее — и получать полностью девственно уникальные изображения?

  3. 100% поставлю себе такую же, только картинку поменяю, спасибо за эту форму подписки! УРА!

      • А не боишься, что за плагиат поисковики под фильтры аристуют? (Ну типа разойдется форма по интернету — и получается потеряет свою уникальность твоя личная)?

        • Юрий, какой же это плагиат? Это же не контент ;)

        • Так Борисов у себя где-то в каком-то курсе рассказывал, что даже иконки должны быть полностью уникальными в дизайне — с этого и вывод.

    • Олег, такую же делать не нужно — нужно быть оригинальным. А то тут поведется так, что у всех будет одинаковая — это как бы не очень хорошо.

  4. Красивая кнопочка получилась. Жалко что у меня сайдбары маленькие и форма Смарта в них не помещается. А если пытаюсь делать меньше, то выходит фигня. Но мысль хорошая, надо подумать.

    • Так это не проблема — можно масштабировать — это раз, задавать в процентах ширину — это два, да и просто можно отодвинуть z-index куда подальше — и все поместится. Правда действительно вид хромать будет.

      • А ты как всегда и ко всем — вежлив! Молодцом! С таким подходом количество читателей будет увеличиваться не по дням — а по часам!

    • Татьяна, если человек говорит, что он добавляет в закладки и после когда-то попробует сделать, то это воспринимается так, будто это никогда делаться не будет. Я стараюсь избегать оставлять такие комментарии, даже если действительно буду делать по инструкции — чтобы не обижать подобным пониманием автора.

  5. Урааа, наконец-то, дождалась!)) Андрей, спасибо большущее, ты гений!)) Так приятно, что выполнили мою сокровенную просьбу, как же я долго искала, чтобы хоть у кого-то было описание того, как это делается.)) Даже мой знакомый (из прошлого) сказал мне: «Ди, купи у меня курс, там все есть и про фид, и про картинки и т.д.»

    Я так на него обиделась, если честно.( Просто пытался продать свой курс, притом каждый день мне говорил, что у него и то и се есть в это курсе. Жесть.(

      • Во-первых без вы, не люблю формальностей.)

        Во-вторых я очень долго искала такую информацию, ее никто не хотел предоставлять в открытом доступе, либо плохо искала, конечно. Но, не находила!

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

        • Ок, я тоже не люблю формальностей.

          Зайду в гости на новый блог с удовольствим :)

  6. Вопрос не по теме. Я поменял адрес входа в админку путем замены названия файла wp-login.php и его содержимого, Захожу по новому адресу,но теперь не могу выйти, пишет ошибку 404, страница на найдена. Что я сделал не так.

    • Егор, я не могу ответить, пока сам не увижу. Я бы посоветовал спросить у хостера. Вполне возможно, что вводите неверный адрес или каким-то образом поврежден файл wp-login.php.

  7. Вот как раз такой формы и не хватает моему блогу, вот правда только девушку заменила бы на что-то другое по своей тематике.

  8. Андрей, у тебя реально прикольная форма подписки, спасибо за инструкцию! А у меня простая, сразу как сделала, потом все руки не доходят изменить))

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

  10. Андрей, а как быть с формой подписки на Смарт? Действия те же или нет.

    • Андрей, со смартом все проще. У него есть функция, автоматической генерации формы подписки. То есть в «новой» форме подписки стала доступна возможность сразу в качестве фона выбрать картинку из коллекции или вставить свою.

      А кнопки соц. сетей ставятся так же.

      Я тоже хочу написать об этом небольшую мини инструкцию.

      • Это да, просто как например ее сделать больше той, которую выдает смарт.

        • В коде должны быть значения высоты и ширины.

  11. Все-таки я нашел себе не тронутую. Девушка конечно известная, но на блогах ее нет. Благодарю за стили! Только исправь немного — не везде есть точка с запятой. Новички не разберутся.

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

  12. Андрюха спасибо!!! Дай расцелую)))) Шучу, нормально с ориентацией))) Спасибо за пост!

    • Ты уже реализовал себе форму по примеру наведенному Андреем, Дима?

  13. Андрей, я решил проблему со смартом. Заходите посмотрите что получилось. Статья на блоге «Форма подписки»

    • Посмотрел, Андрей! Все просто супер получилось! Молодцом — старался сам или просил кого?

        • Это замечательно! Когда сам что-то делаешь — приятнее на результат смотреть — да и гордость за себя любимого охватывает (по себе знаю).

  14. Фотка в конце статьи потерялась... Печалька. Я так понимаю что там скриншот твоей формы был?

  15. Круто! Спасибо! Взял себе...

    Ответить
  16. Спасибо! Это по рассылке статья. А как сделать, чтобы после подписки книга приходила или скачивалась пользователю?

    Ответить
    • Есть 2 варианта:

      1. Настроить автоматическую отправку писем на сервисе рассылки после подписки и в этом письме указывать ссылку для скачивания.

      2. Настроить автоматическое перенаправление пользователя после подписки на скрытую страницу, где можно скачать.

      Я использую второй вариант.

      Ответить
      • Как это сделать? Можно ли почитать у вас?

        Ответить
        • У меня пока нет статьи на эту тему, постараюсь в скором времени написать.

Добавить комментарий для Алексей Отменить ответ

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

Можно использовать следующие HTML-теги и атрибуты:

Алексей