Кастомизация bitrix:form, работа с ajax формами. Битрикс веб формы кастомизация

Кастомизация bitrix:form, работа с ajax формами

Очень часто возникает необходимость применять компонент для показа форм на сайте. За заполнение формы отвечает компонент bitrix:form.new. Который также входит в комплексный компонент bitrix.form bitrix:form.new Первым делом при кастомизации формы вы, скорей всего, захотите изменить стандартные стили. Но найти тег в шаблоне у вас не получится. Дело в том что в начале файла template.php выводится элемент массива, о важности налиличия которого и содержании можно сразу не догадаться.<?=$arResult["FORM_HEADER"]?>

На самом деле эта конструкция выводит тег form и информацию о сессии, без которой отправить данные не получится. Заменить его можно следующим образом:

<form name="<?=$arResult["WEB_FORM_NAME"]?>" action="<?=POST_FORM_ACTION_URI?>" method="POST" enctype="multipart/form-data" novalidate="novalidate"> <input type="hidden" name="WEB_FORM_ID" value="<?=$arParams["WEB_FORM_ID"]?>"> <?=bitrix_sessid_post()?></form>

Таким образом мы сможем добавить класс к форме. Кроме самого тега, выводится так же два скрытых поля. Одно из которых содержит ID формы, второе ID сессии.

Всегда было требование производить валидацию формы. По современным требованиям валидация производится с помощью js или с помощью ajax. Перезагружать страницу или отправлять на другую очень не удобно для пользователя. И комплексный компонент битрикса form поддерживает такую работу. В настройках компонента необходимо включить работу по ajax. Но не все знают о том что и компонент bitrix:form.new поддерживает работу по ajax, как впрочем и все компоненты битрикса т.к. эта функция заложена в базовом классе компонентов.Добавив в параметры подключения компонента данные параметры мы получим желаемый результат:

"AJAX_MODE" => "Y", // режим AJAX"AJAX_OPTION_SHADOW" => "N", // затемнять область"AJAX_OPTION_JUMP" => "Y", // скроллить страницу до компонента"AJAX_OPTION_STYLE" => "Y", // подключать стили"AJAX_OPTION_HISTORY" => "N", // эмулировать переход по страницам

Скорее всего нам понадобится после отправки формы выводить некий текст. Для этого необходимо определить, была ли отправлена форма и не было ли в ней ошибок:

<?if($_REQUEST['AJAX_CALL'] == "Y" && $arResult["isFormErrors"] == "N"):?>

<div> <?=$arResult['arForm']['DESCRIPTION']?> // выводим текст из описания формы </div>

<?else:?> <?endif?>

Ктати и красивую подсветку полей с ошибками сделать будет тоже не сложно - после отправки компонент вернет массив со списком полей которые не прошли валидацию - FORM_ERRORS.

<input placeholder="Телефон" name="<?=$answersList['phone']?>" value="<?=$arResult['arrVALUES'][$answersList['phone']];?>" class="<?=$arResult['FORM_ERRORS']['phone'] ? 'error' : ''?>">

triangle-studio.ru

Особенности создания форм на сайте под управлением «1С-Битрикс»

Несмотря на то, что модуль «Веб-формы» системы «1С-Битрикс» позволяет создавать на сайте довольно сложные формы с различными типами полей, существует ряд ограничений. Например, стандартным способом нельзя создать группы элементов списка (html – элемент OPTGROUP) или поместить в атрибут value текстового поля выражение PHP.

Недавно при создании формы мне как раз было нужно поместить в скрытое поле дату и время, на момент заполнения формы посетителем сайта. В этой статье я опишу каким образом это было сделано. При создании статьи я использовал демо-версию системы для разработчиков. В ней уже есть готовая форма «Анкета посетителя сайта», в нее я и добавлю скрытое поле.

Для начала нужно включить расширенный режим управления веб-формами. Делается это в настройках сайта: Настройки ˃ Настройки продукта ˃ Настройки модулей ˃ Веб-формы. Нужно снять отметку с флажка «Использовать упрощённый режим редактирования форм».

При создании шаблона веб-формы нужно выбрать опцию «Использовать шаблон формы по умолчанию».

Добавляем новое поле. На закладке «Ответ» ничего не заполняем, только выбираем тип “hidden”.

После добавления остальных необходимых полей размещаем форму на странице сайта. В моем случае я использую компонент «Заполнение веб-формы» (“bitrix:form.result.new”). Копируем шаблон компонента в папку с шаблоном сайта. В демо-версии путь к шаблону будет такой (я назвал копию шаблона custom): /bitrix/templates/books/components/bitrix/form.result.new/custom/

Теперь самое время объяснить, каким образом система формирует имена полей в формах. Имя поля имеет вид: form_ТИП ПОЛЯ_ИДЕНТИФИКАТОР ПОЛЯ. Эти данные можно посмотреть в массиве $arResult["QUESTIONS"], если вывести его при помощи PHP функции print_r(), разместив ее в коде файла шаблона template.php.

Таким образом, имя нового поля будет следующим: form_hidden_29.

Открываем файл template.php в текстовом редакторе, например, в Notepad++ и находим в нем код, где обрабатывается в цикле массив $arResult["QUESTIONS"]. Внутри цикла вставляем код:

PHP

<? if($FIELD_SID=="test_field"){ echo"<input type=\"hidden\" name=\"form_hidden_29\" value=\"".date('d-m-Y H:i:s')."\">"; } else{ echo $arQuestion["HTML_CODE"]; } ?>

В итоге получится следующий код внутри файла шаблона:

PHP

<? foreach ($arResult["QUESTIONS"] as $FIELD_SID => $arQuestion) { if ($arQuestion['STRUCTURE'][0]['FIELD_TYPE'] == 'hidden') { // мой код if($FIELD_SID=="test_field"){ echo"<input type=\"hidden\" name=\"form_hidden_29\" value=\"".date('d-m-Y H:i:s')."\">"; } else{ echo $arQuestion["HTML_CODE"]; } } else { ?> <tr> <td> <?if (is_array($arResult["FORM_ERRORS"]) && array_key_exists($FIELD_SID, $arResult['FORM_ERRORS'])):?> <span title="<?=$arResult["FORM_ERRORS"][$FIELD_SID]?>"></span> <?endif;?> <?=$arQuestion["CAPTION"]?><?if ($arQuestion["REQUIRED"] == "Y"):?><?=$arResult["REQUIRED_SIGN"];?><?endif;?> <?=$arQuestion["IS_INPUT_CAPTION_IMAGE"] == "Y" ? "<br />".$arQuestion["IMAGE"]["HTML_CODE"] : ""?> </td> <td><?=$arQuestion["HTML_CODE"]?></td< </tr> <? } } //endwhile ?>

Теперь значением атрибута value скрытого поля test_field будет дата заполнения формы пользователем.

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

mattweb.ru

Кастомизация формы битрикс | КОНЬЯКОВ.ру

Ну какого чёрта Битрикс не позволяет задать class для вопроса формы? Почему это возможно только для дочернего элемента вопроса?

Т.е. для стандартного <input> задать class можно только в текстовых вопросах. Но в вопросах содержащих ответы, это невозможно. Не текстовые вопросы: radio button, checkbox button, dropdown и др., невозможно задать class для самого вопроса, а не для ответа.

Сейчас есть возможность задать отдельный параметр для ответа:

Но не для вопроса:

А хотелось бы как-то так, чтобы была возможность задания class для вопроса:

Еще хорошо, если битрикс сделает возможность обрамить каждый вопрос в определенные теги. Например вот так:

Таким образом, мы сможем делать кастомизированные формы, не прибегая к кастомизации шаблона формы!

Вопрос: Ну почему битрикс за множество лет своего существования до сих пор этого не сделал???

konyakov.ru