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

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

Сейчас редко кто не использует форму подписки. Ее можно встретить практически на всех сайтах и блогах. И это не удивительно, ведь подписчики это:

• Постоянные посетители;
• Дополнительный целевой трафик;
• Клиенты ваших товаров и услуг;
• Партнеры по бизнесу;

Существует немало сервисов, через которые можно генерировать формe подписки и автоматически рассылать письма подписчикам. Но я бы хотел выделить Google Feedburner. Этот сервис позволяет сгенерировать форму подписки, ленту RSS и автоматически отправляет письма вашим подписчикам на e-mail при появлении новой статьи на вашем блоге.

Feedburner очень гибок в настройке и имеет множество функций. Но я покажу лишь основное.
В первую очередь вам нужно зарегистрировать аккаунт в Google, если его еще нет. Если все в порядке, то переходите по ссылке и вводите свои данные от Google.

Чтобы вам было понятнее, сразу измените язык.

Перед вами должна быть надпись «Зажигай фид прямо сейчас». Здесь вам необходимо ввести адрес своего сайта и нажать кнопку «NEXT».

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

http://адрес сайта/feed

Затем вы можете задать название и адрес фида. Я оставил по умолчанию.

На этом завершен первый этап настроек. Вас поздравляют, у вас появилась своя RSS лента, которую можете посмотреть перейдя по ссылке, данной сервисом Feedburner.

Теперь приступаем ко второму этапу, в котором необходимо настроить форму подписки.

На открывшейся следующей странице, появилось горизонтальное меню с надписями – анализируй, оптимизируй, публикуй, решай проблемы. При помощи этого меню, мы и будем делать следующие настройки.

Перейдите во вкладку «Публикуй», «Подписки по электронной почте».

Если у вас еще не активна эта услуга, нажмите «Активировать» на открывшейся странице.

Для вас уже сгенерирован код формы подписки, который можно скопировать и вставить себе на сайт, Что я и сделал.

Но предоставленный сервисом код, не делает форму подписки симпатичной. У меня получилось вот что:

Следующей задачей, является редактирование кода и улучшение его вида. В первую очередь нужно перевести форму с английского на русский и удалить ссылку на сервис Feedburner.

  
Enter your email address:
  
      Subscribe" />  
Delivered by FeedBurner  

Вместо надписи «Enter your email address:», в коде пропишите «Введите свой e-mail».

Вместо надписи «Subscribe», впишите «Подписаться».

В конце кода, удалите следующую часть:

Delivered by FeedBurner

У вас должно получиться примерно так:

Теперь нам нужно вставить фоновую картинку, поменять цвет кнопки и вставить кнопки социальных сетей.

Загрузите фоновое изображение на свой хостинг. Можете скачать вот это:

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

Шаг 1. Заключите код Feedburner в теги

Шаг 2. Удалите в начале кода формы стиль:

style="border:1px solid #ccc;padding:3px;text-align:center;"

И вместо него вставьте вот этот:

class="burner_form"

В результате у вас должен получиться вот такой код:

  
  
Введите ваш e-mail:
  
        
  

Скопируйте и вставьте следующий код в файл style.css

.subscribe {  position: relative;  width: 280px;  height: 360px;  background: url(ссылка на фоновое изображение) no-repeat top center;  overflow: hidden;  }    .burner_form {  width: 230px;  height: auto;  padding: -10px 30px 40px 0px;  margin: 172px 0px 0px 25px;  text-align: center;  }  

Теперь наша форма подписки приобрела более приятный вид. Осталось только добавить кнопки соц. сетей.

 

Добавляем кнопки соц. сетей в форму подписки

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

1. Загрузите на свой хостинг изображения иконок соц. сетей необходимого размера.

2. Скопируйте и вставьте HTML код под кодом формы подписки, вставив в код свои ссылки:

Давайте дружить:
    
            
  

Аналогичным способом можно добавить другие иконки или изменить эти.

Все вопросы можете задать в комментариях. С удовольствием отвечу на них.