Домой / Блоговедение / Как сделать красивую форму подписки?

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

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

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

Здравствуйте, уважаемые посетители и гости моего сайта! Сегодня мы с вами сделаем красивую форму подписки через feedburner для своего сайта. Вам будет нужно всего лишь прочитать данный материал до конца и повторить мои действия, чтобы получить красивую форму подписки. И так приступим к выполнению нашего сегодняшнего задания «Как сделать красивую форму подписки?» ...


Я Вам предлагаю два вида красивых форм подписки через feedburner для сайта на вордпресс:

Форма подписки №1:

форма-подписки-№1
форма-подписки-№1

Форма подписки №2:

форма-подписки-№2
форма-подписки-№2

Теперь давайте расскажу, как сделать красивую форму подписки первую, которая на картинке №1.
Для начала нам нужно получить обычную форму подписки через feedburner. Это делается вот здесь: feedburner.google.com. Открываете вкладку «Публикуй», переходите на «Подписки по электронной почте» и «Subscription Management» далее выберите русский язык в поле «Languages». Потом Вам нужно скопировать код из формы feedburner расположенной ниже:

код из формы feedburner
код из формы feedburner

Теперь берем нашу сгенерированную форму подписки через feedburner и немного ее редактируем. Заменим английский текст на русский:

  • «Subscribe» нужно заменить на «Хочу получать новости» или на свой текст
  • «Enter your email address» поменяйте например на «Введите ваш email адрес:»
  • А заголовок самой формы пропишите в виджете

Вот, что получилось у меня:

<form id="subscribe"
action="https://feedburner.google.com/fb/a/mailverify" method="post"
target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=essay-topics/seo',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Введите ваш email address:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="essay-topics/seo" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input type="submit" value="Хочу получать новости!" />
</form>

 

Дальше нам нужно в файле стилей style.css прописать стили для наших форм:

Стили для формы №1:

#subscribe {
 background: none repeat scroll 0 0 #EFEFEF; /*цвет фона формы*/
 border: 4px dashed #8A0808;
 color: #6B0000; /*цвет текста формы*/
 font-family: arial;
 list-style-type: none;
 margin: 0 0 10px;
 padding: 8px; /*внутренние отступы формы*/
 text-align: center; /*выравнивание по центру*/
 font-size: 13px;
}
#subscribe div {
 font-size: 18px; /*размер текста для заголовка формы*/
 margin: 0 0 13px;
}
#subscribe p {
 margin: 0 0 15px;
}
#subscribe input {
 border: 1px solid #6B0000; /*толщина и цвет границ поля email*/
 color: #6B0000;
 padding: 2px;
}
#subscribe input[type="submit"] {
 background: none repeat scroll 0 0 #6B0000; /*цвет фона кнопки отправить*/
 border: 0 none;
 border-radius: 7px; /*закругление краев кнопки отправить*/
 color: #FFFFFF; /*цвет текста кнопки отправить*/
 padding: 5px 10px;
}

 

Стили для формы №2:

#subscribe {
 font-size: 13px; /*размер шрифта для ваш email*/
 background: url("images/widget.png") repeat-x scroll center bottom #EAEEF1; /*фоновая картинка*/
 border: 1px solid #CCCCCC; /*толщина и цвет границ формы. можно пунктиром - dashed или двойные - double*/
 border-radius: 7px; /*закругленные края формы*/
 color: #455F42; /*цвет текста формы*/
 font-family: arial;
 list-style-type: none;
 margin: 0 0 10px;
 padding: 5px 3px;
 text-align: center;
}
#subscribe div {
 font-size: 18px;
 margin: 0 0 13px; /*нижний отступ для заголовка формы*/
}
#subscribe p {
 margin: 0 0 20px;
}
#subscribe input {
 border: 1px solid #577753;
 color: #577753;
 padding: 2px;
}

 

Я думаю, что никаких сложностей с процедурой «Как сделать красивую форму подписки?» у Вас не возникло? А если возникли вопросы по ходу каких либо действий, прошу Вас задавать вопросы в комментариях к данной статье. Отвечу на любые ваши вопросы и поясню как и что делать!

Не забывайте подписаться на новости моего сайта. Здесь всегда интересно!



Про Валерий Бородин

Проверьте также

лайфхаки ютуба

Лайфхаки ютуба, которые изменят вашу онлайн жизнь!

Самые нужные лайфхаки ютуба для ютубера! Здравствуйте, уважаемые друзья и гости блога! Сегодня хочу вам …

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу