Создаем красивую форму подписки на smartresponder

У многих более-менее опытных блоггеров существует личная почтовая рассылка на smartresponder. Оформление подписки на нее – это не оформление на обновления блога по RSS, но привлечение трафика и заработок с помощью этой рассылки очень эффективен, когда у автора рассылки имеются собственные сайты.

К сожалению форма подписки, которую предоставляет сервис smartresponder, как бы вы ее не редактировали на этом сайте, далека от совершенства и выглядит примерно так:

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

Главное – тот принцип, о котором я хочу рассказать.

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

Выбираете название, определяете фразы, вводимые в фому…

Затем приступаете к оформлению самой формы: Поколдовав, получаете код: Весь смысл сводится к тому, что бы сделать необходимые замены в этих трех кодах, отвечающих за вид вводимых слов в форме подписки. Фразы  “Ваш e-mail”, “Ваше имя” и “Подписаться”(или что-то вроде этого), нужно заменить на картинки.

Вот исходные коды в форме подписки, которые нужно заменить:

[stextbox id=”grey”]

<tr><td style=”font-family: Verdana; font-size: 8pt; color: #000000; font-weight: bold;” align=”center”>Ваш e-mail:&nbsp;<font color=”#ff0000″><b>*</b></font></td></tr>
<tr><td style=”font-family: Verdana; font-size: 8pt; color: #000000; font-weight: bold;” align=”center”>Ваше имя:&nbsp;<font color=”#ff0000″><b>*</b></font></td></tr>
<tr><td align=”center”><input name=”SR_submitButton” type=submit style=”font-family: Verdana; font-size: 8pt; color: #000000; font-weight: bold;” value=”Подписаться”></td></tr>

[/stextbox]

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

img src=”http://ваш_домен/папка/имя картинки.jpg

Способов загрузки несколько, но я поделюсь своим, на мой взгляд самым простым. В админпанели, заходим в “Медиафайлы” и загружаем их. Теперь, в окне, где они представлены, выбираете по очереди в библиотеке медиафайлов,

наведя курсор ниже файла и нажав на “изменить”,  в открывшемся окне внизу будет та самая ссылка на файл( адрес картинки).

Вот как эти картинки выглядят у меня( не смеяться! у меня даже фотошопа сейчас нет :))

 

 

<img src=”https://prt56.ru/wp-content/uploads/2012/04/64.jpg> –ваш e-mail

<img src=”https://prt56.ru/wp-content/uploads/2012/04/74.jpg> – ваше имя

<imag src=”https://prt56.ru/wp-content/uploads/2012/04/86.jpg> – подписаться

А затем сделайте соответствующие замены в вышеуказанных вначале статьи  выделенные жирным коды на вновь созданные.

Вот как будут представлены теперь эти коды. Ими нужно будет заменить в общем коде формы подписки старые.

 

[stextbox id=”grey”]

<tr><td align=”center”><p><input type=”image” src=”https://prt56.ru/wp-content/uploads/2012/04/64.jpg” /></p></td></tr>

<tr><td align=”center”><p><input type=”image” src=”https://prt56.ru/wp-content/uploads/2012/04/74.jpg” /></p></td></tr>

<tr><td align=”center”><p><input name=”SR_submitButton” type=”image” src=”https://prt56.ru/wp-content/uploads/2012/04/86.jpg“></p></td></tr>

[/stextbox]

А теперь заменяем коды в созданной форме подписки  на smartresponder. Должно получиться что-то вроде этого.

 Примечание: при создании формы, я выбрал белый фон и убрал рамку. Быть ли им на вашей форме, решайте сами.
А вот что рекомендует в своем видео подкасте Александр Новиков, чтобы создать красивую форму подписки на smartresponder:

Вот и все, дерзайте!

(Visited 2 times, 1 visits today)

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

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