Как сделать форму подписки с картинкой

Создаем форму подписки с картинкой в Смартеспондер и устанавливаем на блог

Здравствуйте дорогие друзья и гости моего блога!

В продолжение темы создания и установки формы подписки сервиса Смартреспондер на блог на Блогспот и Вордпресс мы сегодня более подробно рассмотрим некоторые моменты, которые связаны со вставкой изображения в саму форму.

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

Чтобы иметь представление о том, как будет выглядеть наша форма, нужно сначала выбрать понравившийся нам шаблон и в конструкторе во вкладке "Обязательные настройки формы" в последнем 5 шаге "Фон формы" выделить чекбокс "Картинка" и загрузить любое изображение.

В моем случае этот вариант не подходит так, как изображение обложки книги смотрится, мягко говоря, глупо, а вот картинка по теме похудения выглядят более-менее прилично, несмотря на то, что поле для заполнения и кнопка располагаются в центре.

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

Если же говорить о варианте, который предложила Вика Барад в комментарии к прошлой статье, а именно в одном гаджете HTML/JavaScript объединить код формы подписки и изображение, то конечно можно, только нужно будет учесть один момент.

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

Когда мы с вами устанавливали на блог форму подписки сервиса Джастклик, то устанавливали только изображение обложки в сайтбаре с помощью гаджета "Изображение", в котором была ссылка на страницу подписки. Человек кликал по ней, и его перебрасывало на страницу, созданную на этом сервисе.

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

В мое случае это страница "Обо мне", вы же можете сделать, например страницу "Рекомендую", на которой сделаете краткое описание вашего продукта или предложения.

Итак, код:

<center><a href="адрес страницы, куда должна вести ссылка" target=_blank><img src="адрес изображения " border="2" title="пояснительный текст " width=50 height=15></a></center>

Вместо "адрес страницы, куда должна вести ссылка"  вставляю скопированный адрес (URL) страницы "Обо мне".

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

Не забываем изменить размер картинки так, чтобы она соответствовала размеру формы. Высота в коде - width и ширина - height. 

Ну и конечно пишем свой пояснительный текст на русском. 

Теперь переходим во вкладку "Дизайн", добавляем гаджет HTML/JavaScript и в открывшемся окошке вставляем сначала получившийся код картинки и ниже сгенерированный на сервисе Смартреспондер код формы подписки. Сохраняем и проверяем, как располагается и смотрится форма в сайтбаре, нажав на вкладку "Просмотр".

Если к ней претензий нет, то проверим, как функционирует наше изображение. Чтобы проверить работоспособность ссылки нужно зайти на блог и кликнуть по картинке. Моя ссылка работает корректно, можете проверить :), а это значит все, было сделано правильно.

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

Кстати, для тех, у кого тематика блога связана с творческой деятельностью, то рекомендую небольшой мастер-класс "Как сделать красивую подписную форму для вирусных открыток". Пусть вас не смущает то, что для вирусных ведь нам нужна идея и пошаговая инструкция по созданию подписных форм :) 

На этом процесс освоения технических моментов создания основного элемента рассылки можем считать завершенным.

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

С уважением Ирина Иванова