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

На предыдущем шаге мы создали и настроили всплывающую подписную форму. В этой статье разберём, как установить форму подписки на сайт Mobirise и проверим её работоспособность.

Напомню, что это серия статей про создание сайта в конструкторе. И у нас уже есть сайт, который находится на хостинге и есть форма подписки, которую мы создали ранее в сервисе Sendsay.ru. Предыдущий шаг — Как создать и настроить всплывающую форму подписки для сайта, смотрите здесь →

Как установить всплывающую форму подписки

Итак, чтобы форма заработала и начала приносить подписчиков – нужно вставить её на сайт.

Для этого заходим в нашу Форму подписки на сервисе Sendsay.ru → переходим во вкладку «Код для установки» → видим два окна с кодами:

  • Первый код из первого окна нужно вставить в шапку / хедер нашего сайта, чтобы форма подписки отображалась и работала.
  • Второй код нужно добавить в наши кнопки, при нажатии на которые должна всплывать форма подписки:
Как установить форму подписки на сайт Mobirise

Код скрипта всплывающей формы

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

  • Чтобы вставить коды на сайт — идём на Хостинг → Файловый менеджер → ваш домен.ru/public_html/ваша папка с сайтом → index.html

У меня этот путь выглядит так — 1122333.ru/public_html/test → index.html:

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

В файл index.html будем вносить изменения.

  • Открываем файл index.html и находим тег <head> → ставим курсор после него и жмём клавишу Enter, чтобы появилась новая строка для внесения кода:
Как установить форму подписки на сайт Mobirise

↓↓↓

Как установить форму подписки на сайт Mobirise
  • Идём на сервис Sendsay.ru и копируем код формы из первого окна:
Скрипт сервиса рассылок устанавливаем в шапку сайта
  • Идём на Хостинг в файл index.html и вставляем этот код в новую строку после <head> и сохраняем изменения:
Скрипт сервиса рассылок устанавливаем в шапку сайта

Код кнопки всплывающей формы

Второй код из второго окна – это атрибут формы подписки, который нам нужно добавить в код нашей кнопки. Когда посетитель нажмёт на эту кнопку, то появится всплывающая форма подписки.

  • Сейчас нам нужно найти код наших кнопок. У нас их две. Ищем всё в том же файле index.html элементы кода со следующими значениями – btn – и надписью, которая была на кнопке вашего сайта.

У меня на сайте это выглядит так:

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

В файле index.html кнопки выглядят так:

Код кнопки

Первая верхняя кнопка находится у меня в 56 строке. У вас это может быть другая строка.

Здесь нам нужно удалить часть кода, в котором находится ссылка. (У меня это href=«http://1122333.ru/test» target=«_blank»)

Очень внимательно удаляйте! Не больше и не меньше!

И вставить на это место атрибут (вторую часть кода) с сервиса Sendsay.ru.

  • Копируем вторую часть кода:
Код кнопки
  • Идём на хостинг и вставляем в код первой кнопки скопированный атрибут:
Как установить форму подписки на сайт Mobirise
  • Сохраняем изменения в файле index.html:
Сохранить изменения
  • Идём на наш сайт в интернете, обновляем страницу и проверяем, что получилось.

При нажатии на верхнюю кнопку, куда мы только что вставили код формы – всплывает форма подписки. Можно уже заполнить свои данные и проверить как работает:

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

Но, у меня на сайте есть ещё одна кнопка. Давайте найдём её код и отредактируем, так же, как и первую. Код второй кнопки у меня находится в 83 строке (у вас может быть другая строка).

  • Удаляем часть кода, в котором стоит ссылка:
Код второй кнопки
  • И вставляем второй код – атрибут, как у первой кнопки и сохраняем:
Код второй кнопки

Проверяем как всё работает

Сейчас нам нужно проверить как всё это работает на нашем сайте.

  • Идём на сайт → обновляем страницу и проверяем работу кнопок. У меня при нажатии на обе кнопки – всплывает форма подписки.
  • Заполняем свои данные и проверяем, как всё работает, правильно ли всё настроено:
Проверяем работу формы подписки

Я оформила подписку на доменную почту. Но, также подписалась и на ящик майл – всё работает. Теперь иду в ящик и проверяю. Мне пришло письмо – подтверждение:

Проверяем работу формы подписки

Открываю его и подтверждаю подписку:

Проверяем работу формы подписки

↓↓↓

Проверяем работу формы подписки

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

Проверяем работу формы подписки

Открываю:

Тестируем настройки формы подписки

Жму на кнопку «Скачать сборник» и меня перекидывает по ссылке, которая зашита в кнопке, на Яндекс диск, где я разместила подарок за подписку:

Тестируем настройки формы подписки

На этом наши настройки закончены. Сайт создан, форма подписки работает!

Важно!

  • Если вы вносите изменения в программе — конструкторе, а затем снова загружаете сайт на хостинг, то все эти скрипты и коды формы нужно устанавливать заново!
  • Если вы удалили лишнюю часть кода – не страшно. Просто либо закройте файл index.html не сохраняя его, либо заново выгрузите свой сайт из конструктора на хостинг, откройте редактор кода и сделайте всё сначала по инструкции.
  • Каждый раз, после внесения изменений на сайт – обновляйте страницу в браузере и проверяйте как всё работает! Если в конструкторе что-то поменяли, выгрузили сайт на хостинг, а там этих изменений не видите, то чистите кэш браузера, либо открывайте сайт в новом окне в режиме инкогнито.
  • Если что-то не получается в рамках сервиса Sendsay.ru или любого другого сервиса, на котором вы создаёте подписную форму – обращайтесь в службу поддержки этого сервиса.

Думаю, что вы разобрались с тем, как установить форму подписки на сайт Mobirise и она у вас работает. Если что-то не получается, то сделайте всё сначала, ещё раз прочитав материал. У вас обязательно получится, если вы этого хотите!

Text.ru - 100.00%

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

Если вы хотите установить на сайт не всплывающую, а встроенную форму подписки, то нужно на этапе создания и настройки формы установить флажок в соответствующей ячейке «Встроенная форма»:

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

В остальном настройки встроенной формы точно такие же, как у всплывающей.

Как создать и настроить форму подписки — смотрите в предыдущей статье: Как сделать форму подписки на рассылку для сайта | от Sendsay →

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

Создание и установку формы подписки на сайт будем делать на примере того же сервиса Sendsay.ru.

Для встроенной | статичной формы я создала ещё один сайт, назвала его – test2 – на котором и будем экспериментировать.

Сайт беру тот же — «Здоровая спина», но оставила только одну кнопку с предложением скачать сборник.

  • Форма подписки у нас будет вместо кнопки «Скачать сборник»:
Как установить встроенную форму подписки

Создание встроенной формы

  • Идём на сервис Sendsay.ru и создаём новую форму, только тип формы выбираем «Встроенная»:
Как установить встроенную форму подписки
  • Настройки оставляем по умолчанию:
Настройки встроенной формы подписки
  • Заходим в редактор формы, убираем текстовые блоки, путём перетаскивания их влево. Оставляем только поле Email и кнопку:
Настройки встроенной формы подписки
  • Кнопку также редактируем, как и во всплывающей форме. И все остальные настройки и данные выполняем те же.

Код скрипта встроенной формы

  • Дальше форму активируем и идём во вкладку «Код для установки», которые нам нужно вставить в наш сайт на хостинге:
Как поставить на сайт встроенную форму подписки
  • Идём на хостинг → Файловый менеджер → наш сайт → public_html → test2 → открываем файл index.html:
Как поставить на сайт встроенную форму подписки
  • Находим тег <head>, делаем отступ и вставляем скрипт из первого окна от сервиса рассылок. Сохраняем:
Код скрипта встроенной формы

Код встроенной формы

  • Дальше ищем в коде нашу кнопку. У меня это 81 строка. Удаляем часть кода с кнопкой:
<a class="btn btn-md btn-success display-7" href="http://1122333.ru/test" target="_blank"><span class="mbri-save mbr-iconfont mbr-iconfont-btn"></span>СКАЧАТЬ СБОРНИК</a>

↓↓↓

Код встроенной формы
  • И вставляем на это место, где мигает курсор — код формы из второго окна с сервиса рассылок:
Код встроенной формы

Проверяем и корректируем встроенную форму

  • Сохраняем. Идём на сайт, обновляем страницу и смотрим что получилось:
Как установить форму подписки на сайт Mobirise

Форма встала, но получилось не очень эстетично. Поэтому нужно играть с настройками сайта и самой формы.

Если Вы будете менять только форму на сервисе рассылок, то на сайте ни чего трогать не надо – изменения подтянутся сами.

  • Ниже я поменяла форму только на сервисе Sendsay.ru. Зашла в редактор формы, уменьшила ширину, скруглила углы формы. Получилось аккуратней.

На самом сайте изменения не вносила, просто обновила страницу и увидела, как выглядят изменения:

Как установить форму подписки на сайт Mobirise
  • Если хотите добиться эффекта, чтобы форма сливалась с основным цветом, тогда надо убирать градиент на сайте и подгонять цвет формы под цвет сайта. Эти настройки найдёте в общих настройках формы:
Как установить форму подписки на сайт Mobirise

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

Заново вносить изменения в код, чтобы появилась форма подписки на сайте и регулировать цвет фона формы в сервисе рассылок. Как подобрать цвет идеально, смотрите здесь →

Также можно подобрать другое медиа (картинку), с вертикальным расположением, что бы картинка слева и текст с формой подпиской справа – были одинаковой длины.

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

Text.ru - 100.00%

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

Готовый комплект для сайта 2.0

Готовый комплект для создания сайта 2.0

Научитесь делать красивые адаптивные сайты в бесплатном конструкторе


Надеюсь, что процедура не показалась вам слишком сложной и вы разобрались как установить форму подписки на сайт Mobirise.

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

Удачи!

Понравилась статья? Поделитесь с друзьями!

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

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

Меню

Мы используем файлы cookie для анализа событий на нашем сайте. Продолжая просмотр сайта, вы принимаете условия использования