Блог Интеллигента Создание сайтаКрасивая форма подписки

Красивая форма подписки

02 Марта 2012

alt

Всем привет ! Сегодняшний пост будет посвящён RSS, а в особенности форме подписки на новое обновление по E-Mail. Ну это потом а сейчас новости на блоге. Пусть они и не будут релевантны к данной странице, но ничё

Новости на блоге.

Для начала хочу сказать, что я принял участие в конкурсе практически одновременно с окончанием принятием заявок. Конкурс называется "Top-10" от Сергея Шелвина (кстати хороший у него блог, советую почитать shelvin.ru ) суть конкурса вы пишите пост/статью содержащую 10 пунктов, заголовок которой должен содержать слова Топ-10. Очень перспективный конкурс, так как даже самый новичок может поучаствовать выложив свою статью которая по сути будет топ чеГо-То. Ах да белое пятно конкурса призовой фонд его 500$. 1-е место 200$, а также куча плюшек: Ретвит поста, прямая ссылка (тИЦ 325) и т.д. И ещё инвайт на MarkDay.ru это второе белое пятно конкурса .

Пост для конкурса я писал быстро (даже очень) так как окончание принятия 29 марта 23:59, я успел отправить 23:45. По моему скромному мнению ИМХО неплохо получилось, да что там почитайте сами Топ-10 лучших спаленных тем блогосферы.

Да также немного поправил шаблон этого блога возможно этого не заметно, но я изменил немного его ширину, в последствии и правую колонку, для того, чтоб форма подписки на E-Mail выглядела корректно, не вылазела и не переносилась, на следующую строку. Это меня и справоцировало на написание данного поста ! Ах да чуть не забыл завёл twitter. Пока незнаю зачем завёл и для чего он, но думаю он нужен (какая-то тупая логика) . Скоро его оформлю и размещу на сайте ссылку, ретвитт и т.д (пока в этом плаваю если где то ошибся про твиттер поправьте). Ну а теперь к теме поста, а именно к форме подписки.

Красивая форма подписки по E-Mail

Менять стандартную форму подписки мы будем которая нам выдаётся из сервиса FeedBurner, ниже скрин дифаултной.

Меня она не устраивала, 150px (в высоту) безобразия. То, что я предлагаю смотрите скрины ниже. (помацать нельзя не хотел код засорять )

1. Первая красивая форма подписки по E-Mail

Для того чтоб настроить форму под ваш FEED надо сделать следующее:

Находим эту строчку onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=vsegonet' vsegonet меняем на часть ссылки нашего Feed’а ПОСЛЕ Слеша (/) вот так к примеру у меня http://feeds.feedburner.com/cms-allru в итоге получается onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= cms-allru'
Находим input value="vsegonet" name="uri" Опять же vsegonet меняем на часть ссылки Фида после слеша в моём случае это cms-allru.

<div class="subscribe">
<form style="" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=vsegonet', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">


<div id="sub-mail">


<input onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" class="s" name="email" value="Подпишитесь на E-Mail" type="text">


<input value="vsegonet" name="uri" type="hidden">


<input name="loc" value="ru_RU" type="hidden">


<input value="Subscribe" class="btn2" src="http://allproall.com/wp-content/themes/CrazyLab/img/subbtn.png" mce_src="http://allproall.com/wp-content/themes/CrazyLab/img/subbtn.png" type="image">






</div>


</form></div>

Приступаем к красоте нашей формы, добавляем стили к нашему сайту. А именно прописываем стили подписки в файле стилях вашего шаблона. Вот код:

#sub-mail input.s {
background: url("../img/subscribe.png") no-repeat scroll -140px -120px transparent;
background-image: url(http://allproall.com/wp-content/themes/CrazyLab/img/subscribe.png);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: scroll;
background-position-x: -140px;
background-position-y: -120px;
background-origin: initial;
background-clip: initial;
background-color: transparent;
border: medium none;
color: black;
float: left;
font-family: Georgia;
font-size: 12px;
font-style: italic;
height: 34px;
margin-left: 5px;
margin-top: 5px;
padding: 0px 10px;
width: 200px;

}

2. Вторая красивая форма подписки по E-Mail

Для того чтоб настроить форму под ваш FEED надо сделать следующее:

Находим эту строчку onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=vsegonet' vsegonet меняем на часть ссылки нашего Feed’а ПОСЛЕ Слеша (/) вот так к примеру у меня http://feeds.feedburner.com/cms-allru в итоге получается onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= cms-allru'
Находим input value="vsegonet" name="uri" Опять же vsegonet меняем на часть ссылки Фида после слеша в моём случае это cms-allru.

<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=tntbystc&#39;,
 &#39;popupwindow&#39;, 
&#39;scrollbars=yes,width=550,height=520&#39;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='tntbystc'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>

И добавляем в файл стилей вашего шаблона, эти стили:

.mbttext {

background:
url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/s28/w2b-mail.png)
no-repeat scroll 4px center transparent;

padding:
7px 15px 7px 35px;

color:
#666;

font-weight:
bold;

text-decoration:
none;

border: 1px
solid lightGrey;

-moz-border-radius:
4px;

-webkit-border-radius:
4px;

border-radius:
4px;

-moz-box-shadow:
1px 1px 2px #CCC inset;

-webkit-box-shadow:
1px 1px 2px #CCC inset;

box-shadow:
1px 1px 2px #CCC inset;

}

 

.mbtbutton
{

color:
#666;

font-weight:
bold;

text-decoration:
none;

padding:
6px 15px;

border: 1px
solid lightGrey;

cursor:
pointer;

-moz-border-radius:
4px;

-webkit-border-radius:
4px;

-goog-ms-border-radius:
4px;

border-radius:
4px;

background:
#FBFBFB;

background:
-moz-linear-gradient(top, #FBFBFB 0%, #F4F4F4 100%);

background:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB),
color-stop(100%,#F4F4F4));

background:
-webkit-linear-gradient(top, #FBFBFB 0%,#F4F4F4 100%);

background:
-o-linear-gradient(top, #FBFBFB 0%,#F4F4F4 100%);

background:
-ms-linear-gradient(top, #FBFBFB 0%,#F4F4F4 100%);

filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB',
endColorstr='#F4F4F4',GradientType=0 );

background:
linear-gradient(top, #FBFBFB 0%,#F4F4F4 100%);

}

3. Третья очень красивая форма подойдёт для размещения под постом.

alt

Её плюс в том, что не использовано ни одной картинки, всё сделано при помощи CSS, что даёт малый вес !
Для того чтоб настроить форму под ваш FEED надо сделать следующее:

Находим эту строчку onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=vsegonet' vsegonet меняем на часть ссылки нашего Feed’а ПОСЛЕ Слеша (/) вот так к примеру у меня http://feeds.feedburner.com/cms-allru в итоге получается onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= cms-allru'
Находим input value="vsegonet" name="uri" Опять же vsegonet меняем на часть ссылки Фида после слеша в моём случае это cms-allru.

<div id='mbt-sub-box'><h1>Subscribe To Get FREE Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=tntbystc&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'><center>
<input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' size='30' type='text' value='Enter Your Email Address...'/>
<input name='uri' type='hidden' value='tntbystc'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submit' type='submit' value='Subscribe'/></center></form></div>

Для корректного отображения формы подписки требуется добавить следующие стили в файл со стилями вашего шаблона:

#mbt-sub-box {
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1A2638));
border: 1px solid #1A2638;
border-radius: 10px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
background: -moz-linear-gradient(top, #333, #1A2638);
}


#mbt-sub-box input {
background: -moz-linear-gradient(center top , white, #EFEFEF) repeat scroll 0 0 transparent;
border: medium none;
border-radius: 10px 10px 10px 10px;
font-size: 14px;
padding: 10px;
text-shadow: 1px 1px 0 white;
width: 280px;
color: #666;
font-family: georgia;
margin-bottom: 5px;
}


#mbt-sub-box .submit {
background: -webkit-gradient(linear, left top, left bottom, from(#369A18), to(#205F0D));
background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;
color: white;
cursor: pointer;
font-weight: bold;
margin-left: 20px;
text-shadow: 0 1px 2px black;
width: 120px;
font-family: georgia;
margin-left: 5px;
}


#mbt-sub-box h1 {
margin-top: 5px;
color: white;
font-family: georgia;
font-size: 25px;
margin-bottom: 5px;
padding: 0;
text-shadow: 0 2px 3px black;
line-height: 35px;

}

P.S. Совсем забыл это мой первый конкурс в котором я принимаю участие когда-либо. Для меня будет счастье если займу место.

Normal 0 false false false MicrosoftInternetExplorer4

Для того чтоб настроить форму под ваш FEED надо сделать следующее:

Находим эту строчку onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=vsegonet' Красный текст меняем на часть ссылки нашего Feed’а ПОСЛЕ Слеша (/) вот так к примеру у меня http://feeds.feedburner.com/cms-allru в итоге получается onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= cms-allru'
Находим input value="vsegonet" name="uri" Опять же красное меняем на часть ссылки Фида после слеша в моём случае это cms-allru.

Всё правка закончена, пишем отзывы на http://cms-all.ru/sozdanie-saita/60-krasivaya-forma-podpiski.html и вопросы. Да и не забудьте CSS во втором файле архива добавить в ваш файл со стилями.

Благодарю.
Кстати, твит - это например, зашёл НА БЛОГЕ какой-либо и нажал ТАМ на кнопочку твит и у тебя в твиттере на стене появляется запись данного блога, где твитнул.
А ретвит - это когда кто-то зашёл к тебе на стену В ТВИТТЕРЕ и нажал на кнопочку ретвит к этой записи, но уже не заходя в запись того блога.
Можно сказать одно и то же, но просто немного отличаються, где кнопочки жать. :)
Надеюсь понятно объяснил :)

Ответить | Ответить с цитатой | Цитировать

+1 # Intelligent 25.03.2012 19:45

Спасибо за разъяснение

Ответить | Ответить с цитатой | Цитировать

0 # Chip 27.04.2012 21:27

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

Ответить | Ответить с цитатой | Цитировать

0 # Chip 27.04.2012 21:43

Кажется решил этот вопрос. Для первой формы подписки. У Вас в коде во второй строке не хватает одного слова. То есть добавляем в строку action="http://feedburner.google.com/fb/a/ недостающий mailverify Получаем action="http://feedburner.google.com/fb/a/mailverify Это проверка почты, как раз ошибку и выдавал. Сейчас все ок.

Ответить | Ответить с цитатой | Цитировать

+1 # Intelligent 28.04.2012 06:03

Спасибо за выявления ошибки, пропустил как то. Пользуйтесь на здоровье

Ответить | Ответить с цитатой | Цитировать

0 # Chip 28.04.2012 19:52

IntelEgent, спасибо. Решил побаловаться с формой номер 2, тоже красивая, подойдет вместо дефолтной в сайдбар. Но что то не получается. Форма отобразилась, но выглядит она также как дефолтная, только кнопка субмит на одной линии с емейл. Никаких красивостей, графика дефолтная. Такое ощущение, что форма не понимает стиля, заданного в css. Посмотрите, что не может быть надо добавить в коде, какие нибудь условия или контейнеры, дивы. Я разбираюсь, но не совсем в этих вопросах.

Ответить | Ответить с цитатой | Цитировать

+1 # Intelligent 29.04.2012 09:39

Исправил, плагин видимо заморосил вставки кода и начал менять местами то код то слова, короче код от формы №3 был в форме №2. Щас всё исправил.

Ответить | Ответить с цитатой | Цитировать

0 # Chip 29.04.2012 13:10

IntelEgent, все работает, спасибо ! Да, точно по словам Subscribe To Get FREE Tutorials! можно было понять, что это от формы 3. Вот так и учимся.

Ответить | Ответить с цитатой | Цитировать

0 # Intelligent 29.04.2012 13:28

Ну да именно эти слова мне и не понравились

Ответить | Ответить с цитатой | Цитировать

0 # Кирилл 01.05.2012 18:13

Хорошо разобрали форму подписки на моем сайте в первом примере :)
Рад, что многим понравилось

Ответить | Ответить с цитатой | Цитировать

0 # Intelligent 02.05.2012 10:59

Хорошо, что вы не против как видите многим и правда нравится ваше творение

Ответить | Ответить с цитатой | Цитировать

0 # Seo 10.05.2012 22:38

интересные формы

прикрутил к себе все работает

Ответить | Ответить с цитатой | Цитировать

0 # injnnak 31.05.2012 02:32

О как сложно, может у вас есть что-нибудь по проще?

Ответить | Ответить с цитатой | Цитировать

0 # Intelligent 31.05.2012 07:47

К сожалению, я незнаю что может быть легче, вроде итак расписал всё от А до Я

Ответить | Ответить с цитатой | Цитировать

-1 # Мария 29.11.2012 15:38

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

Ответить | Ответить с цитатой | Цитировать

0 # Мария 29.11.2012 22:35

Разобралась, спасибо огромное! Супер!

Ответить | Ответить с цитатой | Цитировать

0 # Анастасия 18.12.2012 07:12

Что-то со стилями у меня не получилось..Но саму форму сузила..и спасибо за это!

Ответить | Ответить с цитатой | Цитировать

0 # Андрей 06.03.2013 11:31

А вот у меня шаблон главной страницы index.php сделан, то есть я вставляю скрипт именно внутрь него. И русский язык отображается вопросами, если я ставлю в скрипте value="ru_RU". Подскажите, что поправить. Код страницы легко виден на самом сайте, понятно.

Ответить | Ответить с цитатой | Цитировать

0 # Intelligent 06.03.2013 11:59

Проверьте кодировку вашего файла index.php, можно просто загрузить его с хостинга открыть с помощью блокнота, далее сохранить как и там выбор кодировки кодировка должна быть - Utf-8

Ответить | Ответить с цитатой | Цитировать

0 # Павел 21.03.2013 09:08

Автор приветствую. Извини что не в тему, подскажи пожалуйста какой плагин ты используешь для соц закладок, который у тебя сбоку плавает со статьей? Если не будешь аппрувить коммент, напиши на мыло.
Заранее благодарен;)

Ответить | Ответить с цитатой | Цитировать

0 # Intelligent 21.03.2013 09:47

Приветствую. share42.com и это не плагин но установка не сложная

Ответить | Ответить с цитатой | Цитировать

0 # Сергей 09.04.2013 15:38

Здравствуйте! А как сделать такую форму под смартреспондер или джастклик. Слышал фидбанеру скоро крышка.

Ответить | Ответить с цитатой | Цитировать

0 # Intelligent 09.04.2013 16:55

Таки да насчёт FeedBurner, сам скоро от него уйду. К сожалению не пробовал сделать подобные формы под другие сервисы подписок

Ответить | Ответить с цитатой | Цитировать

0 # Андрей 14.04.2013 16:29

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

С нетерпением жду ответа...

Ответить | Ответить с цитатой | Цитировать

0 # Intelligent 14.04.2013 18:42

Хммм, для кнопок социальных сетей лучше использовать скрипт share42.com

Ответить | Ответить с цитатой | Цитировать

0 # Андрей 14.04.2013 19:16

Не спорю, отличные сервис. Но я имел в виду, размещать кнопки соц. сетей в отдельных специально выделенных для этого блоках. Как допустим у Виталия на сайте mojwp.ru. Очень хочется навести порядок на странице.

Ответить | Ответить с цитатой | Цитировать

0 # Intelligent 14.04.2013 19:53

Ага внизу значит, если я правильно понял. Для данной реализации придётся залезть в код. Создаём DIV блок в конце нашей страницы шаблоны (до ) там уже привязываем стиль к нашему блоку и прописываем стили - высоту, ширину (100% обязательно) ну и указывают чтоб блок был фиксирован - position:fixed, а оформляем уже по своему нраву

Ответить | Ответить с цитатой | Цитировать

0 # Андрей 15.04.2013 05:42

Наверное именно так как вы говорите, но к сожалению я не понимаю как правильно нужно сделать. Какой именно код нужно вставлять и куда? Уточните пожалуйста, как правильно это сделать. Если конечно же располагаете временем, спасибо.

Ответить | Ответить с цитатой | Цитировать

0 # Intelligent 15.04.2013 11:49

Напишите ваш скайп свяжемся, а то долго так

Ответить | Ответить с цитатой | Цитировать

0 # Андрей 15.04.2013 15:36

Мой скайп - diusha82

Ответить | Ответить с цитатой | Цитировать

+1 # Артём 18.04.2013 09:52

Блин первый код использовал выглядит неплохо, но в две строчки сделалось

Ответить | Ответить с цитатой | Цитировать

0 # Intelligent 18.04.2013 14:46

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

Ответить | Ответить с цитатой | Цитировать

0 # Андрей 18.04.2013 19:21

Я попытался поставить форму и первую и вторую в текст на страницу. И все равно не получилось... Так и осталось в две строки. Что-то явно не то...

Ответить | Ответить с цитатой | Цитировать

0 # Intelligent 18.04.2013 20:21

Поставьте где нибудь на своём сайте 1 или 2 форму для демонстрации, а я попробую решить проблему, верней я её не вижу когда выкладывал формы всё работало гладко! Несколько раз проверял

Ответить | Ответить с цитатой | Цитировать

0 # Андрей 18.04.2013 20:33

Вот адрес ссылки с подпиской.
http://salatyk.ru/spasibo-za-vash-kommentarij-na-sajte/

Надеюсь получится решить проблему, уж очень мне нравится эта форма.

Ответить | Ответить с цитатой | Цитировать

0 # Intelligent 19.04.2013 12:16

Я просмотрел и понял походу ваш визуальный редактор в Wordpress добавляет к input теги P. Удалите их - < p>

Ответить | Ответить с цитатой | Цитировать

0 # Андрей 19.04.2013 18:05

Я бы с удовольствием, а от куда? код на странице без тегов ,в style.css тоже вроде все чисто. От куда удалять их? Может проще прописать, что нибудь тогда?

Ответить | Ответить с цитатой | Цитировать

0 # Intelligent 19.04.2013 18:35

Надо бы залезть в админку... а так всё равно что морской бой играть

Ответить | Ответить с цитатой | Цитировать

0 # TAZ61 16.09.2013 21:51

Все четко, и доступно, спасибо

Ответить | Ответить с цитатой | Цитировать

0 # Андрей 02.02.2014 18:21

Добрый вечер. Скажите пожалуйста, Ваша форма подписки я так понимаю стационарна? Т.е. Вы не вставляли никаких красивых кодов и картинок. Как сделать эффект при наведении на кнопку подписки?

Ответить | Ответить с цитатой | Цитировать

0 # Максим 13.02.2014 19:24

Спасибо, все получилось! Установил к себе на сайт вторую форму подписки. Всем успехов в освоении!

Ответить | Ответить с цитатой | Цитировать

0 # Оскар 16.03.2014 23:24

Спасибо большое

Ответить | Ответить с цитатой | Цитировать

0 # Alex 19.10.2014 12:11

класс. 4-ую себе возьму. поставлю под постом.

Ответить | Ответить с цитатой | Цитировать

0 # Jake 09.04.2015 20:34

Спасибо возьмем на вооружение!))

Ответить | Ответить с цитатой | Цитировать

0 # Rebbeca 20.07.2017 04:36

hi!,I like your writing so much! share we keep in touch extra about your article on AOL?
I require an expert in this house to resolve my
problem. May be that is you! Looking ahead to look you.

my blog post ... Nessuna dieta del pane per 1 mese: http://semplice-dieta.com/del/nessuna-dieta-del-pane-per-1-mese.php

Ответить | Ответить с цитатой | Цитировать

0 # Carole 06.01.2018 19:17

I'm curious to find out what blog platform you're working with?
I'm experiencing some small security issues with my latest site and I would like to
find something more secure. Do you have any recommendations ?

My web site - specadieta.com: http://specadieta.com/

Ответить | Ответить с цитатой | Цитировать