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

Всем привет!

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

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

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

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

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

Итак, что нам для этого понадобиться:

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

Так выглядит краткий план действий. Переходим непосредственно к делу.

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

1
2
3
4
5
6
7
<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=expromtom', '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="expromtom" 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>

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

Также, как я говорил выше, когда обговаривал план действий, нужно заготовить две картинки:

  • картинку, которую будем использовать в качестве изображения кнопки (я сделал ее размером 200px на 30px):
  • Красивая форма подписки feedburner для WordPress

  • картинку, которую будем использовать для украшения фона формы подписки (я сделал ее размером 260px на 200px):

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

В качестве примера я представил свой вариант картинок. Идем дальше.

Теперь я по порядку опишу действия, которые нужно произвести с исходным кодом формы подписки:

  • строка 1 — удаляем конструкцию, которая отвечает за отображение рамки: border:1px solid #ccc; и добавляем конструкцию background-color: #e1f6e8, отвечающую за цвет фона, номер цвета можете заменить на свой.
  • строки 4 и 7 трогать не будем.
  • строка 2 — заменяем код строки на следующий:
     

    1
    
    <img style="width: 260px; height: 200px;" src="http://expromtom.ru/wp-content/themes/themeone/images/Podpiska.jpg" />

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

  • строка 3 — заменяем код строки на следующий:
     

    1
    
    <p><center><input id="src" style="width: 176px; background-color: #fff;" type="text" name="email" value="Введите ваш email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></center></p>

    строка отвечает за оформление поля для ввода email подписчика. Ширину (width) и цвет фона (background-color) нужно подбирать под каждый конкретный случай, в зависимости от темы, думаю это не вызовет затруднения. Также данный код предусматривает вывод в данном поле фразы «Введите ваш email», которая исчезает при установке в него курсора.

  • строка 5 — заменяем код строки на следующий:
     

    1
    
    <input style="width: 200px; height: 30px; padding-bottom:10px;" type="image" src="http://expromtom.ru/wp-content/themes/themeone/images/Knopka.jpg" />

    не забудьте предварительно закинуть на хостинг файл картинки кнопки, а путь к этому файлу пропишите в данном коде вместо моего.

  • строка 6 — удаляем, так как в ее коде сервис feedburner предусмотрел ссылку на свой сайт, а нам данная ссылка никакой пользы не несет.
  •  
    После внесения всех указанных изменений код моей формы подписки принял следующий вид:

    1
    2
    3
    4
    5
    6
    
    <form style="padding:3px;text-align:center;background-color: #e1f6e8" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=expromtom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <img style="width: 260px; height: 200px;" src="http://expromtom.ru/wp-content/themes/themeone/images/Podpiska.jpg" />
    <p><center><input id="src" style="width: 176px; background-color: #fff;" type="text" name="email" value="Введите ваш email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
    </center></p><input type="hidden" value="expromtom" name="uri"/>
    <input style="width: 200px; height: 30px; padding-bottom:10px;" type="image" src="http://expromtom.ru/wp-content/themes/themeone/images/Knopka.jpg" />
    </form>

     
    Результатом чего явилась вполне красивая форма подписки feedburner для WordPress:

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

    По сравнению с исходным вариантом стало гораздо лучше, не так ли?

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

    На этом все, подписывайтесь на обновления моего блога, чтобы быть в курсе выхода новых статей!

    С уважением, Владимир Денисов!

Комментарии 56

  • Владимир, здравствуйте! Огромное человеческое спасибо!!!!
    Сделала на пробу подписку, как описано у Вас. У меня почти все получилось. Единственное, не пойму, откуда взялась рамка вокруг первого рисунка. И почему внизу нет никакого отступа после кнопки «Подписаться» (( Пыталась сама подписаться, и когда ввела адрес и нажала кнопку «подписаться», в появившейся форме почему-то не был указан адрес e-mail автоматически, так и должно быть? Просветите, пожалуйста, по этим вопросам, я пока, к сожалению, еще чайник в этом (((
    Заранее большое спасибо!

    • Здравствуйте, Татьяна!
      Очень рад, что моя статья статья оказалась для Вас полезной!
      Чтобы убрать рамку вокруг рисунка удалите из первой строчки кода конструкцию border:1px solid #ccc;.
      Чтобы добавить отступ после кнопки Подписаться нужно после конструкции < input style="width: 180px; height: 30px;" перед закрывающими кавычками добавить код padding-bottom:10px; где 10 - это величина отступа в пикселах, можете поменять на любое другое число. На счет повторного ввода адреса действительно в коде присутствует ошибка, виноват, нужно в строке 3 заменить код name="s" на name="email". Надеюсь после этого у Вас все будет работать как часы! Если будут еще вопросы, пишите!

    • Кстати, я внес данные изменения в саму статью.

  • Ура! Ура! Ура! Владимир, все получилось! Огромное Вам спасибо! И очень приятно, что Вы так быстро откликнулись, сразу видно, что Вы цените своих читателей!
    Поэтому я тоже подписалась на Ваш блог, и стану Вашим постоянным читателем.
    Но вот в процессе подписки к Вам на сайт у меня снова возник вопрос. Когда я занесла в форму подписки свое имя и email, нажала «Подписаться», у меня возникло симпатичное окошко «Оформление подписки», где говорилось: проверьте почту, и т.д. … А когда я подписывалась к себе на сайт, у меня появилось окно от FeedBurner, где требовалось внести капчу. Конечно же, Ваш вариант выглядит просто отлично по сравнению с тем, что появляется от FeedBurnera. Подскажите, пожалуйста, если не сложно, как что-то подобное можно реализовать? А то стандартный сервис все-таки не так красив, как хотелось бы. Заранее благодарю!

    • Татьяна, я очень рад, что у Вас все получилось и что Вы подписались на мой блог, надеюсь информация в нем будет для Вас полезной!!!
      По поводу отличия в процедуре подписки дело в том, что с недавних пор вместо FeedBurner я стал использовать сервис рассылок JustСlick. Там совершенно другой принцип, и если в FeedBurner рассылка осуществляется автоматически после публикации новой статьи и построена на трансляции RSS фида, то в JustСlick нужно самому формировать каждое письмо, рассылаемое подписчикам. Однако у данного сервиса куча преимуществ, таких как более приятный внешний вид писем, возможность рассылать письма любого нужного содержания, возможность создавать автоматизированные рассылки и т.д. Я пока сам не во всем разобрался 🙂
      Именно по этой причине у меня в блоге теперь стоит форма подписки данного сервиса и процедура подписки отличается, как Вы верно и заметили
      🙂

  • Все понятно теперь, Владимир! Тогда я лучше остановлюсь на FeedBurner, мне все-таки больше нравятся сервисы, которые «поставил и забыл» 🙂 Немного смущает только то, что я слышала, Гугл приостанавливает поддержку FeedBurner. Вот потом точно придется искать альтернативу )).

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

  • Сделала всё по вашей инструкции! Очень благодарна! Всё красиво и главное — работает!))))

    • Анна, рад, что моя статья вам помогла!
      Еще небольшой совет: в первой строчке кода после background-color: вам нужно вместо #e1f6e8 прописать свой номер цвета (чтобы все было однотонно желтое)!

  • Владимир, добрый день.
    Спасибо за такой понятный пост!
    Только вот как сделать форму подписки и кнопку НА фоновой картинке? Чтобы они наслаивались друг на дружку, а не были друг под другом?
    И в чем может быть проблема — закинула картинки на хостинг, адрес картинки перепроверяла несколько раз, но на сайте картинки не отображаются…
    Заранее Вам большое спасибо!

    • Здравствуйте, Наталья!
      Попробуйте в строке 1 кода вместо background-color: #номер цвета прописать background-image: url(путь к фоновому изображению, к примеру wp-content/uploads/2014/01/krasivaya-forma-podpiski-feedburner-dlya-wordpress_4.jpg)
      Только подгоните размер картинки под размер виджета.
      На счет неотображающихся картинок: попробуйте почистить файлы cookie.
      Надеюсь мои советы помогут, если будут вопросы — пишите!

  • Владимир, спасибо огромное за статью!
    Я только-только в процессе создания блога и много чего пока еще не понимаю 🙂 И ваша пошаговая инструкция мне очень помогла! С заданием справилась ❗ ❗ ❗ Спасибо!!!

    • Пожалуйста, Светлана, рад что у вас все получилось и моя статья принесла вам пользу!
      Желаю вам успехов в создании блога! Если будут вопросы — обращайтесь 🙂 !

  • Захотелось и мне сделать форму подписки поинтереснее. Перелистала массу статей, пробовала и так, и сяк. Наконец нашла вашу статью и получилось. Пока есть недоработки, но главное — принцип поняла. До ума доведу позже, сейчас уже голова не варит. На радостях хочу сказать вам большое спасибо, Владимир!

  • Владимир здравствуйте, помогите пожалуйста с формой. Мне хотелось бы чтобы форма была в рамочке в виде узора, нашла такой узор и сделала белую картинку, а на ней по периметру узор. Прописываю такой код <form style= background-image: ("http://sait.ru/wp-content/uploads/2014/07/0.jpg&quot;); но рамочка не появляется, не могу найти ошибку. Или так не получится сделать и фон нужно однотонный?

    • Здравствуйте, Марго! Попробуйте после background-image: добавить аргумент url, то есть в вашем случае < form style= background-image: url ("http: // sait.ru / wp-content / uploads / 2014 / 07 / 0.jpg); Если это не поможет, обращайтесь!

      • Ой, Владимир, вы уберите ссылочку пожалуйста, а то она ведет на несуществующую страницу. Я так тоже делала, еще скобочки пыталась убрать, не было, еще я не поняла как ее размеры подогнать под размер самой формы, в общем запуталась уже. ❓ ❓ ❓ :mrgreen:

        • Спасибо, Марго, ссылку убрал 🙂
          Чтобы узнать размеры картинки для фона, нужно узнать размеры самой формы, вы правы! Сделать это можно просмотрев исходный код страницы, например в Google Chrome это делается щелчком правой кнопкой мыши по элементу и выбором из контекстного меню пункта «Просмотр кода элемента». Там можно будет выбирая разные контейнеры div просмотреть размеры соответствующих элементов в пикселях. Это как один из наиболее простых вариантов, а вообще вся информация о размерах элементов содержится в файле стилей CSS.

          • Владимир, в общем я сегодня вас достану, уж сорри. Обратила внимание что все картинки, которые мы вставляли в код, также в коде прописывали из размеры, я не добавляла размеры к фону, может это и есть ошибка? 😯 😥 ❓

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

  • Спасибо за пост. Сейчас поколдую и себе что-нить сваяю ❗

  • Володя,спасибо тебе. Получилось отлично. На тестовом поддомене проверял.Пока времени не хватает вникать в суть языка,неделю назад только свой первый блог открыл, инфы новой куча навалилась.Так такие как ты люди и выручают. Еще раз спасибо. ❓

  • Спасибо Вам! Правда, если поработать с фотошопом, можно еще красивее сделать!)

  • Владимир, спасибо за статью, все получилось! Удачи!

  • Владимир, спасибо. Получилось с первого раза, т.к. у Вас все подробно, по шагам расписано. Скопировала Вашу картинку с конвертом, очень понравилась, оставалось лишь заменить фон в тон своего шаблона. С удовольствием сразу подписалась на Ваш блог.

    Еще добавила счетчик в форму. Жаль только, не удается перевести слово «Подписчики» на русский. Вы не подскажете, возможно ли это сделать, не применяя плагины, скрипты и пр.? В коде не могу понять, какой фрагмент отвечает за это. Пытаюсь в Фидбернер, в «feed Count» перевести на русский, включая русский язык в «languages», все равно текст остается на английском.

    • Пожалуйста, Сауле, очень рад что моя статья Вам помогла и Вы подписались на обновления моего блога 🙂
      Слово readers перевести без использования плагинов и скриптов не получится, ведь код, отвечающий за его генерацию, находится на сервере сервиса feedburner. Если честно, то я не знаю даже о том, можно ли это сделать, как Вы сказали, с использованием плагинов и скриптов, никогда не задумывался об этом 😕

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

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

      • Владимир, не могли бы подсказать, почему при подтверждении подписки по этой форме, которую я сделала по Вашему описанию, отражается обратный адрес (название блога) в таком виде: ;>3 !0C;5 030?>2>9 > 2O70=88

        Сначала не заметила этого, а сегодня обратила внимание.

        • Сауле, я не знаю, почему так происходит, у меня такая же ситуация. Но я не думаю, что это вызвано какой-то ошибкой и вообще в каком-либо смысле критично, так что не стоит переживать по этому поводу.
          С Вашего позволения я бы хотел дать пару советов по корректировке внешнего вида Вашей формы подписки, в частности можно заменить цвет фона (прописать background-color: #ff99cb в первой строке кода). Также можно подогнать размер кнопки «Хочу получать!», т.е. в строке 5 размеры прописать следующие: width: 212px; height: 44px;. Правда тогда желательно будет отрисовать кнопку по-новому, иначе она сольется с фоном формы подписки.

  • Владимир, спасибо Вам за полезные рекомендации! Внесла изменения в форму, сразу стало лучше, когда фон формы стал однородным.
    Если не трудно, подскажите, пожалуйста, как можно убрать белый фон вокруг кнопки подтверждения подписки. Никак не могу понять, как это исправить 😕

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

  • Владимир, здравствуйте! Статью прочитала с интересом, но меня сейчас накрыла другая проблема — забрела к вам, пытаясь найти решение. Подписка через feedburner вдруг перестала работать — т.е. подписчики прибавляются, но перестали идти рассылки анонсов статей. Вы не сталкивались с подобным? Вдруг подскажете — куда писать, с кем разбираться… 😥

    • Здравствуйте, Галина!
      Причину навскидку сказать крайне сложно, для начала проверьте работоспособность самого RSS фида Вашего блога, который доступен по ссылке вида http: // feeds.feedburner.com / логин_при_регистрации_на_фидбёрнере

  • Владимир, здравствуйте! Не знаю, похоже, всем все понятно, а я туплю… Но где взять исходный код, чтобы его менять? Я понимаю, что могу внести изменения в предоставленном Вами коде, но куда его потом вставить? 😮 ❓

  • Ну, точно туплю по полной! Сообразила! Извините! 😳

  • Здравствуйте,Владимир. Спасибо за форму подписки. Вот что-то не получается убрать рамку вокруг картинки. Не подскажите, что сделать? Картинку планирую поменять.

    • Здравствуйте, Юрий! Нужно подогнать форму подписки под размеры виджета, в вашем случае размер 212×346. Ну а для этого нужно корректировать код формы подписки.

      • Спасибо за ответ. Но, Вы не поняли. В сайтбаре у меня стоит подписка со смартреспондера. А после статей стоит фитбернер (Ваша форма). Вот там и рамка не убирается.

        • Все, понял, я смотрел на главной, а речь шла о форме подписки после статей.
          Нужно в файле style.css найти .art-article img, img.art-article и удалить строку border: solid 1px #DBB700;

          • Спасибо большое, Владимир. Разобрался и настроил под себя. А та строка в файле style.css которую удалил еще за что отвечала? Не навредит ли в дальнейшем?

          • Пожалуйста, Юрий!
            Строка border: solid 1px #DBB700; отвечала как раз лишь только за отображение рамки и ее отсутствие никак не скажется в дальнейшем.

  • Многие сейчас уходят с фидбирнера на респондер. Как вы можете прокомментировать это Владимир?

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

  • Спасибо огромное! Наконец-то у меня нормальная и симпатичная подписка на сайт!

  • Владимир, добрый день!Пытаюсь сделать подписку на своём блоге, всё сделал, как вы учили, но картинки в итоге не отображаются!Файлы cookie в браузере почистил, ничего не изменилось!

  • Полезная информация вашего поста просто клад для юзеров — новичков, спасибо большое!

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

    А вот интересный вопрос, может что порекомендуете. Если на моём сайте много разных рубрик и я мечтаю под каждую рубрику для подписчика сделать так, чтобы он сам решал, на какой подписке или нескольких остановиться. И, соответственно, получать анонсы только с одной или нескольких рубрик. Это было бы супер для меня. Тогда одним про одно, другим про другое, что просто полезная информация, как и название моего сайта, а другим что то платное и т. д.

    Пока, я вижу только разместить от смартреспондера в сайдбаре несколько форм подписки по отдельным рубрикам, но это же …. сами понимаете.

    Такие сервисы то есть, но за деньги и не слабо.

  • Хочу спросить Владимира — как настроить Фид бурнер, чтобы человек сам выбирал, с какой рубрики получать анонсы, а не все подряд?

  • Добрый день! А где взять картинку? Если можно сбросьте

  • Огромнейшее спасибо!!! У меня теперь супер картинка!! Все четко, понятно, без лишнего. Вы- молодец, удачи во всем!

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

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