Создание формы "Обратный звонок"

Создание формы "Обратный звонок"

3063 Битрикс #битрикс

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

Как создаем:

Несколько важных моментов:

  • Изначально создаем веб-форму, вопросы и шаблон для неё. Подробнее на процедуре создания остановимся позже.

  • Далее - работаем в папке шаблона сайта, где предполагается вызывать модальное окно формы:

Работаем с четырьмя файлами.

Первый - footer.php, там в невидимом контейнере создаем вызов нашей веб-формы:

здесь WEBFORM_ID - заменим на ИД нашей фактически существующей формы.

параметр IGNORE_CUSTOM_TEMPLATE обязательно должен быть N, иначе форма будет игнорировать наш шаблон, а подгружать стандартный.

Второй - template_styles.css - там-то мы и укажем, что данный div пока остается невидимым. 

 .modal{
   display:none;
   top:50%;
   left:50%;
   position:fixed;
   z-index:999;
   box-shadow:0 0 10px 0 rgba(0,0,0,0.6);
}

Третий файл - script.js, который находится в подпапке js папки шаблона сайта. Если такого файла (или папки) там нет - можно создать свой, если есть - дописать в существующий.

Туда нужно вписать функцию вызова модального окна на экран. Функция основывается на стандартных аякс-методах битрикс, ничего своего выдумывать не надо - это позволит избежать конфликтов с другими аякс-фрагментами кода.

Функция: 

function recall() {                     
   
   
   var ModalName = $('#recall');
   CentriredModalWindow(ModalName);
   OpenModalWindow(ModalName);
   
   return false;
}

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

С оформлением покончено. Теперь - создание самой вебформы, id которой мы впишем в код вызова компонента.

Создание вебформ из админ. части битрикса имеет весьма усеченный вид. И ряд неудобств: нельзя добавить параметры ответам на вопросы, нельзя самостоятельно задать ID формы. Поэтому форму создаем программно. (если функционал добавляется в состав мастера по созданию сайта - то это - единственный выход)

Скрипт создания несложной вебформы из четырех полей и легкого шаблона приведу ниже: 

$FORM_NAME = 'SIMPLE_FORM_MCART_CALLBACK_'.rand(10,100);
CModule::IncludeModule("form");

$ID = CAllForm::Set(array(
'NAME' => 'обратный звонок',
    'SID' => $FORM_NAME,
    'C_SORT' => 100,
    'BUTTON' => 'Спасибо, буду ждать звонка',
    'USE_CAPTCHA' => 'N',
     
    'USE_RESTRICTIONS' => 'N',
    'RESTRICT_USER' => 0,
    'RESTRICT_TIME' => 0,
    'arRESTRICT_STATUS' => Array(),
    'STAT_EVENT1' => 'form',
    'arSITE' => Array
        (
            0 => 's1'
        ),

    'USE_DEFAULT_TEMPLATE' => 'N',
   'FORM_TEMPLATE' => '
   
Перезвонить мне

   
   ',
  'arMENU' => Array
        (
            'ru' => 'Обратный звонок - результаты',
            'en' => 'Callback results'
        ),

    'arGROUP' => Array
        (
            2 => 0,
            3 => 0,
            4 => 0,
            5 => 0,
            6 => 0
        ),

    'VARNAME' => $FORM_NAME

),false, "N");

$FIELD_ID=CFormField::Set(array('FORM_ID' => $ID, 
'ACTIVE' => 'Y' ,
'TITLE' => 'Ваш телефон' ,
'TITLE_TYPE' => 'text', 
'C_SORT' => '100' ,
'ADDITIONAL' => 'N', 
'REQUIRED' => 'Y', 
'IN_RESULTS_TABLE' => 'Y' ,
'IN_EXCEL_TABLE' => 'Y', 
'FIELD_TYPE' => 'text' ,
'FILTER_TITLE' => 'Ваш телефон' ,
'RESULTS_TABLE_TITLE' => 'Ваш телефон', 
'VARNAME' => 'field_phone',

'SID' => 'field_phone' ),
false,
'Y', 
'N'
);

$ANSWER_ID = CAllFormAnswer::Set(array('FIELD_ID' => $FIELD_ID, 
'MESSAGE' => ' ', 
'VALUE' => 'Ваш телефон, например +7 964 432 56 25', 
'C_SORT' => '100', 
'ACTIVE' => 'Y', 
'FIELD_TYPE' => 'text', 
'FIELD_WIDTH' => '20', 
'FIELD_HEIGHT' => '0', 
'FIELD_PARAM' => 'on focus="if(this.value==\'Ваш телефон, например +7 964 432 56 25\')this.value=\'\'"'  ));

$FIELD_ID2 =CFormField::Set(array('FORM_ID' => $ID, 
'ACTIVE' => 'Y' ,
'TITLE' => 'Как к вам обращаться' ,
'TITLE_TYPE' => 'text', 
'C_SORT' => '110' ,
'ADDITIONAL' => 'N', 
'REQUIRED' => 'Y', 
'IN_RESULTS_TABLE' => 'Y' ,
'IN_EXCEL_TABLE' => 'Y', 
'FIELD_TYPE' => 'text' ,
'FILTER_TITLE' => 'Как к вам обращаться' ,
'RESULTS_TABLE_TITLE' => 'Как к вам обращаться', 
'VARNAME' => 'field_name',

'SID' => 'field_name' ),
false,
'Y', 
'N'
);

$ANSWER_ID = CAllFormAnswer::Set(array('FIELD_ID' => $FIELD_ID2, 
'MESSAGE' => ' ', 
'VALUE' => 'Как к вам обращаться', 
'C_SORT' => '110', 
'ACTIVE' => 'Y', 
'FIELD_TYPE' => 'text', 
'FIELD_WIDTH' => '20', 
'FIELD_HEIGHT' => '0', 
'FIELD_PARAM' => 'on focus="if(this.value==\'Как к вам обращаться\')this.value=\'\'"' ));

$FIELD_ID=CFormField::Set(array('FORM_ID' => $ID, 
'ACTIVE' => 'Y' ,
'TITLE' => 'Ваш e-mail (необязательно)' ,
'TITLE_TYPE' => 'text', 
'C_SORT' => '100' ,
'ADDITIONAL' => 'N', 
'REQUIRED' => 'N', 
'IN_RESULTS_TABLE' => 'Y' ,
'IN_EXCEL_TABLE' => 'Y', 
'FIELD_TYPE' => 'text' ,

'VARNAME' => 'field_email',

'SID' => 'field_email' ),
false,
'Y', 
'N'
);

$ANSWER_ID = CAllFormAnswer::Set(array('FIELD_ID' => $FIELD_ID, 
'MESSAGE' => ' ', 
'VALUE' => 'Ваш e-mail (необязательно)', 
'C_SORT' => '100', 
'ACTIVE' => 'Y', 
'FIELD_TYPE' => 'text', 
'FIELD_WIDTH' => '20', 
'FIELD_HEIGHT' => '0', 
'FIELD_PARAM' => 'on focus="if(this.value==\'Ваш e-mail (необязательно)\')this.value=\'\'"' ));


$FIELD_ID=CFormField::Set(array('FORM_ID' => $ID, 
'ACTIVE' => 'Y' ,
'TITLE' => 'Во сколько позвонить?' ,
'TITLE_TYPE' => 'text', 
'C_SORT' => '100' ,
'ADDITIONAL' => 'N', 
'REQUIRED' => 'N', 
'IN_RESULTS_TABLE' => 'Y' ,
'IN_EXCEL_TABLE' => 'Y', 
'FIELD_TYPE' => 'text' ,
'FILTER_TITLE' => 'Во сколько позвонить?' ,
'RESULTS_TABLE_TITLE' => 'Во сколько позвонить?', 
'VARNAME' => 'field_time',

'SID' => 'field_time' ),
false,
'Y', 
'N'
);

$ANSWER_ID = CAllFormAnswer::Set(array('FIELD_ID' => $FIELD_ID, 
'MESSAGE' => ' ', 
'VALUE' => 'Во сколько позвонить?', 
'C_SORT' => '100', 
'ACTIVE' => 'Y', 
'FIELD_TYPE' => 'text', 
'FIELD_WIDTH' => '20', 
'FIELD_HEIGHT' => '0', 
'FIELD_PARAM' => 'on focus="if(this.value==\'Во сколько позвонить?\')this.value=\'\'"' ));



//===================================================
$arFields_status = array( 'FORM_ID' => $ID,
    'C_SORT' => 100,
    'ACTIVE' => 'Y',
    'TITLE' => 'DEFAULT',
    'DESCRIPTION' => 'DEFAULT',
    'CSS' => 'statusgreen',
    'DEFAULT_VALUE' => 'Y',
    'arPERMISSION_VIEW' => Array
        (
            0 => 0
        ),

    'arPERMISSION_MOVE' => Array
        (
            0 => 0
        ),

    'arPERMISSION_EDIT' => Array
        (
            0 => 0
        ),

    'arPERMISSION_DELETE' => Array
        (
            0 => 0
        ));

$STATUS = CFormStatus::Set($arFields_status, 0);

В целом - ритуал таков.

  • Сначала создаем форму (о параметрах - ниже)

  • Потом создаем нашей форме вопросы. метод CFormField::Set.

    Там с параметрами все понятно: в кач-ве FORM_ID будет id нашей формы

  • Потом - после создания каждого вопроса - создаем параметры ответа

    CAllFormAnswer::Set (тип поля для ответа, дополнительные параметры тега - такие как onblur, onckick - все там)

  • В самом конце - присваиваем статус DEFAULT новому результату формы - иначе результаты не будут записываться. Метод CFormStatus::Set

Что есть что в этом коде:

Сначала создаем саму форму (метод CAllForm::Set). В это методе нас особо интересуют следующие параметры: ID - уникальный код формы (то, чего нельзя создать из админ. части и можно создать только программно), параметр 'USE_DEFAULT_TEMPLATE' - использовать ли шаблон по умолчанию - обязательно должен быть 'N' - иначе все наши усилия по улучшению дизайна формы и к чему не приведут.

И параметр 'FORM_TEMPLATE' - который содержит HTML - код нашего шаблона для данной вебформы (пока не могу найти, куда физически помещается этот шаблон, и оформляется ли он в отдельный файл вообще. Такое подозрение, что он так и существует - лишь в качестве параметра вебформы, редактировать его из админ. части или к-либо другими файловыми редакторами не возможно)

В параметре FORM_TEMPLATE кроме обыкновенных HTML-тегов используется также метод $FORM->ShowInput(#field_name#) - который выводит на экран контейнер с тегом input для ввода значения поля с именем #field_name.

Если в контейнер input необходимо добавить еще какой-то текст - например, onclick... или onblur - то этот текст помещается в качестве параметра в метод CAllFormAnswer::Set, который уже был описан.

В результате всего проделанного, вы получите красивое модальное окошко с формой обратного звонка, результаты которой будут сохраняться в админ. меню Сервис-Результаты веб-форм - Обратный звонок.

Важно понимать, что по отношению к веб-формам не работает общее правило кастомизации шаблонов: наш шаблон не вынесен в отдельный файл, а существует лишь как параметр веб-формы, и может быть отредактирован только программно или через визуальный редактор. А параметры вопроса - вообще никак, кроме как программно, отредактированы быть не могут.

Похожие записи в блоге

Все статьи