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

Как создаем:

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

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

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

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

Первый - 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' => '
   
   

Перезвонить мне

   ShowInput("field_phone")?>    ShowInput("field_name")?>    ShowInput("field_email")?>    ShowInput("field_time")?>    ShowSubmitButton("Спасибо, буду ждать звонка","")?>    Отмена'.GetMessage("CANCEL").'    
',   '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, который уже был описан.

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

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

Загрузка...