Красива форма підписки для вашого сайту!

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

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

З такими формами ми будемо значно виділятися з загальної маси всієї інтернет натовпу! Розповім вам, в чому різниця між звичайними (стандартними) формами і формами, які ви створите після вивчення моєї статті.

Серед вас напевно є ті, у кого немає взагалі форми підписки на сайті, не те що б красивою, а взагалі ніякої! І це дуже сумно, зараз епоха підписних баз, потрібно обов'язково мати свою передплатну базу (розсилку) і не просто що б вона була, а її потрібно постійно збільшувати. В рази! Наявність підписаний бази зараз вирішує багато, це і є ваш актив, то, що буде постійно класти денюшку до вас у кишеню.

Як створити форму підписки (для новачків!)

Але спочатку створимо канал для нашої майбутньої форми підписки, потім ви зрозумієте навіщо він потрібен, я поясню!

Переходимо на вкладку «Статистика» - «Канали для форм підписки»

Тут ви можете прописати назву вашого каналу відповідно до того, де буде використовуватися форма підписки, навіщо, чому і т.д. Все що захочете, пишіть як вам завгодно, суть в тому, що б вам було легше розібратися, де знаходиться та чи інша форма підписки на вашому сайті або сайтах, або сторінках курсів, книг і тому подібного! Просто зробіть так, потім все стане ясно ...

Максимум 16 символів, тільки букви латинського алфавіту і цифри. Чи не придумуйте нічого секретного, це просто код каналу, 4 символу цілком достатньо!

Натискаємо кнопку «Створити». Відмінно!

Тепер переходимо на вкладку «ФОРМИ» і вибираємо пункт «Генератор форм підписки»

Потрапляємо на сторінку генерації форми підписки

Дана сторінка розділена на три області (три блоки), в першій безпосередньо перебувати генератор, в другій області, яка називається «Зовнішній вигляд форми» ми будемо переглядати результат того що ми робимо, бачити форму. І в третьому, нижньому блоці буде знаходитися код нашої з вами новоствореної форми підписки, який необхідно вставити в код шаблону нашого сайту!

Ось повний скріншот сторінки генератора форм, натисніть на нього, і він відкриється на іншій сторінці!

1. Тут ви просто даєте назву формі передплати (як шаблоном), наприклад в залежності від того зовнішнього вигляду, які ви хочете для неї створити.

Ввели? Молодці! Натискаємо зберегти!

Приступаємо до налаштування форми підписки!

2. Вибираємо розсилку, для якої безпосередньо буде створена нами форма підписки для відвідувача. У цьому списку будуть показані всі ваші розсилки, якщо у вас вона одна, значить буде показана тільки одна. Вибираємо її і вперед!

3. Ми відразу створили канал, ми молодці, хоча на перших порах можна прекрасно обійтися без нього, але я поясню вам, навіщо це потрібно.

Канал підписки необхідний для того що б відстежувати ефективність тієї чи іншої форм підписки. Все дуже просто, у вас може бути дві або три форми підписки для однієї розсилки, розташовані в різних місцях інтернету, в тому числі і на інших ваших сайтах, але, повторюся, все вони будуть збирати вам передплатників в одну розсилку. Тут то нам і стане в нагоді використання різних каналів, тобто ви задаєте всім формам підписок різні канали і контролюєте тепер, скільки передплатників йде через ту чи іншу форму підписки. Тобто один і той же код створеної вами форми підписки, але з різними каналами в цьому коді.

Отже, тут потрібно вибрати назву каналу, він у нас створений, вибираємо і йдемо далі.

Ці поля обрані вже за замовчуванням, тому йдемо далі.

5. Тут практично все відноситься до зовнішнього вигляду форми підписки.

Якщо у вас буде кілька розсилок, то можна вибрати кілька і тоді вони будуть надані на вибір передплатнику в формі підписки.

Ну ось і все, стандартна форма підписки у нас готова!

В області «Зовнішній вигляд» ми бачимо все що створили.

На виході, після того як ми створили форму підписки за допомогою генератора ми отримуємо такий код:

Цей код ми будемо мучити! А якщо бути точніше, ту його частину, яка знаходитися в тезі

. У ньому то і знаходяться всі параметри, які відповідають за зовнішній вигляд, а також ідентифікатор вашої розсилки і каналу (код каналу). Якщо такий вами створений і обраний в процесі генерації форми підписки. Ось так!

А тепер основна частина статті!

Отже, беремо код простий стандартної форми підписки від сервісу Smartresponder.ru:

У цьому коді ви можете змінити розташування цього напису, зробити так що б вона відображалася зліва, справа або по центру як це зазначено зараз. Для цього вам необхідно змінить атрибут елемента align = "left, center, right". Можете змінити шрифт, це тут, в елементі style = "font-family: Verdana;". розмір шрифту, теж в цьому ж елементі.

Тут буде значно гарніше, якщо в елемент style додати border: 1px solid #BBB; це створить рамку навколо поля. Можете змінити колір або розмір рамки!

Третій код, відповідає за виведення написи «Ваше ім'я: *»

Ваше ім'я: *

Цей напис можна відредагувати також як і в першому випадку.

Сново код. який ввиводіт текстове поле:

Можете змінити це поле як і в другому випадку.

Нарешті добралися до кнопки форми:

Кнопка виглядає так тому що у неї є свій власний стиль. У тезі input ви можете побачити цей стиль: id = "названіе_ідентіфікатора_стіля" Стиль в файлі style.css і має він у такому значенні:

border: 1px solid #fffffd;

box-shadow: 0 0 5px # 999997;

background-image: -webkit-gradient (linear, left top, left bottom, color-stop (0, white), color-stop (100%, # EDEDED));

Можете скопіювати і додати собі такий же стиль, в файл style.css, тільки обов'язково назвіть його! І пропишіть в тег input> коду кнопки, вашої форми підписки. Будь-яку кнопку можна тут створити! Потрібна графіка і кілька прийомів.

Наприклад ось ще кнопка з графікою, тобто два зображення. При наведенні курсора на кнопку, одне зображення змінюється іншим: