Форма подписки + бесплатный виджет (JustClick)

Форма подписки + бесплатный виджет (JustClick) для Adobe Muse.

При создании в Adobe Muse страниц подписки, лэндингов, посадочных страниц или страниц захвата, как их еще называют, возникает необходимость разместить  на них форму подписки. Форма подписки (ее код) генерируется сервисами рассылок и используется для сбора базы адресов на сервисе рассылок для дальнейшего взаимодействия с вашей целевой аудиторией через рассылку электронных писем.

Часто дизайн форм подписки таких сгенерированных форм не подходит под общий дизайн страницы, при этом сервисы рассылок не блещут разнообразием дизайнов форм подписки.

Для дизайна подписных форм одного из таких сервисов рассылок (в данном случае это одна из функций сервиса JustClick) используется специальный виджет, позволяющий изменять дизайн формы подписки прямо в Adobe Muse. Об этом также данный видеоурок.

СКАЧАТЬ БЕСПЛАТНЫЙ ВИДЖЕТ “Justclick Форма”
Регистрация на сервисе JustClick

Содержание видео:
00:15 – что понадобиться для вставки формы подписки
00:49 – где взять код формы подписки (JustClick)
01:19 – вставка кода формы подписки в программу Adobe Muse любого сервиса рассылок, самый простой способ.
01:56 – особенности вставки кода в Adobe Muse вставка кода формы подписки в Adobe Muse другим простым способом.
02:36 – скудность дизайна форм подписки Justclick? – есть решение! – бесплатный виджет!
03:05 – обзор блоков виджета JustClick форма.
04:10 – настройка виджета (вставка частей кодов формы)
07:54 – настройка дизайна формы подписки (средствами виджета)
09:47 – смотрим результат, ссылки и заключение.


Форма подписки. Введение.

В этом видеоуроке мы рассмотрим, как вставить форму подписки на сайт в программе Adobe Muse. Для того чтобы нам это сделать, нам естественно понадобится код формы подписки, который генерируется на сервисе рассылок и также понадобится программа Adobe Muse. А поскольку мы будем рассматривать вставку кода формы подписки на сайт в Adobe Muse на примере сервиса рассылок JustClick, то нам может понадобится еще один небольшой виджет, о котором я расскажу чуть позже.

Форма подписки. Генерируем код формы на сервисе.

Итак, давайте начинать. Открываем программу Adobe Muse. У меня здесь подготовлен небольшой проект для того, чтобы страница не выглядела пустой. И именно сюда мы будем вставлять форму подписки. В принципе, здесь все очень просто. Код формы подписки сгенерирован у нас на сервисе JustClick в разделе «CRM», в котором есть раздел «Формы подписки».

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

Форма подписки. Вставка кода в Muse. Самый простой способ.

Мы копируем этот код, нажимая «Копировать» и вставляем в программе Adobe Muse в нужное место на странице. Например, вот здесь нажимаем «Вставить». Таким образом, мы разместили нашу форму подписки на странице сайта в программе Adobe Muse. Не смотрите, что сейчас здесь такая белая полоса, ее видно не будет. Если мы нажмем режим «Просмотр», то здесь увидите, что форма подписки вставилась и все нормально. Вот таким образом, вы сможете вставить любую  форму подписки с любого сервиса рассылок, просто скопировав код на сайт в программе Adobe Muse.

По сути дела, мы разместили здесь встроенный HTML элемент. Мы могли бы зайти в «Объект», нажать «Вставить HTML» и вставить вот здесь код нашей формы подписки. Нажимаем «ОК», и точно таким же способом у нас разместился бы данный элемент – данная форма подписки. Но мы сделали немного проще, просто правой кнопкой мыши вызвали контекстное меню и нажали «Вставить код». Программа Adobe Muse сама распознала код и вставила его как встроенный HTML элемент. Это один из способов размещения кода подписки в программе Adobe Muse.

Форма подписки. Ограниченность дизайна форм подписки JustClick.

Что касается сервиса рассылок JustClick, то он очень ограничен по дизайнам формы. И для того чтобы расширить данный функционал мы можем использовать специальный виджет. Данный виджет вы сможете скачать бесплатно на сайте muwilab.ru. Виджет называется «JustClick форма». Виджет бесплатный и его использование никак не ограничено. Ссылка на скачивание виджета.

Форма подписки. Обзор настроек виджета формы JustClick.

А сейчас мы снова зайдем в программу Adobe Muse. Удалим здесь этот встроенный HTML элемент. И поскольку я уже добавил в программу виджет «JustClick форма», то вы можете здесь увидеть, что он содержит три элемента:

  • Первый элемент – здесь расписаны настройки использования данного виджета.
  • Следующий элемент – это блок кода формы, которую будет необходимо разместить на странице.
  • И блок настроек формы, который также будет необходимо разместить в проекте Adobe Muse на странице вашего сайта.

Форма подписки. Настройка кодов в виджете формы JustClick.

Давайте сейчас это и сделаем. Я размещаю блок кода формы на странице сайта вот сюда. Блок кода формы – это, по сути, и сесть сама форма, т.е. я вот здесь ее вставляю – это и есть сама форма. Сейчас на ней ничего не будет, поскольку код сюда не вставлен. И блок настроек формы. Как раз таки блок настроек формы и позволит нам редактировать дизайн формы: дизайн его элементов, дизайн кнопок и полей. Его можно размещать где-нибудь за пределами страницы, чтобы он не мешал и не перекрывал основной контент. При экспорте сайта этого блока видно не будет. Будет виден только блок кода формы.

Вставка первой части кода.

В настройке кода блока формы нам необходимо вставить три элемента. Все три элемента можно взять из кода формы, которую сгенерировал сервис JustClick. У меня данный код сохранен в блокноте. Выглядит данный код вот так, он очень длинный. И из этого всего кода нам понадобится только две его части. Первая часть заключена между тегами <div> и <style>. Давайте я нажму здесь «Enter», чтобы пропустить поля. Вот эта часть кода нам обязательно понадобится. И следующая часть кода размещена снизу и располагается между тегами таблицы. Начинается он вот здесь и заканчивается точно таким же закрывающим тегом. Вот эта часть кода нам также понадобится.

Давайте я сейчас скопирую данный элемент. Нажимаю «Копировать» и вставлю его в блок кода формы в настройке. Этот код у нас должен располагаться вот здесь. Здесь написано: «Вставьте вместо этого текста часть кода, сгенерированной формы JustClick от вот этих тегов включительно». Я удаляю все, что здесь есть и вставляю эту часть кода. Вот вы видите, что все, что я скопировал, вставилось сейчас сюда. Обязательно после вставки данного кода нажмите «Enter», чтобы виджет заполнил данную вставку.

Вставка второй части кода.

Вот это поле в код формы JustClick  необходимо вставить код, расположенный между тегами <div> до <style>. Давайте скопируем данную часть кода,  она была сверху та часть кода, которую я вам показывал. Нажимаю «Копировать». Захожу снова в блок кода формы в его настройки. Выделяю все, что здесь написано, нажимаю «Delete», чтобы удалить, и нажимаю «Вставить код». И необходимо также нажать «Enter», чтобы виджет заполнил данный код.

Ваш логин на JustClick

Теперь нам нужно заполнить поле «Ваш логин на JustClick». Этот логин вы также берете из кода формы подписки JustClick. Находится он вот здесь, где начинается тег <form action>. И написано: «//shop.urokimuse.ru». И вот это то, что до первой точки (shop) вам нужно скопировать и вставить вот сюда – нажимаем «Вставить». После чего обязательно нажимаем «Enter» еще раз. Таким образом, мы получили размещенную форму подписки JustClick на своем сайте в Adobe Muse.

Форма подписки. Настройка дизайна виджета формы JustClick.

Подключаем виджет к форме JustClick для дизайна.

Давайте посмотрим, что сейчас получилось. Нажимаем «Просмотр» и видим, что наша форма совсем невзрачная. Для того чтобы это исправить нам необходимо отредактировать блок настроек формы. Мы заходим в настройки видим, что здесь очень много настроек. И первым делом, нам нужно привязать этот блок кодов настроек к нашей форме JustClick. Делается это через «Ваш номер формы на JustClick». Сейчас здесь по умолчанию цифры – 1234. Нам же необходимо взять четырехзначный код формы и вставить его вот сюда. Его мы можем взять также из кода формы. Располагается он вот здесь. В первой строке написано: «id=”subscr-block-7960”.

Вот эту цифру вам необходимо скопировать в блок настроек формы ваш номер формы на JustClick. Удаляю все, что здесь есть и пишу здесь: «7960», нажимаю «Enter». Теперь мы привязали данные настройки, все настройки, которые здесь к форме подписки. Если вы зайдете в настройки формы подписки, вы увидите, что здесь тот же самый код и вот этот блок под номером 7960 в коде.

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

Кстати, используя данный виджет «JustClick форма», я разместил форму подписки JustClick на своей странице подписки. Если вы не подписывались, то можете подписаться и заодно проверить, как все работает. Вы видите, что дизайн формы я как раз настраивал с помощью данного виджета.

Редактируем дизайн в виджете формы JustClick.

Теперь все, что остается нам делать – это просто брать и редактировать все эти поля. С помощью их мы можем гибко настроить любой дизайн для данной формы подписки, сгенерированной сервисом JustClick. Мы можем регулировать ширину кнопки, высоту кнопки, выбирать цвет кнопки: причем два цвета – один, когда кнопка находится в стандартном состоянии и второй, когда курсор находится над кнопкой. Также можем редактировать ширину обводки кнопки, цвет обводки. Цвет обводки также в двух состояниях, когда кнопка в стандартном состоянии и когда курсор находится над кнопкой. Кроме того, мы можем скруглить кнопке углы. Давайте, например, попробуем это сделать. Поставим здесь – 10. Изменить размер текста кнопки и его шрифт.

Настройка кнопок формы.

Следующий блок – это вот эти четыре настройки. Они отвечают за тень кнопки. Если вы хотите включить тень, поставьте вот здесь галочку и вам станут доступны все настройки. Вы в них сможете выбрать направление тени, размытие тени и выбрать цвет.

Настройка полей формы.

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

Форма подписки. Просмотр конечного результата.

Вы видите, что я поставил скругление, поставил галочку для тени. И теперь наш текст в полях формы располагается по центру. Вот таким вот образом, осуществляется вставка кода формы подписки на сайт в программе Adobe Muse. А для формы, сгенерированной сервисом JustClick, вы сможете использовать данный виджет. Скачать вы его сможете по этой ссылке.

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

 

Автор видеоуроков и курсов
Дмитрий Шаповалов

Оставьте комментарий

Подтвердите, что Вы не бот — выберите самый большой кружок: