SmartLid - это бесплатный скрипт обратного звонка (контактная форма, которая вызывается при клике на кнопку и достаточно
легко подключается к любому сайту).
Идея создания это скрипта пришла после того, как появилось сотни разных вопросов в комментариях к статьям о формах
обратной связи, ведь многим не хочется разбираться с версткой, программированием и подобными вещами, а нужен
готовый инструмент которой работает и решает поставленные задачи.
На данный момент smartlid.js - это кнопка, в левом/правом нижнем углу экрана, при нажатии на которую появляется 2 дополнительные
кнопки с иконками телефона и конверта. При клике на одну из них, в модальном окне появляется соответствующая
форма (форма для заказа обратного звонка, и форма для отправки сообщения или заявки). Выглядит это следующим
образом:
Как подключить Smartlid.js к своему сайту?
Чтобы подключить SmartLid.js к своему сайту, достаточно скачать и распаковать архив в корень вашего сайта. В результате
у вас появится папка smartlid.
После этого необходимо подключить и инициализировать скрипт. Я рекомендую делать это в перед закрывающим тегом
body, то есть в самом конце страницы.
Для удобства прилагаю код, который можно копировать. Не забывайте, что на данный момент Smartlid - это jQuery плагин,
а значит перед подключением и инициализацией у вас должна быть выше подключена библиотека jQuery.
Настройки, которые помогут оформить внешний вид и валидацию на стороне клиента. Сам скрипт находится по пути /smartlid/smartlid.js.
Там же расположены и настройки по умолчанию. В принципе, можно реадктировать их прямо там. Но чтобы ничего не
испортить, лучше прописывать свои настройки при подключении скрипта.
//***** Общие настройки *****//
//** Включить форму обратного звонка? true|false
callForm: true,
//** Включить форму c отправкой сообщения? true|false
requestForm: true,
// ** Расположение кнопок: smartlid_left | smartlid_right
position: ' smartlid_left',
// ** Отключить пульсирующие кнопки и оставить вызов модального окна только своими ссылками smartlid_visible | smartlid_hidden
isSmartlidVisible: 'smartlid_visible',
//** Отслеживание заполнение формы в целях Яндекс Метрики.
// XXXXXX - код счеткичка в Метрике
// SMARTLID - ID цели
counter: function () {
yaCounter40976409.reachGoal('SMARTLID');
},
//** Стиливое оформление формы 'dark-space', вскоре появятся и другие цвета
styleForm: ' dark-space',
//** Иконка главной кнопки, которая вызывает другие кнопки
navBtnIcon: '',
//** Иконка кнопки, которая вызывает модальное окно с формой обратного звонка
callFormBtnIcon: '',
//** Иконка кнопки, которая вызывает модальное окно с формой отправки сообщения
requestFormBtnIcon: '',
//** Placeholder для полей
placeholderName: 'Введите ваше имя',
placeholderPhone: 'Введите ваш телефон',
placeholderMail: 'Введите ваш email',
placeholderText: 'Введите ваше сообщение',
//** Checkbox согласия с разрешением на обработку персональных данных true|false
agreement: false,
//** Должен ли быть отмечен checkbox с разрешением на обработку
//** персональных данных по умолчанию? true|false
agreementIsActive: false,
//** Cсылка на лицензионное соглашение
agreementLink: '#',
Настройки автооткрытия формы
//******************************* Настройка автооткрытие формы *******************************
//** autoOpenForm - выбор формы для автооткрытия:
//--- 'callForm' - автооткрытие формы обратного звонка
//--- 'requestForm' - автооткрытие формы c отправкой сообщения
//--- false - выключить автооткрытие | без ковычек
autoOpenForm: false,
//** Время, через которое откроется модальое окно с формой, после загрузки страницы (в милличекундах). Минимум 3 секунды.
autoOpenTime: '9000',
//** Время (в часах), сколько окно не будет показываться, после первого показа или самостоятельного открытия окна пользователем.
autoOpenPeriodicity: '1',
Настройка формы обратного звонка
//***** Настройка формы обратного звонка *****//
//** Заголовок формы
callFormTitle: 'Оставьте ваш номер телефона, и наш консультант свяжется с вами',
//** Текст кнопки отправляющей форму
buttonTextCallForm: 'Отправить',
//** Картинка в модальном окне
callFormIcon: './smartlid/img/call.svg',
//** Включить поле с отправкой файла? true | false
callFormAddFile: true,
//***** Настройка формы с возможностью отправить сообщение *****//
//** Заголовок формы
requestFormTitle: 'Оставьте сообщение, и наш консультант свяжется с вами',
//** Текст кнопки отправляющей форму
buttonTextRequestForm: 'Отправить',
//** Картинка в модальном окне с формой отправки заявки
requestFormIcon: './smartlid/img/mail.svg',
//** Включить поле с отправкой файла? true | false
requestFormAddFile: true,
//** Включить поле с вводом телефона? true | false
requestFormTelInput: false,
Вызов формы своей кнопкой или ссылкой
Для того, чтобы вызывать модальные окна с формами свой кнопкой или ссылкой, достаточно дать им соответствующий класс.
Настройки отправки формы
Давайте настроим отправку формы на ваш почтовый адрес. Делается это в файле config.php
Найти его можно по такому пути: /smartlid/php/config.php
// Основные настройки для отправки письма
// Основные настройки для отправки письма
// *********** Если планируете использовать SMTP
// ** Пример для SMTP-YANDEX.
// const HOST = 'ssl://smtp.yandex.ru';
// const LOGIN = 'dima.d.v';
// const PASS = '03049192z';
// const PORT = 465;
/// ** Пример для SMTP-MAIL.RU
// const HOST = 'ssl://smtp.mail.ru';
// const LOGIN = 'sender@mail.ru';
// const PASS = 'XXXXXXXXX';
// const PORT = 465;
// ** Раскомментируйте (уберите слеши) и заполните данные, как в примере выше
// const HOST = '';
// const LOGIN = '';
// const PASS = '';
// const PORT = '';
// require_once($_SERVER['DOCUMENT_ROOT'] . '/smartlid/demo/smartlid/php/phpmailer/smtp.php');
// Дополнительные настройки
const SENDER = 'sender@yandex.ru';
const CATCHER = 'catcher2@yandex.ru';
const CATCHER2 = 'catcher2@list.ru';
const SUBJECT = 'Заявка с сайта';
const SUCCESSMSGS = 'Спасибо за обращение. Сообщение успешно отправлено';
const FAILMSGS = 'Сообщение не отправлено, попробуйте еще раз';
const FAILFILE = 'Ошибка отправки файла, попробуйте еще раз';
const ATTENTION = 'Внимание! Вы заполнили не все обязательные поля';
const AGREMENTATTANTION = 'Вы не приняли условия пользовательского соглашения';
const CHARSET = 'UTF-8';
$nameIsRequired = false;
$telIsRequired = true;
$emailIsRequired = true;
// $textIsRequired = false; - пока не работает
Основные настройки для отправки письма:
Если планируете использовать SMTP, придется заполнить несколько переменных.
const HOST - хост;
const LOGIN - логин почты, с которой отправляется письмо;
const PASS - пароль почты, с которой отправляется письмо;
const PORT - порт;
Обратите внимание на то, что константу LOGIN для Яндекс и Mail почты следует заполнять по-разному
В случае с Яндекс почтой, нужно указать только логин, без @yandex.ru, а в случае с Mail нужно указывать полный
почтовый адрес, то есть sender@mail.ru
Если используете Gmail или любую другую почту, просто загуглите "gmail smtp" или обратитесь к своему поставщику
услуг, который подскажет нужные данные.
Кроме того, заполните эти константы:
const SENDER - адрес, с которого отправляется письмо;
const CATCHER - почтовый адрес, на который будут приходить письма;
Если не используете SMTP, то просто укажитесвою почту в константах SENDER и CATCHER
const SENDER - адрес, с которого отправляется письмо;
const CATCHER - почтовый адрес, на который будут приходить письма;
const CATCHER2 - дополнительный почтовый адрес, на который будут приходить письма;
const SUBJECT - заголовок письма;
const CHARSET - кодировка;
Валидация на стороне сервера
Несколько полей, которые, на данный момент, можно сделать обязательными на стороне сервера и вывести сообщение,
о том, что заполнены не все обязательные поля.
$nameIsRequired - обязательно ли поле с именем для заполнения true / false;
$telIsRequired - обязательно ли поле с телефоном для заполнения true / false;
$emailIsRequired - обязателен ли email - true / false;