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

Для того, чтоб поставить форму на веб-сайт, необходимо поначалу перевести ее в понятный для браузера формат. По другому говоря, сверстать на языке html. Для этого подойдет хоть какой редактор, к примеру ++. Если редактора нет, можно пользоваться обычным блокнотом 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, посвящен последующий урок.

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

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