Веб формы

Набор полезных практик для работы с веб формой

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 обновление веб-формы, используйте конструкцию

script.js

$(function () {
	InitScripts();
});
BX.addCustomEvent('onAjaxSuccess', function(){
	InitScripts();
});

function InitScripts() {
	// your code
	// например, маска для телефона
	$('input[type="tel"]').mask("[phone]");
}

Вывод результатов веб-формы

template.php

<?
$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>
<?}?>

.parameters.php

<?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" => "",
		),
);
?>

lang/.parameters.php

$MESS ["RESULT_TEXT"] = "Текст после обращения";

Пример настройки компонента

"RESULT" => array(
	0 => "Спасибо за ваше обращение!",
	1 => "Номер вашего обращения ##num#",
	2 => "", // строка пропущена, чтобы вставить <br />
	3 => "В скором времени мы обязательно вам ответим.",
),

Политика конфиденциальнсоти

template.php

<?$APPLICATION->IncludeFile("/include/agreement.php",
	Array(

		"BUTTON_TEXT" => $arResult['arForm']['BUTTON'],
		"HREF" => $arParams['HREF']
	),
	Array(
		"MODE" => "html",
		"NAME" => "Редактирование включаемой области раздела",
	));
?>

.parameters.php

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();

$arTemplateParameters = array(
		// Ссылка на политику конфиденциальности
		"HREF" => Array(
				"NAME" => GetMessage("TITLE_HREF"),
				"TYPE" => "STRING",
				"DEFAULT" => "",
		),
);
?>

script.js

$(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');
			}
		});
	}
}

lang/.parameters.php

$MESS ["TITLE_HREF"] = "Ссылка на политику конфиденциальности";

/include/agreement.php

<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>

Оформление поля телефон

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

1. Отключить упрощенный режим редактирования веб форм

   Настройки > Настройки продукта > Настройки модулей > Веб-формы > Использовать упрощённый режим редактирования форм

2. Заходим в веб форму, редактируем вопрос

3. На вкладке ответ в поле параметры вставляем код: class=phone

4. Далее нужно вывести это поле в шаблоне

Вывести поле телефона нужно с типом tel. Делается это для удобного ввода с мобильного устройства. Пример вывода:

template.php

<?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;
		}
	}?>
<?}?>

result_modifier.php

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";
			}
		}
	}
	
}

script.js

$(function () {
	InitScripts();
});
BX.addCustomEvent('onAjaxSuccess', function(){
	InitScripts();
});

function InitScripts() {
	// маска для телефона
	$('input[type="tel"]').mask("[phone]");
}

Вывод подсказки под полем

Скоро...

Установка Google recaptcha 2

скоро...

Веб-формы AJAX в fancybox

скоро...