Главная  /  Разработки   /  1C-Bitrix   /  1С-Битрикс, контактная форма с валидацией номера

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'] = "Отправить";
?>

Результатом работы станет

Занимаюсь сайтами с 2005 года, начинал еще с narod.ru и ucoz :-)

Оставить комментарий
Нажимая кнопку «Отправить», я принимаю пользовательское соглашение и подтверждаю, что ознакомлен и согласен с политикой конфиденциальности этого сайта.