Самые комментируемые за месяц

Форма отправки данных с любыми полями на 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#

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