Как сделать подписку по электронной почте.

Ранее было указано как сделать подписку по электронной почте с помощью Feedburner. Теперь же я хочу остановиться на её внешнем виде. [Для пользователей платформы Blogger этот процесс упрощён.]

Enter your email address:

Delivered by FeedBurner

А вот её исходный код.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=shpargalkablog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="shpargalkablog" name="uri"/><input type="hidden" name="loc" value="ru_RU"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Не нужно его слепо копировать. Этот код данного блога, который я получила на странице Feedburner. Но у вас будет похожий.

Необходимый минимум.

1. Переименуем "Enter your email address:" в "Введите ваш email:" или "Email рассылка:" или удалим <p>Enter your email address:</p>.
2. Перепишем value="Subscribe" на value="Подписаться" или value="Читать".
3. Уберём ссылку на FeedBurner, удалив код.

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

У нас получится:

Введите ваш email:

Форма.

1. За размеры блока отвечают элементы width=550 (ширина), height=520 (высота). Их можем настроить на свой вкус.
2. Цвет фона формы (background: #00CCFF) и другие свойства, если нужно дописываем в теге <style> или удаляем его вместе с рамкой style="border:1px solid #ccc;padding:3px;text-align:center;".

Поле для ввода адреса.

1. Его длина определяется свойством width:140px.
2. Дабы расположить элементы подписки в одну строку, нужно убрать тег <p>.
3. Для того, чтобы написать в данном поле текст, который при щелчке на него исчезал, меняем фрагмент:

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

на

<input type="text" style="color: #808080; width: 173px;" name="email" value="Адрес электронной почты"  onfocus="if (this.value == 'Адрес электронной почты') {this.value = '';}" onblur="if (this.value == '') {this.value ='Адрес электронной почты';}"/>

Кнопка "Подписаться".

1. Здесь можно добавить любые стили в фрагмент кода:

<input type="submit" value="Подписаться" />

Например, я изменила цвет кнопки (background: #4b6170), включила в левый угол изображение письма (background: url('http://4.bp.blogspot.com/_ebKrCj8TLPk/TSOR3pNm0XI/AAAAAAAABRY/wiKLjJQA3yk/s1600/email.png') no-repeat 1px 1px; padding: 0px 0em 0em 18px;), сделала все буквы строчными (text-transform: lowercase;) и задала их цвет (color: #FFF;"). Получилось так:

<input type="submit" value="Подписаться" style="background: #4b6170 url('http://4.bp.blogspot.com/_ebKrCj8TLPk/TSOR3pNm0XI/AAAAAAAABRY/wiKLjJQA3yk/s1600/email.png') no-repeat 1px 1px; padding: 0px 0em 0em 18px;  text-transform: lowercase; color: #FFF;"/>

Моя фантазия на этом исчерпана, а вы можете посмотреть, как изменить текст счётчика Feedburner.