Матвей Земсков

Заметки веб-мастера

Создание компонента «Заказ обратного звонка» для CMS «1С-Битрикс»

Используемые инструменты и технологии:

  • HTML, CSS
  • jQuery, AJAX
  • PHP, Bitrix Framework
 

Описание:

Форма заказа обратного звонка в последнее время пользуется популярностью. Поэтому я решил создать компонент «Заказ обратного звонка» для CMS «1С-Битрикс». К тому же бесплатного решения в каталоге готовых решений я не нашел. Компонент будет работать с любой редакцией системы, начиная от редакции «Старт».

Компонент «Заказ обратного звонка» представляет из себя всплывающую форму, включающую в себя следующие поля:

  • Имя посетителя
  • Телефон посетителя
  • Удобное время для звонка

Также настройки компонента «Заказ обратного звонка» позволяют добавлять в форму поле для ввода сообщения от посетителя.

У компонента есть возможность включения защиты от автоматических сообщений (CAPTCHA) для неавторизованных пользователей.

Компонент имеет возможность сохранять данные от посетителей в информационном блоке.

Скачать компонент «Заказ обратного звонка»

Инструкция по установке:

  1. Скачайте архив с компонентом по ссылке с этой страницы
  2. Разархивируйте его и загрузите на сервер, в папку /bitrix/components/
  3. Разместите код вызова компонента в шаблоне сайта

    PHP

    	
    	<?
    		$APPLICATION->IncludeComponent("mattweb:callback", ".default", array(
    			"USE_CAPTCHA" => "Y",
    			"OK_TEXT" => "Спасибо, ваше сообщение принято.",
    			"EMAIL_TO" => "mail@domen.ru",
    			"USE_MESSAGE_FIELD" => "Y",
    			"SAVE_FORM_DATA" => "Y",
    			"REQUIRED_FIELDS" => array(
    				0 => "NAME",
    				1 => "PHONE",
    				2 => "MESSAGE",
    			),
    			"EVENT_MESSAGE_ID" => "FILL_CALLBACK_FORM",
    			),
    			false
    		);?>

    Также нужно добавить ссылку, при клике по которой будет появляться форма:

    HTML

    <a href="#" class="call_btn">Заказать звонок</a>

    Добавить JS-код, который будет «показывать» форму:

    JavaScript

        $('a.call_btn').click(function(event){
    	showOverlay();
    	$('#form_wrapper_call').show();
    	ajustScrollTop('#form_wrapper_call');
    	event.preventDefault();	
        });
  4. В административной части сайта (Настройки→Почтовые события→Типы почтовых событий) создайте новый тип почтового события с именем ‘FILL_CALLBACK_FORM’ и почтовый шаблон к нему. Заполните поля форм так же как показано на скриншотах: создание типа почтового события и создание почтового шаблона

После проведения указанных настроек компонентом «Заказ обратного звонка» можно пользоваться.

Скачать компонент «Заказ обратного звонка»

  • Большое изображение
Прочитано 8787 раз