Делаем форму подписки. Часть 2

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

Для того, чтобы поставить форму на сайт, нужно сначала перевести ее в понятный для браузера формат. Иначе говоря, сверстать на языке html. Для этого подойдет любой редактор, например Notepad++. Если редактора нет, можно воспользоваться стандартным блокнотом Windows.

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

<code><form onsubmit=”return SR_submit(this)” name=”SR_form” target=”_blank” action=”http://www.smartresponder.ru/subscribe.html” method=”post” ></code>

Внешний вид

Теперь необходимо немного поработать над внешним видом формы. В первую очередь укажем ее размеры и добавим фон. После последних кавычек, но перед символом > вставляем тег style и указываем его атрибуты. Например: поставим ширину 250 пикселей, высоту 450, а цвет фона светло-голубой.

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

<code><form onsubmit=”return SR_submit(this)” name=”SR_form” target=”_blank” action=”http://www.smartresponder.ru/subscribe.html” method=”post” style=”width:250; height:450; background-color:#d6dee3″></code>

Обратите внимание, цвет обычно задается в шестнадцатеричном формате. Узнать код цвета можно в программе Photoshop, нажав инструментом «пипетка» на понравившемся цвете, а затем на квадратике активного цвета в нижней части боковой панели. В открывшемся окне внизу после символа # и будет этот код.

Текст-призыв

Далее идет наш текст-призыв оформить подписку на рассылку. Просто поставим его в тег заголовка и выровняем по центру формы:

<code><h3 style=”text-align: center”>Подпишись на рассылку</h3></code>

При желании можно также изменить шрифт, цвет, размер текста.

Оформляем поля

Теперь нужно оформить поля для ввода пользователем своего имени и email адреса. Сделаем не только сами поля, но и надписи-подсказки внутри них, которые будут исчезать при постановке курсора в это поле с помощью следующего кода:

<code><input type=”text” onblur=”if(this.value==”)this.value=this.defaultValue;” onfocus=”if(this.value==this.defaultValue)this.value=”;” value=”Введите Ваше Имя” class=”name” name=”field_name_first” style=”position:relative; left:40″>

<input type=”text” onblur=”if(this.value==”)this.value=this.defaultValue;” onfocus=”if(this.value==this.defaultValue)this.value=”;” value=”Введите Ваш E-Mail” class=”email” name=”field_email” style=”position:relative; left:40″></code>

Для выравнивания поля на середину формы в этом примере был использован тег left со значением 40. Это значит, что левый край поля для ввода расположен в 40 пикселах от края всей формы. Ваша форма будет другого размера, поэтому и значение этого параметра Вам понадобится другое.

Сделать кнопку

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

<code><input type=”submit” value=”Хочуподписаться!” name=”SR_submitButton”></code>

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

В завершение не забываем поставить закрывающий тег нашей формы:

<code></form></code>

Вид нашего кода

После всех этих несложных действий наш код приобрел вот такой вид:

<code><form onsubmit=”return SR_submit(this)” name=”SR_form” target=”_blank” action=”http://www.smartresponder.ru/subscribe.html” method=”post” style=”width:250; height:450; background-color:#d6dee3″>

<h3 style=”text-align: center”>Подпишись на рассылку</h3>

<input type=”text” onblur=”if(this.value==”)this.value=this.defaultValue;” onfocus=”if(this.value==this.defaultValue)this.value=”;” value=”Введите Ваше Имя” class=”name” name=”field_name_first” style=”position:relative; left:40″>

<input type=”text” onblur=”if(this.value==”)this.value=this.defaultValue;” onfocus=”if(this.value==this.defaultValue)this.value=”;” value=”Введите Ваш E-Mail” class=”email” name=”field_email” style=”position:relative; left:40″>

<input type=”submit” value=”Хочуподписаться!” name=”SR_submitButton”>

</form></code>

Размещаем код на сайт

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

Правда, воспользоваться ей пока нельзя. Тому, как привязать форму подписки к сервису Smartresponder, посвящен следующий урок.

Если Вы желаете развивать свой сайт по специально разработанной для этого программе, станьте студентом нашего Тренинг-Центра.

Делитесь информацией с друзьями.