Создаем адаптивную Landing Page (целевую страницу) — продолжение

В начале нам нужно зарегистрироваться на сервисе Smartresponder, если Вы еще не зарегистрированы в качестве автора рассылок.

Переходим на страницу регистрации https://smartresponder.ru/l_ru/user/reg.html

Smartresponder - выбор тарифного плана

Выбираем тариф Free и заполняем форму регистрации:

Smartresponder форма регистрации

Далее при входе заполняем дополнительную форму

Smartresponder - дополнительная форма

Теперь Вы можете создавать рассылки.

Подробнее о использовании сервиса Smartresponder можно узнать из этого курса.

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

Заходим в меню «Рассылки» — «Создать новую рассылку».

Появляется форма для ввода параметров нашей будущей рассылки.

Smartresponder - форма ввода параметров рассылки

В поле название рассылки вводим: «Шаблон Landing Page — целевой страницы».

Выбираем тематику рассылки: «Коммерческий веб-дизайн».

Язык оставляем русский.

Описание рассылки: «Готовый шаблон Landing Page — целевой страницы с инструкцией по адаптации и подключению к сервису Smartresponder.»

Далее выбираем тип рассылки: «Автоматическая последовательная серия писем».

Имя автора и обратный адрес для связи берутся из данных введенных при регистрации.

Далее можно отметить или снять отметку у параметров:

— Разрешить связываться с Вами со страницы рассылки в каталоге

— Не помещать рассылку в каталог рассылок

Сохраняем форму нажав «Сохранить новую рассылку».

Теперь нам необходимо создать форму подписки на рассылку.

Сделать это можно двумя способами.

Если перейти в меню «Формы» — «Гениратор форм пописки (новый)» мы можем создать форму подписки нового образца.

Но нам нужна старая, т. к. используя её параметры мы сможем фстроить форму подписки в нашу страницу.

Переходим в «Формы» — «Гениратор форм пописки».

Smartresponder - создание формы подписки

Вводим название формы: «Шаблон Landing Page — целевой страницы».

Выбираем соответствующую рассылку.

Далее параметры мы не трогаем, кроме «Счетчик подписчиков» снимем у него галочку, чтобы он не отображался.

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

Пока покидаем сервис Smartresponder и возвращаемся к коду нашей страницы.

Из скопированного года формы подписки нам будут нужны два параметра: uid и did[].

Найти их можно поиском по тексту файла формы пописки и скопировать значения value для каждого из параметров.

Теперь мы должны изменить наш код формы подписки на странице Landing Page.

Он будет иметь вид:

<form action="https://smartresponder.ru/subscribe.html" method="post" class="margin-base-vertical" target="_blank" name="SR_form_2_11">
<p class="input-group">
<span class="input-group-addon"><span class="icon-user"></span></span>
<input type="text" class="form-control input-lg" name="field_name_first" placeholder="Введите ваше имя" autofocus=""/></p>
<p class="input-group">   
<span class="input-group-addon"><span class="icon-envelope"></span></span>
<input type="text" class="form-control input-lg" name="field_email" placeholder="Введите ваш E-mail" value="Введите ваш E-mail"/></p>
<p class="help-block text-center"><small>Мы не будем передавать или продавать третьим лицам ваш электронный адрес.</small></p>
<p class="text-center">
<input type="hidden" name="uid" value="36841">
<input type="hidden" name="tid" value="0">
<input type="hidden" name="lang" value="ru">
<input type="hidden" name="did[]" value="491320">
<input name="script_url_2_11" type="hidden" value="https://imgs.smartresponder.ru/on/0c4d3683566546252a6b5bdf26191bc2910c0cbb/2_11">
<button type="submit" class="btn btn-success btn-lg">Получить</button></p>
</span>
</form>

В строчках добавлены параметры из формы подписки:

<input type="hidden" name="uid" value="36841">
 
<input type="hidden" name="did[]" value="491320">

Теперь полный код страницы.

<!DOCTYPE html>
<html>
<head>
    <title>Twitter Bootstrap - пример Landing Page</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Bootstrap -->
    <link href="http://yandex.st/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
	<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
 
    <link href='http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600' rel='stylesheet'>
 
	<style>
 
		/* http://css-tricks.com/perfect-full-page-background-image/ */
		html {
			background: url(img/tropical_paradise.jpg) no-repeat center center fixed; 
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}
 
		body {
			padding-top: 20px;
			font-size: 16px;
			font-family: "Open Sans",serif;
			background: transparent;
		}
 
		h1 {
			font-family: "Abel", Arial, sans-serif;
			font-weight: 400;
			font-size: 40px;
		}
 
		/* Override B3 .panel adding a subtly transparent background */
		.panel {
			background-color: rgba(255, 255, 255, 0.9);
		}
 
		.margin-base-vertical {
			margin: 40px 0;
		}
 
	</style>
</head>
<body>
	<div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 panel panel-default">
 
                <h1 class="margin-base-vertical">Нужна подписная страница?</h1>
 
    <p>
        Не знаешь как её создать?
    </p>
    <p>
      Всё просто.   
    </p>
 
    <p>
        Введи свой e-mail адрес в поле ниже и получи исходный код данной страницы и инструкцию по ее адаптации.
    </p>
 
    <form action="https://smartresponder.ru/subscribe.html" method="post" class="margin-base-vertical" target="_blank" name="SR_form_2_11">
                    <p class="input-group">
					<span class="input-group-addon"><span class="icon-user"></span></span>
					<input type="text" class="form-control input-lg" name="field_name_first" placeholder="Введите ваше имя" autofocus=""/>
                     </p>
					 <p class="input-group">   
						<span class="input-group-addon"><span class="icon-envelope"></span></span>
                        <input type="text" class="form-control input-lg" name="field_email" placeholder="Введите ваш E-mail" value="Введите ваш E-mail"/>
                    </p>
                    <p class="help-block text-center"><small>Мы не будем передавать или продавать третьим лицам ваш электронный адрес.</small></p>
                    <p class="text-center">
					<input type="hidden" name="uid" value="36841">
					<input type="hidden" name="tid" value="0">
					<input type="hidden" name="lang" value="ru">
					<input type="hidden" name="did[]" value="491320">
					<input name="script_url_2_11" type="hidden" value="https://imgs.smartresponder.ru/on/0c4d3683566546252a6b5bdf26191bc2910c0cbb/2_11">
                     <button type="submit" class="btn btn-success btn-lg">Получить</button>
                    </p>
                    </span>
                </form>	
 
			</div>
        </div>
    </div>
 
</body>
</html>

И вот как она выглядит окончательно.

Twitter Bootstrap - пример Landing Page - окончательный вариант

Посмотреть страницу в действии.

Теперь сохраняем нужные файлы в архив и копируем его на сервер.

А в рассылку добавляем письмо со ссылкой для его загрузки.

Письмо примерно такого содержания:

Здравствуйте!

Благодарю Вас за желание получить шаблон Landing Page.

Загрузить его Вы можете здесь

Инструкцию по шаблону и подключения его к сервису Smartresponder можно найти в заметках на блоге по адресам:

Страница — 1

Страница — 2

После добавления письма протестируйте работу формы подписки.

P.S. — Коммерческий сайт своими руками от и до — это просто! Не верите? Щелкайте здесь — перейти