Изменяем внешний вид формы подписки Feedburner

E-mail подписка – является отличным способом для оповещения об обновлениях вашего блога ваших подписчиков. Вы можете предложить вашим читателям подписаться через сервисы подписок: feedburner, subscribe, smartresponder, specificfeeds и другие. Эти сервисы отличаются друг от друга удобством пользования, функциональными возможностями, поддержкой русского языка, а также некоторые из них являются платными.
Содержание статьи:

• как добавить форму подписки в блог
• как изменить форму подписки feedburner

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

В этой статье речь пойдет о форме подписки через feedburner, так как этот сервис до сих пор пользуется популярностью среди блоггеров из-за своей простоты и удобства. Вам не придется самостоятельно писать письма подписчикам, рассылка об обновлениях вашего блога будет автоматически рассылаться вашим читателям. Я уже писала о feedburner, если вы не знакомы с сервисом, то как зажечь фид и другие первые шаги по работе с сервисом, у меня описаны в статье “Feedburner – начало работы”.

Если вы ведете блог на Blogger, то вставить форму подписки вы можете через специальный гаджет – читайте подробнее. Для других блогов существует другой способ. Им же можно воспользоваться и для блога Blogspot тоже. Для этого перейдите в настройки фида, кликнув по его названию:

Теперь перейдите во вкладку “Публикуй” –> Подписки по электронной почте –> активировать (кнопка “Activate”–> переведите на русский язык –> скопируйте полученный код и вставьте его в виджет HTML/Javascript (для блога Blogger), в виджет “Текст” (для WordPress). Вы можете также вставить код в сообщение или в новую страницу блога. Для этого следите, чтобы разместить в запись в режиме HTML.

Изменение формы подписки feedburner

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

<p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p>

Во-вторых, руссифицировать. Для этого замените “Enter your email address:” на “Введите ваш e-mail” и кнопку “Subscribe” – на “Подписаться”.
Вы также можете изменить размеры формы подписки, настроив ширину (width) и высоту (height). Добавьте в стили. Пример вставки кода:

<form style="width:350px; height:150px; border:1px solid #ccc;padding:3px;text-align:center;" action="…далее весь код формы подписки… </form>

4 способа изменения подписки feedburner

Рассмотрим 4 способа видоизменения формы подписки feedburner

1. Цветной фон формы подписки. Пример
   Для того, чтобы сделать цветной фон, добавьте background: #F3DA3F; в код формы после text-align:center;:
   
   

   <form style="width: 300px; height:140px; border:1px solid #ccc;padding:3px;text-align:center;background: #F3DA3F;"…

2. Изменение размеров текстового поля для ввода e-mail:
   
   Изменяем ширину текстового поля: меняем значение width в коде:
   
   

   <input type="text" style="width:140px" name="email"/>

   Регулируем высоту поля для ввода e-mail, добавив height в эту же строку кода:

   <input type="text" style="width:240px; height:20px;" name="email"/>

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

   background: url(https://www.example.com/image.jpg)

   правее text-align:center; в html формы.
   Пример:

   <form style="border:1px solid #ccc;padding:3px;text-align:center;background-image: url(https://www.example.com/image.jpg);"

   Не забудьте заменить https://www.example.com/image.jpg на ссылку на ваше изображение. Вам может понадобится выровнять содержимое формы по вертикали. Для этого оберните содержимое формы в div и задайте для него стили выравнивания. Смотрите пример кода ниже. Я выделила цветом добавленный код:

   <form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=my-crib', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="background-image: url(https://2.bp.blogspot.com/-KWZqsb9bHCg/V1Lpz-XN4eI/AAAAAAAATYM/Px1TddpkXNIs8G2XLpVqjU_QB5S50N3ogCLcB/s1600/kak-sdelat-email-rassilky%25281%2529.png);  border: 1px solid rgb(204, 204, 204); height: 305px; text-align: center; width: 316px;" target="popupwindow">
   <div style="margin: 150px auto;"><b style="background-color: #f4cccc;">Введите свой адрес e-mail:</b><br />
   <br />
   <input name="email" style="height: 20px; width: 156px;" type="text" /><br /> <br /> <input name="uri" type="hidden" value="my-crib" /><input name="loc" type="hidden" value="ru_RU" /><input type="submit" value="Отправить" /> </div>
   </form>

   В результате получится форма вида:
   

   
   Добавляя изображение в качестве она, не забудьте прописать для формы подписки размеры изображения. Эти размеры выделены розовым цветом в коде, который приведен выше.
4. Добавляем текст в текстовое поле для ввода e-mail:
   
   Найдите код в вашей форме вида:
   

   <p>Введите свой e-mail:</p><p><input type="text" style="width:140px" name="email"/></p>

   И измените его на этот отрезок кода:

   <p><input type="text" style="width:140px" name="email" onblur="if (this.value == '') {this.value = 'Введите свой e-mail';}" onfocus="if (this.value == 'Введите свой e-mail') {this.value = '';}" value="Введите свой e-mail"/></p>

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

input {background: #FEAA25;
border: 1px solid #F59A07;}