Установка правильных форм и аналитики
Правильные формы это:
1) Красивые современные формы, соблюдающие общую стилистику сайта, чаще крупные и в модальном окне
2) незаметный антиспам
3) наглядно выводят ошибки о незаполненных или неправильно заполненных полях
4) наглядно выводят сообщение о успешно заполненной форме
5) загружаются по ajax
6) передают в аналитику и Рк данные о начатии заполнения, о неуспешной отправке (например телефон неверно заполнен) и о успешной отправке
- максимально точно, а не примерно
7) сохраняют данные в csv, гугл.таблицу, crm
8) отправляют уведомление в телеграм чат
2) в файле ajaxform.js заменить 90000000000 на ваш ID метрики.
на текущем этапе достаточно знать ваш ID, про установку и настройку яндекс.метрики в отдельном уроке, но обычно на сайте уже метрика стоит, поэтому достаточно в исходном коде посмотреть ее айди.
3) в файле ajaxform.php указать $after - это постфикс для файла csv, его можно указать любой, латиницей.
4) в файле showme.php указать $after такой же как в файле ajaxform.php
5) для работы уведомлений телеграм в файле ajaxform.php указать токен бота и айди чата, в который вы добавили этого бота и он же в этот чат будет писать уведомления. по телеграму дальше отдельный урок. сейчас можно просто закомментировать 26ю строчку поставив // перед sendToTelegram($textMessage);
6) Закачать в корень сайта все файлы из архива, но для работы нужно минимум 2 файла:
ajaxform.js - обрабатывает введенные данные и отправляет их
ajaxform.php - принимает данные и сохраняет их + уведомление в телеграм
showme.php - для просмотра лидов. желательно переименовать сразу в любое имя, например mysecret.php
7) в конце каждой страницы перед закрывающим тегом BODY вставить ajaxform.js используя тег script, если там несколько файлов JS подключаются, то ставьте этот после них, особенно после jquery. Пример на этом скриншоте http://joxi.ru/DmBgXBvHx4eL72
Также пример есть в архиве в файле index.html
8) если на вашем проекте не используется jquery, то его нужно поставить перед ajaxform.js в архиве есть версия 3.7
9) если формы уже есть и их легко отредактировать, то редактируйте их:
9.1) добавьте тегу form класс ajaxform
9.2) обязательных полей нет, но для телефона нужно поле name=phone, для емейла name=email, для имени клиента name=name, для сообщения name=message
9.3) добавьте скрытое поле куда система запишет URL с которого заполнили форму: name=url type=hidden с пустым значением.
9.4) добавьте скрытое поле где будет передавать имя заполненной формы: name=formname type=hidden value="Заказать звонок".
9.5) добавьте блок с сообщением об успешной отправке, изначально оно должно быть скрытое. и должно идти сразу после тега form с классом messageAjaxForm
10) если формы сложно отредактировать или их еще нет, то используйте готовые формы из примера в файле index.html или из примеров ниже.
Код формы:
Код формы, кнопки вызова модального окна
Важно! Используйте код модального окна и формы подходящий под вашу версию бутстрапа (ссылка на офдокументацию v5.3 ).
11) Обязательно проверить!
12) обязательно проверить мобильную версию!
Пред. урок След. урок
1) Красивые современные формы, соблюдающие общую стилистику сайта, чаще крупные и в модальном окне
2) незаметный антиспам
3) наглядно выводят ошибки о незаполненных или неправильно заполненных полях
4) наглядно выводят сообщение о успешно заполненной форме
5) загружаются по ajax
6) передают в аналитику и Рк данные о начатии заполнения, о неуспешной отправке (например телефон неверно заполнен) и о успешной отправке
- максимально точно, а не примерно
7) сохраняют данные в csv, гугл.таблицу, crm
8) отправляют уведомление в телеграм чат
Файлы для скачивания и установки с примерами v1.3
https://disk.yandex.ru/d/LZ7oyFwefyjXvwУстановка и настройка
1) Скачать и распаковать архив2) в файле ajaxform.js заменить 90000000000 на ваш ID метрики.
на текущем этапе достаточно знать ваш ID, про установку и настройку яндекс.метрики в отдельном уроке, но обычно на сайте уже метрика стоит, поэтому достаточно в исходном коде посмотреть ее айди.
3) в файле ajaxform.php указать $after - это постфикс для файла csv, его можно указать любой, латиницей.
4) в файле showme.php указать $after такой же как в файле ajaxform.php
5) для работы уведомлений телеграм в файле ajaxform.php указать токен бота и айди чата, в который вы добавили этого бота и он же в этот чат будет писать уведомления. по телеграму дальше отдельный урок. сейчас можно просто закомментировать 26ю строчку поставив // перед sendToTelegram($textMessage);
6) Закачать в корень сайта все файлы из архива, но для работы нужно минимум 2 файла:
ajaxform.js - обрабатывает введенные данные и отправляет их
ajaxform.php - принимает данные и сохраняет их + уведомление в телеграм
showme.php - для просмотра лидов. желательно переименовать сразу в любое имя, например mysecret.php
7) в конце каждой страницы перед закрывающим тегом BODY вставить ajaxform.js используя тег script, если там несколько файлов JS подключаются, то ставьте этот после них, особенно после jquery. Пример на этом скриншоте http://joxi.ru/DmBgXBvHx4eL72
Также пример есть в архиве в файле index.html
8) если на вашем проекте не используется jquery, то его нужно поставить перед ajaxform.js в архиве есть версия 3.7
9) если формы уже есть и их легко отредактировать, то редактируйте их:
9.1) добавьте тегу form класс ajaxform
9.2) обязательных полей нет, но для телефона нужно поле name=phone, для емейла name=email, для имени клиента name=name, для сообщения name=message
9.3) добавьте скрытое поле куда система запишет URL с которого заполнили форму: name=url type=hidden с пустым значением.
9.4) добавьте скрытое поле где будет передавать имя заполненной формы: name=formname type=hidden value="Заказать звонок".
9.5) добавьте блок с сообщением об успешной отправке, изначально оно должно быть скрытое. и должно идти сразу после тега form с классом messageAjaxForm
10) если формы сложно отредактировать или их еще нет, то используйте готовые формы из примера в файле index.html или из примеров ниже.
Код формы:
Код формы, кнопки вызова модального окна
Важно! Используйте код модального окна и формы подходящий под вашу версию бутстрапа (ссылка на офдокументацию v5.3 ).
11) Обязательно проверить!
12) обязательно проверить мобильную версию!
Пред. урок След. урок