SmartLid — скрипт обратного звонка

SmartLid - это бесплатный скрипт обратного звонка (контактная форма, которая вызывается при клике на кнопку и достаточно легко подключается к любому сайту).

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

smartlid.zip

Размер: 642 кб

Версия: 0.06 / 04.03.18

Если вам нравится скрипт, и он решает ваши пзадачи, можете поддержать проект

Что представляет из себя SmartLid.js?

На данный момент smartlid.js - это кнопка, в левом/правом нижнем углу экрана, при нажатии на которую появляется 2 дополнительные кнопки с иконками телефона и конверта. При клике на одну из них, в модальном окне появляется соответствующая форма (форма для заказа обратного звонка, и форма для отправки сообщения или заявки). Выглядит это следующим образом:

Как подключить Smartlid.js к своему сайту?

Чтобы подключить SmartLid.js к своему сайту, достаточно скачать и распаковать архив в корень вашего сайта. В результате у вас появится папка smartlid.

Структура проекта

После этого необходимо подключить и инициализировать скрипт. Я рекомендую делать это в перед закрывающим тегом body, то есть в самом конце страницы.

Инициализация скрипта smartlid

Для удобства прилагаю код, который можно копировать. Не забывайте, что на данный момент Smartlid - это jQuery плагин, а значит перед подключением и инициализацией у вас должна быть выше подключена библиотека jQuery.

    
    $(function ($) {
        $.getScript('./smartlid/smartlid.js', function () {
            $('body').smartLid({

            });
        });

        function addStyle(href) {
            elem = document.createElement("link");
            elem.href = href;
            elem.rel = 'stylesheet';
            document.head.appendChild(elem);
        }
        addStyle('./smartlid/css/main.css');
    }(jQuery));
                    
                    

Настройки внешнего вида

Настройки, которые помогут оформить внешний вид и валидацию на стороне клиента. Сам скрипт находится по пути /smartlid/smartlid.js. Там же расположены и настройки по умолчанию. В принципе, можно реадктировать их прямо там. Но чтобы ничего не испортить, лучше прописывать свои настройки при подключении скрипта.

            
  $(function ($) {
    $.getScript('./smartlid/smartlid.js', function () {
      $('body').smartLid({
        

        //Настройки
        requestForm: true,
        placeholderName: 'Введите ваше имя',
        callFormAddFile: true,
        requestFormAddFile: true,


      });
    });

    function addStyle(href) {
      elem = document.createElement("link");
      elem.href = href;
      elem.rel = 'stylesheet';
      document.head.appendChild(elem);
    }
    addStyle('./smartlid/css/main.css');
  }(jQuery));
          
          

Общие настройки

            
//***** Общие настройки *****//

//** Включить форму обратного звонка? true|false
callForm: true,

//** Включить форму c отправкой сообщения? true|false
requestForm: true,

// Расположение кнопок: smartlid_left | smartlid_right
position: ' smartlid_left',

//** Отслеживание заполнение формы в целях Яндекс Метрики. 
// 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: '#',
            
          

Настройка формы обратного звонка

            
//***** Настройка формы обратного звонка *****//

//** Заголовок формы
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;

План развития скрипта

Тест