Как установить красивую форму подписки на блог

Форму подписки на свой блог необходимо поставить, и это известно, по-моему, каждому человеку, который уже как-то разобрался с работой в интернете, — потому что она дает возможность получать подписчиков  в свой подписной лист. А как сделать это просто и притом чтобы форма подписки была еще и красивой, поговорим в этой статье.

красивая форма подписки на блог

Форма подписки легко и быстро

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

Такой способ создания формы подписки подойдет как для сайтов на WordPress, так и для других движков, потому что код не будет отличаться друг от друга на разных движках, да и файл *.css работает по одинаковому правилу для всех движков.

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

Красивых форм для подписки в сети много, на любой вкус и цвет, так что выбирайте то, что вам нравится и устанавливайте ее на свой блог.

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

И после того, как Вы уже установите коды новой формы, следуйте по шагам, подгоняя каждый элемент по такой последовательности:
1. Основная форма.
2. Форма ввода данных.
3. Кнопка подписки.

Как на этой картинке:

порядок корректировки формы подпсики

Создаем форму подписки сами

Теперь переходим к практике, а точнее к самому коду, который и нужно будет редактировать.

Первое:
Надеюсь у Вас уже есть код формы подписки, который Вы берете в своем кабинете сервиса рассылок, или на сервисе feedburner.  Feedburner всем хорош, но мне не очень нравится, что подписчики остаются на этом сервере.
А вот они, подписчики, мне нужны на своем сервисе рассылок для дальнейшей работы с ними.

Впрочем это Вам решать, работать с feedburner или нет

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

То, что выделено красным -удаляете, то что зеленым — дописываете.
Обратите внимание, если вы будете устанавливать свою кнопку, то надпись “Подписаться”, или что у вас там будет написано на самой кнопке, нужно будет удалить и оставить просто кавычки.

меняем код формы подписки feeburner

Вот код. Только не забудьте поставить адрес своего фида.

Этот код мы вставляем в виджет, который ставим в то место, где будет Ваша форма подписки.

Второе:
Далее добавляем код css в файл стилей Вашего блога — style.css, который будет «управлять нашей формой подписки».
Где найти этот код?
В админке WordPressa: Внешний вид-Редактор-Таблица стилей.

Вот в этот файл и добавляем следующий код в самом низу после закрывающей фигурной скобки:

ВНИМАНИЕ: это только начальный шаблон кода, он работает с моей картинкой на форме подписки и с моими размерами самой формы,  — его нужно будет изменять и подгонять по Вашей картинке на форме уже по месту на сайте.

Как я уже говорил, начинайте подгонять код по порядку, сверху вниз.
Все названия файлов замените на свои, цвета и оформление сделайте по своему вкусу.

В этом месте Вы задаете размер Вашей формы подписки:
.cell-subscription {
float:left;
width: 250px;
height:430px;

Это строка  с Вашей картинкой фона формы подписки:
background: url (https://successmen.ru/gena/wp-content/uploads/2018/03/f1.png) no-repeat;


Строки:
background:url (https://successmen.ru/gena/wp-content/uploads/2018/03/button.png) no-repeat!important;

и
.subscription-button:hover {background:url (https://successmen.ru/gena/wp-content/uploads/2018/03/button2.png) no-repeat!important;}
Это Ваш кнопка.

Первая — button.png стоит на форме подписки.
Вторая — button2.png немного другая по цвету, появляется когда посетитель наводит на кнопку мышкой.

Эти файлы: картинка фона и кнопки нужно загрузить на блог прямо в Медиафайлы и оттуда взять ссылки на эти кнопки и вставить эти ссылки в Ваш код.

Положение полей для ввода E-mail и имени на форме подписки, а также кнопки меняйте, подбирая параметр margin и padding.
А размер самих полей настраиваем параметром width и height.

И последнее: Нужно проверить, как смотрится ваша форма в разных браузерах, так как это избавит вас от неправильной настройки формы. Mozilla и Chrome могут по-разному показывать вашу форму подписки, ну это только в том случае, когда вы не правильно установите параметры в файле css.
Надеюсь, что эта статья вам поможет сделать на ваш блог «красивую и уникальную форму подписки».

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

Успехов Вам.
Ваш Геннадий Гуковский


Мой видеоканал на Youtube.
Мой скайп: praktikk
E-mail: gukgena@gmail.com
Mail-агент: ggena1@mail.ru
Tel / Viber: +7 952 322 55 17
Я в: Контакте
Одноклассниках
Моем мире
Facebook
Вам понравилась статья! Поделитесь ею, нажав на кнопки Ваших социальных сетей:

Как установить красивую форму подписки на блог
Пожалуйста, оцените этот пост

Добавить комментарий

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

19 + 5 =