1С-Битрикс, контактная форма с валидацией номера
Задача: Сделать форму обратной связи (имя, телефон) на кастомном шаблоне компонента
bitrix.form.new. Все формы должны храниться в админке. В форме должна быть валидация номера телефона и маска телефона.
Для валидации номера я буду использовать плагин jQuery International Telephone Input, он подойдет для крупных международных компаний, так-как есть проверка номеров всех стран. А для отправки будет сделано через AJAX самого битрикса.
Начинаем
Для начала идём в админку > Контент > инфоблоки > Типы инфоблоков > добавить новый тип > id укажем feedback и назовем обратная связь, остальное по вашему желанию
Контент > инфоблоки > Типы инфоблоков > обратная связь (запишите id вашего блока) > свойства > будет одно поле телефон и код EMAIL_TELEPHONE
Создадим в корне Bitrix папку contacts и создадим там index.php
<? /* ===================================================== https://webarmen.com/ ----------------------------------------------------- Copyright (c) 2018 ===================================================== Данный код защищен авторскими правами ===================================================== Файл: index.php ----------------------------------------------------- Назначение: вывод страницы ===================================================== */ require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php"); $APPLICATION->SetTitle("Контакты"); ?> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/3.7.0/css/intlTelInput.css"> <style type="text/css">div.content-form div.form-input input, div.content-form div.form-input textarea { width: 200px; } #workarea ul { width: 300px; } #workarea li { font-size: 8px; } div.content-form div.form-input input.telephone { z-index: 0; margin-top: 0 !important; margin-bottom: 0 !important; padding-left: 44px; margin-left: 0; width: 211px; } input.send { width: 211px; font-size: 20px; margin-top: 5px; } </style> <p> <?$APPLICATION->IncludeComponent( "bitrix:iblock.element.add.form", "feedback", Array( "AJAX_MODE" => "Y", "AJAX_OPTION_SHADOW" => "N", "AJAX_OPTION_JUMP" => "N", "AJAX_OPTION_STYLE" => "Y", "AJAX_OPTION_HISTORY" => "N", "IBLOCK_TYPE" => "form", "IBLOCK_ID" => "1", //id блока "STATUS_NEW" => "N", "LIST_URL" => "", "USE_CAPTCHA" => "N", "USER_MESSAGE_EDIT" => "ok", "USER_MESSAGE_ADD" => "ok", "DEFAULT_INPUT_SIZE" => "30", "RESIZE_IMAGES" => "N", "PROPERTY_CODES" => array(0=>"NAME",1=>"1"), //имя и 1 это поле для записи телефона "PROPERTY_CODES_REQUIRED" => array(0=>"NAME",1=>"1"), //имя и 1 это поле для записи телефона "GROUPS" => array(0=>"2",), "STATUS" => "ANY", "ELEMENT_ASSOC" => "CREATED_BY", "MAX_USER_ENTRIES" => "100000", "MAX_LEVELS" => "100000", "LEVEL_LAST" => "Y", "MAX_FILE_SIZE" => "0", "PREVIEW_TEXT_USE_HTML_EDITOR" => "N", "DETAIL_TEXT_USE_HTML_EDITOR" => "N", "SEF_MODE" => "N" ) );?></p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/3.7.0/js/intlTelInput.min.js"></script> <script> $("#phone").intlTelInput({ defaultCountry: 'auto', preferredCountries: ['ru'], utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/3.7.0/lib/libphonenumber/build/utils.js" }); </script> <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
Для автоматической подстановки российского номера телефона был добавлен код
<script> $("#phone").intlTelInput({ defaultCountry: 'auto', preferredCountries: ['ru'] }); </script>
Все скрипты я взял с CDN и поместил прямо в index.php для наглядности. Для работы плагина конечно необходим jQuery.
Создадим шаблон нашей формы
/bitrix/templates/шаблон/components/bitrix/main.feedback/template/template.php
/* ===================================================== https://webarmen.com/ ----------------------------------------------------- Copyright (c) 2018 ===================================================== Данный код защищен авторскими правами ===================================================== Файл: template.php ----------------------------------------------------- Назначение: формы контактов ===================================================== */ <?if(!defined("B_PROLOG_INCLUDED")||B_PROLOG_INCLUDED!==true)die();?> <div class="content-form mfeedback"> <?if(!empty($arResult["ERROR_MESSAGE"])) { foreach($arResult["ERROR_MESSAGE"] as $v) ShowError($v); } if(strlen($arResult["OK_MESSAGE"]) > 0) { ?><div class="mf-ok-text"><?=$arResult["OK_MESSAGE"]?></div><? } ?> <form action="" method="POST"> <?=bitrix_sessid_post()?> <div class="field mf-name"> <label class="field-title"> <?=GetMessage("MFT_NAME")?><?if(empty($arParams["REQUIRED_FIELDS"]) || in_array("NAME", $arParams["REQUIRED_FIELDS"])):?><span class="mf-req">*</span><?endif?> </label> <div class="form-input"> <input type="text" name="user_name" value="<?=$arResult["AUTHOR_NAME"]?>"> </div> </div> <div class="field mf-email"> <label class="field-title"> <?=GetMessage("MFT_EMAIL")?><?if(empty($arParams["REQUIRED_FIELDS"]) || in_array("EMAIL", $arParams["REQUIRED_FIELDS"])):?><span class="mf-req">*</span><?endif?> </label> <div class="form-input"> <input type="text" name="user_email" value="<?=$arResult["AUTHOR_EMAIL"]?>"> </div> </div> <div class="field mf-message"> <label class="field-title"> <?=GetMessage("MFT_MESSAGE")?><?if(empty($arParams["REQUIRED_FIELDS"]) || in_array("MESSAGE", $arParams["REQUIRED_FIELDS"])):?><span class="mf-req">*</span><?endif?> </label> <div class="form-input"> <textarea name="MESSAGE" rows="5" cols="40"><?=$arResult["MESSAGE"]?></textarea> </div> </div> <?if($arParams["USE_CAPTCHA"] == "Y"):?> <div class="field mf-captcha"> <label class="field-title"><?=GetMessage("MFT_CAPTCHA")?></label> <input type="hidden" name="captcha_sid" value="<?=$arResult["capCode"]?>"> <img src="/bitrix/tools/captcha.php?captcha_sid=<?=$arResult["capCode"]?>" width="180" height="40" alt="CAPTCHA"> </div> <div class="field"> <label class="field-title"><?=GetMessage("MFT_CAPTCHA_CODE")?><span class="mf-req">*</span></label> <div class="form-input"><input type="text" name="captcha_word" size="30" maxlength="50" value="" style="width:auto;"></div> </div> <?endif;?> <input type="submit" name="submit" value="<?=GetMessage("MFT_SUBMIT")?>"> </form> </div>
/bitrix/templates/шаблон/components/bitrix/main.feedback/template/style.css
div.mfeedback {} div.mf-name, div.mf-email, div.mf-captcha, div.mf-message {width:80%; padding-bottom:0.4em;} div.mf-name input, div.mf-email input {width:60%;} div.mf-message textarea {width: 60%;} span.mf-req {color:red;} div.mf-ok-text {color:green; font-weight:bold; padding-bottom: 1em;}
/bitrix/templates/шаблон/components/bitrix/main.feedback/template/lang/ru/template.php
<? $MESS ['MFT_NAME'] = "Ваше имя"; $MESS ['MFT_EMAIL'] = "Ваш E-mail"; $MESS ['MFT_MESSAGE'] = "Сообщение"; $MESS ['MFT_CAPTCHA'] = "Защита от автоматических сообщений"; $MESS ['MFT_CAPTCHA_CODE'] = "Введите слово на картинке"; $MESS ['MFT_SUBMIT'] = "Отправить"; ?>
Результатом работы станет
ввв
02.12.2019Где и как это все в конце вызывать ?