Веб формы
Набор полезных практик для работы с веб формой
AJAX для веб формы
Чтобы в компоненте form.result.new включить режим AJAX добавьте в параметры компонента параметры:
"AJAX_MODE" => "Y",
"AJAX_OPTION_HISTORY" => "N",
"AJAX_OPTION_JUMP" => "Y",
"AJAX_OPTION_SHADOW" => "N",
"AJAX_OPTION_STYLE" => "Y",Если необходимо разместить несколько форм на одной странице, нужно добавить каждой форме идентификатор:
"AJAX_OPTION_ADDITIONAL" => $arForm['ID'],Оформление скриптов
Чтобы ваши скрипты адекватно отрабатывали после AJAX обновление веб-формы, используйте конструкцию
$(function () {
InitScripts();
});
BX.addCustomEvent('onAjaxSuccess', function(){
InitScripts();
});
function InitScripts() {
// your code
// например, маска для телефона
$('input[type="tel"]').mask("+7 (999) 999-9999");
}Вывод результатов веб-формы
<?
$request = \Bitrix\Main\Context::getCurrent()->getRequest();
$resultForm = $request->get("RESULT_ID");
?>
<?if ($arResult["isFormNote"] == "Y") {?>
<div class="result-ok alert alert-success">
<?foreach ($arParams["RESULT"] as $arParam) {?>
<?= str_replace("#num#", $resultForm, $arParam);?><br />
<?}?>
</div>
<?}?><?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();
$arTemplateParameters = array(
// Текст после обращения
"RESULT" => Array(
"PARENT" => "VISUAL",
"NAME" => GetMessage("RESULT_TEXT"),
"TYPE" => "STRING",
"MULTIPLE" => "Y",
"DEFAULT" => "",
),
);
?>$MESS ["RESULT_TEXT"] = "Текст после обращения";"RESULT" => array(
0 => "Спасибо за ваше обращение!",
1 => "Номер вашего обращения ##num#",
2 => "", // строка пропущена, чтобы вставить <br />
3 => "В скором времени мы обязательно вам ответим.",
),Политика конфиденциальнсоти
<?$APPLICATION->IncludeFile("/include/agreement.php",
Array(
"BUTTON_TEXT" => $arResult['arForm']['BUTTON'],
"HREF" => $arParams['HREF']
),
Array(
"MODE" => "html",
"NAME" => "Редактирование включаемой области раздела",
));
?><?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();
$arTemplateParameters = array(
// Ссылка на политику конфиденциальности
"HREF" => Array(
"NAME" => GetMessage("TITLE_HREF"),
"TYPE" => "STRING",
"DEFAULT" => "",
),
);
?>$(function () {
InitScripts();
});
BX.addCustomEvent('onAjaxSuccess', function(){
InitScripts();
});
function InitScripts() {
/*==================================================
= Required checkbox + submit =
==================================================*/
if ($('.form-check')[0]) {
$('.form-check').each(function() {
if (!$(this).find('input[type="checkbox"]').prop('checked')) {
$(this).parents('form').find('input[type="submit"]').attr('disabled', 'disabled');
}
});
$('.form-check').on('click', function() {
if (!$(this).find('input[type="checkbox"]').prop('checked')) {
$(this).parents('form').find('input[type="submit"]').attr('disabled', 'disabled');
} else {
$(this).parents('form').find('input[type="submit"]').removeAttr('disabled');
}
});
}
}$MESS ["TITLE_HREF"] = "Ссылка на политику конфиденциальности";<div class="form-check">
<input class="bx-offer-checkbox form-check-input" type="checkbox" required="" checked="" id="privacy" />
<label class="form-check-label" for="privacy">Нажимая на кнопку «<?=$arParams["BUTTON_TEXT"]?>», вы принимаете условия <a href="<?=$arParams["HREF"]?>" target="_blank">Политики конфиденциальности</a>.</label>
</div>Оформление поля телефон
Чтобы телефон можно было корректно вводить на телефонах, и без большого труда вешать на поле маску ввода, предлагается следующий метод.
Отключить упрощенный режим редактирования веб форм
Настройки > Настройки продукта > Настройки модулей > Веб-формы > Использовать упрощённый режим редактирования формЗаходим в веб форму, редактируем вопрос
На вкладке ответ в поле параметры вставляем код:
class=phoneДалее нужно вывести это поле в шаблоне
Вывести поле телефона нужно с типом tel. Делается это для удобного ввода с мобильного устройства. Пример вывода:
<?foreach ($arResult["QUESTIONS"] as $arItem) {?>
// шаблон до вывода поля
<?if (!empty($arItem["CAPTION"])) {?>
<label><?= $arItem["CAPTION"]?> <?= ($arItem["REQUIRED"] === "Y") ? '<sup class="required">*</sup>' : ''?></label>
<?}?>
<? foreach ($arItem["STRUCTURE"] as $arInput) {
$type = $arInput["FIELD_TYPE"];
$name = "form_" . $type . "_" . $arInput["ID"];
$required = ($arItem["REQUIRED"] === "Y") ? 'required="required"' : '';
switch ($type) {
case "tel":
$name = "form_text_" . $arInput["ID"];
?>
<input <?= $required?> type="<?= $type ?>" name="<?= $name ?>" placeholder="+7 (___) ___-__-__">
<?
break;
// кейсы для text, email, file, radio, checkbox, select
// для примера кейсы для text и email
case "text":
case "email":
?>
<input <?= $required?> type="<?= $type?>" name="<?= $name?>" value="<?= $value?>">
<?
break;
}
}?>
<?}?>foreach ($arResult["QUESTIONS"] as $key => &$arItem) {
foreach ($arItem["STRUCTURE"] as &$arInput) {
$params = $arInput["FIELD_PARAM"];
if (!empty($params)) {
preg_match_all("#([^,|=]+)=?([^,]+|)#", $params, $out);
unset($out[0]);
$out = array_combine($out[1],$out[2]) ;
$arItem["FIELD_PARAM"] = $out;
// проверка на поле телефона
// если такое есть, установим тип поля
if (isset($arItem["FIELD_PARAM"]["phone"])) {
$arInput["FIELD_TYPE"] = "tel";
}
}
}
}
$(function () {
InitScripts();
});
BX.addCustomEvent('onAjaxSuccess', function(){
InitScripts();
});
function InitScripts() {
// маска для телефона
$('input[type="tel"]').mask("+7 (999) 999-9999");
}Вывод подсказки под полем
Скоро...
Установка Google recaptcha 2
скоро...
Веб-формы AJAX в fancybox
скоро...
Last updated
Was this helpful?