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

Настройки, которые помогут оформить внешний вид и валидацию на стороне клиента. Сам скрипт находится по пути /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',

// ** Отключить пульсирующие кнопки и оставить вызов модального окна только своими ссылками 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,
              
              

Вызов формы своей кнопкой или ссылкой

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

            

Звонок


Сообщение