Форма отправки данных с любыми полями на 1С-Битрикс «Старт»

24 марта 2013, 21:05

Сегодня расскажу как сделать форму обратной связи с любыми типами полей, используя стандартный функционал и почтовые события 1С-Битрикс. Особенно это актуально для редакции 1С-Битрикс «Старт», так как в ней нет модуля «веб-формы».

Сначала создаем обычную html форму в любом месте на сайте, где она нам нужна. Она может быть во всплывающем окошке или просто на странице сайта, не важно... Ее код может выглядеть примерно как в приведенном примере.

<form id="request-order-form" action="">
    <div>
         <h2>Форма заказа</h2>

        <div class="controls">
            <label>Имя</label>
            <div class="input"> <span class="required">*</span>

                <input type="text" id="form-user-name" />
            </div>
        </div>
        <div class="controls">
            <label>Телефон</label>
            <div class="input"> <span class="required">*</span>

                <input type="text" id="form-user-phone" />
            </div>
        </div>
        <div class="controls">
            <label>E-Mail</label>
            <div class="input"> <span class="required">*</span>

                <input type="text" id="form-user-email" />
            </div>
        </div>
        <div class="controls">
            <label>Комментарий</label>
            <textarea id="textarea" rows="3"></textarea>
        </div>
    </div>
    <div class="actions">
        <button type="submit" class="btn">Отправить</button>
    </div>
</form>

Важно задать стили или идентификаторы форме и элементам, так как необходимо будет обращаться к ним при помощи jQuery.

Далее идем в подключенный файл javascript или можно подключить отдельный файл javascript к шаблону сайта. Вставляем туда код javascript моего примера.

$(document).ready(function(){ 
	orderForm.validform();
});



var orderForm = {
	validform: function(){
        var errors = false;
		
		var regPhone = /^[\(\)\[\]\s\\\/\-0-9\+]{5,250}$/i;
		var regMail = /^([a-z0-9_\-]+\.)*[a-z0-9_\-]+@([a-z0-9][a-z0-9\-]*[a-z0-9]\.)+[a-z]{2,4}$/i;
		
        var highlight = function(type, field){
            switch (type) {
                case 'ok':
                    field.parent("div.input").removeClass("error");
                    break;
                case 'err':
                    field.parent("div.input").addClass("error");
					errors = true;
                    break;
            }
            if(errors){
                field.attr({error: 'yes'});
            }
        }
        // по нажатию submit
        $("#request-order-form button:submit").click(function(){
            $('[error]').removeAttr('error');
			
			var name = $('#request-order-form input#form-user-name');
            if (name.val().length > 1) {
               highlight('ok', name);
            } else {
                highlight('err', name);
            }
			
			var email = $('#request-order-form input#form-user-email');
			if (regMail.test(email.val())) {
               highlight('ok', email);
            } else {
                highlight('err', email);
            }
			
			var phone = $('#request-order-form input#form-user-phone');
			if (regPhone.test(phone.val())) {
               highlight('ok', phone);
            } else {
                highlight('err', phone);
            }	
			
            if (errors) {
                errors = false;
            } else {
				var text = $('#request-order-form textarea#textarea').val();
				
				function onAjaxSuccess(data) {
					alert("Спасибо, Ваш заказ успешно отправлен.");
				}
				$.post('/ajax.php', { 
					name:name.val(),
					email:email.val(),
					phone:phone.val(),
					text:text
				}, onAjaxSuccess);
            }
			return false;
        });
    },
}

Там идут различные проверки валидности заполения формы и формируются переменные из введенных данных для отправки ajax запроса на сервер. Можно создать сколько угодно разных полей в форме, прописать обработчики для них в javascript файле и назначить переменные для отправки ajax запроса.

Далее необходимо создать файл ajax.php в корне сайта, либо в любой другой дирректории. В моем примере, в коде javascript используется корневая дирректория. В этот файл необходимо прописать такой код:

<?
define("NO_KEEP_STATISTIC", true);
define("NOT_CHECK_PERMISSIONS", true);
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
	$arSend = array(
		"NAME" => htmlspecialchars($_POST['name']),
		"EMAIL" => htmlspecialchars($_POST['email']),
		"PHONE" => htmlspecialchars($_POST['phone']),
		"TEXT" => htmlspecialchars($_POST['text']),
	);
	CEvent::Send('ORDER',SITE_ID,$arSend);
}
?>

Осталось создать тип события и шаблон отправки письма для него. В моем примере тип события имеет имя ORDER. Заходим в административную часть сайта на 1С-Битрикс, переходим по адресу: Настройки > настройки продукта > почтовые события > типы почтовых событий. Добавляем новый тип с названием которое прописали в файле ajax.php.

Теперь необходимо создать шаблон отправки для этого почтового события. Переходим по адресу Настройки > настройки продукта > почтовые события > почтовые шаблоны. Создаем новый шаблон для нашего почтового события. Переменные в тексте письма можно выводить используя названия заданные в файле ajax.php, в моем примере это будет выглядеть так:

Имя: #NAME#
Контактный телефон: #PHONE#
Контактный e-mail: #EMAIL#
Текст сообщения: #TEXT#

Вот и все, надеюсь кому-нибудь поможет.

12 комментариев РСС

В?тал?к

Здравствуйте, делаю по вашему примеру но при клике на кнопку отправки формы окно fancybox закрывается и не выполняется никакая проверка на валидность. Возможно подскажете в чем ошибка (я токо недавно скрипты начал изучать). Пример где я делаю — http://filprom.com.ua/test/

Михаил

Спасибо! То что искал!

Ваня

Спасибо за статью! Очень помогли!

Михаил

Спасибо! делал точно таким же способом, только отправлял сразу из принимающего скрипта, про то что можно подключиться к почтовым шаблонам, догадывался, но разбираться не хотелось) Еще раз спасибо))

Дмитрий

Спасибо, выручил!

Иван

Вот тут еще подробно расписано, и можно создавать нестандартные поля и передавать в них информацию: http://smartlanding.biz/kak-dobavit-svoi-polya-dlya-formirovaniya-lidov-v-crm-bitrix24.html

Зоя

Здравствуйте. у меня такая же проблема как и у Виталия. Как ее решить?

Андрей

Пароль по этому методу нет возможности валидировать. Болванка крутая) Спасибо

wwwwwwwwwww

wwwwwwwwwwwwwwwwwwwwwwww

а где же защита?

а где же защита?а где же защита?а где же защита?а где же защита?а где же защита?а где же защита?а где же защита?а где же защита?а где же защита?а где же защита?а где же защита?а где же защита?а где же защита?а где же защита?а где же защита?а где же защита?а где же защита?

ss

ss

Плюснин Артём

Спасибо, данная статья действительно мне помогла. Искал пол часа, как же правильно будет реализовать ajax-валидацию формы.

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter