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

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

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

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

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

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

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

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

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

<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>

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

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

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

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

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

 

 

<img src=»http://prt56.ru/wp-content/uploads/2012/04/64.jpg> —ваш e-mail

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

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

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

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

 

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

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

<tr><td align=»center»><p><input name=»SR_submitButton» type=»image» srchttp://prt56.ru/wp-content/uploads/2012/04/86.jpg«></p></td></tr>

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

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

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

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

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