ReCaptcha 2.0 не работает в лайтбоксе Adobe Muse?
⭐ В этом видео Вы увидите как с помощью одного бесплатного виджета можно решить проблему работы reCaptcha 2.0 в формах размещенных в лайтбоксе программы Adobe Muse.
👉Ссылки из урока:
Ссылка на виджет: https://5108.ru/frame
Ссылка на подробную статью с решением проблемы: https://5108.ru/rec20
👉Дополнительно: как настроить ReCaptcha 2.0 для использования на своем сайте:
Справка Adobe Muse: https://goo.gl/coFJf2
Сервис Google: https://goo.gl/n6g7fZ (у вас должен быть свой аккаунт и Ваш сайт должен быть добавлен в Google панель).
ReCaptcha 2.0 в лайтбоксе. Об уроке, пример.
Этот урок специально для тех, у кого не работает ReCaptcha 2.0 при размещении формы в лайтбоксе в Adobe Muse. Использование ReCaptcha 2.0 в форме Adobe Muse нужно нам для борьбы со спамом. Но при размещении в лайтбоксе данной формы ReCaptcha 2.0 перестает работать.
Выглядит это следующим образом. когда мы нажимаем на «Кнопка лайтбокса с формой» и пытаемся здесь нажать на «Я не робот», у нас начинается вот такая постоянная прокрутка, и ReCaptcha 2.0 не срабатывает. Это обычный лайтбокс, и в нем размещена форма Adobe Muse с рекапчей. Таким образом, мы не можем здесь отправить данные этой формы. Как решить эту проблему смотрите дальше в этом видеоуроке.
ReCaptcha 2.0 в лайтбоксе. Решение.
Решение данного вопроса я нашел на одном из форумов по Adobe Muse. И для того, чтобы нам решить эту проблему, нам необходимо будет скачать один виджет. Виджет называется «Страница во фрейме», скачать его вы сможете на данном сайте.
ReCaptcha 2.0 в лайтбоксе. Создаем страницы.
Итак, мы переходим в программу Adobe Muse, где у меня уже подготовлен проект. Сама форма Adobe Muse у меня размещена на отдельной странице. Страницу я называл «form», разместил здесь форму и один текстовый блок с вот таким текстом. В этой форме в настройках у меня включены ReCaptcha 2.0. Рекапча настроена для моего домена. Для настройки рекапчи вам понадобятся два кода: открытый ключ и закрытый ключ, если вы размещаете ее на своем сайте. Данную форму вместе с этим текстом мы фиксируем по центру страницы, для этого у нас включена функция «Закрепить на странице», по центру стоит вот здесь значок. Страницу я сделал шириной в 360 пикселей и в гибком значении ширины. Вот и все.
Следующая страница, которую я еще сделал дополнительно – это страница «spasibo». Ширина данной страницы тоже 360 пикселей. И для макета выбрано гибкое значение ширины. Нажимаю «ОК». Данный текстовый фрейм на этой странице тоже закреплен по центру. Это та страница, на которую при переходе из формы в настройках формы стоит страница после отправки страницы спасибо.
Итак, у нас есть две страницы. Одна страница с формой и одна страница «spasibo». И главная страница, на которой у нас распложен сам лайтбокс. Здесь я остановлюсь немного поподробнее. Сейчас вы видите, что у меня в данном лайтбоксе, как будто бы установлена форма. Но на самом деле здесь у меня в целевом объекте данного лайтбокса установлена не форма, а установлен виджет. Виджет, про который я говорил в начале этого урока. Виджет называется «Встроенная страница». Вы просто перетаскиваете его на страницу. Здесь снимаете галочку «Отключить прокрутку» и в URL данной страницы вы должны будете указать URL-адрес той страницы, на которой будет размещена форма. В данном случае это у нас страница «form», в которой мы размещали нашу форму.
ReCaptcha 2.0 в лайтбоксе. Размещение виджета в лайтбоксе.
Сам этот виджет вы размещаете в целевой объект лайтбокса. Я сейчас делать этого не буду, поскольку у меня там уже размещен виджет. Этот я удалю, а здесь покажу, что у меня в настройках данного виджета (это сейчас настройки лайтбокса) выключена прокрутка и написан URL-адрес: https://urokimuse.ru/rec2/form.html, т. к. моя страница с формой называется «form». До тех пор, пока вы не опубликуете данный сайт, форма в этом лайтбоксе у вас отображаться не будет в проекте.
Поскольку я уже опубликовал данный сайт по тому адресу, который там указан, то у меня сейчас уже отображается форма в данном лайтбоксе. Т. е. если я сейчас даже чуть-чуть изменю название, например, уберу букву «l», т. е. это будет как бы другая страница, то здесь отображаться форма не будет, а отображается только мой сайт urokimuse.ru. Если я здесь прописываю четко адрес моей страницы, которая уже размещена на хостинге, то с помощью данного виджета здесь происходит как бы трансляция страницы «form» в данный виджет. А виджет у нас размещен в целевом объекте лайтбокса. Здесь, в принципе, все.
ReCaptcha 2.0 в лайтбоксе. Размещение сайта на хостинге.
Далее размещаем наш сайт у себя на хостинге. После размещения это будет выглядеть вот так. У меня данный сайт расположен в подпапке «rec» моего домена, и при нажатии на кнопку «Кнопка лайтбокса с формой во фрейме» у нас появляется всплывающее окно, где показывается форма с рекапчей. Теперь при начатии на саму рекапчу, рекапча срабатывает, и мы можем спокойно отправить данную форму.
Минус данного способа только в том, что при размещении нескольких таких лайтбоксов на одной странице, все они будут отсылаться на одну страницу «form». Для того чтобы вы смогли отслеживать с какой именно формы пришла заявка, вам необходимо будет сделать еще одну страницу «form». Например, сдублировать ее и назвать «form1». В настройках формы делаете изменения, например, здесь пишите «Форма form1», чтобы они отличались по названию. И делаете на основной странице еще один лайтбокс с установленным в него виджетом или просто дублируете, нажав «Копировать» и «Вставить».
Мы получаем еще одну кнопку с лайтбоксом. Я размещу ее чуть ниже. И уже в настройках данного виджета, который размещен у нас здесь в целевом объекте, мы должны будем указать адрес страницы «form1». Кстати, сейчас вы увидите, что, поскольку я еще не опубликовал данную страницу у себя на сайте, здесь пока в данном лайтбоксе форма не отображается. После публикации вы увидите точно такую же картину, только в данном целевом объекте второго лайтбокса будет у нас размещена «form1».
ReCaptcha 2.0 в лайтбоксе. Особенности способа.
Все данные страницы с формами, которые мы насоздавали, являются частью одного и того же сайта, поэтому вы сможете также отслеживать конверсию с каждой этой формы при настройке в Яндекс.Метрики.
Также для каждой формы вы сможете создать отдельную страницу «spasibo». Давайте посмотрим, как это будет работать уже на сайте. Вы нажимаете на кнопку «Кнопка лайтбокса с формой во фрейме», подтверждаете, что вы не робот, рекапча срабатывает. Пишите имя. Я напишу «Дмитрий» и напишу здесь адрес любой электронной почты, например, «123@mail.ru», нажимаю «Отправить». И после отправки у меня появляется страница «Спасибо за Ваш заказ!» – это та страница, которую мы настраивали для данной формы, т .е. отдельная страница «spasibo». Переход на нее настроен для этой формы.
Ссылка на форум, на котором я нашел решение данного вопроса. А на этом я прощаюсь, с вами был Дмитрий Шаповалов. Смотрите мои предыдущие и следующие уроки на моем канале, ставьте лайки и пишите комментарии к этому видео.
Автор видеоурока
Дмитрий Шаповалов