Разработка

Очень часто народ спрашивает на drupal.ru, как же сделать кнопку с формой заказа обратного звона для посетителей. Делается это совсем не сложно, я даже засек, абсолютно с голой идеи для статьи до момента завершения я потратил 3 минуты (включая время на раздумье как делать).

В общем делается это ну вообще нисколько не сложно, всего-то надо модуль Webform и руки. Начнем пожалуй с простого, во что я вникать не буду. Создаем новую форму для обратного звонка. В неё добавляйте какие нужно поля, я думаю это не составит особого труда, а если вы не работали с вебформами, то рекомендую почитать гайд, а потом приступать. Я сделал такую форму:

После того как ваша форма готова, подключите новый js файл к вашей теме, или используйте уже готовый для вставки нужного кода.  И вставляем копипастом туда то что я накатал:

(function($) {
	$(document).ready(function () {
		// Укажите NID с формой.
		var nodeId = 2;
		// Селектор формы.
		var formSelector = ".node > .content»;
 
		// Обрабатываем клик по кнопке «Заказать звонок“.
		// Если хотите использовать on вместо live, ставьте модуль jQueryUpdate.
		$("#call-me»).live(«click“, function(event){
			// Добавлям только один раз.
			if ($("#call-me-form»).length == 0) {
				$(«body“).append("<div id='call-me-form'></div>“);
			}
 
			// Добавляем закрытие окна.
			$('#call-me-form').load('/node/' + nodeId + ' ' + formSelector, function() {
				$("#call-me-form“).append("<a href='#' id='call-me-close'>Закрыть</a>“);
			});
		});
 
		// Обработчик закрытия окна.
		$("#call-me-close»).live(«click“, function(event){
			$("#call-me-form“).remove();
		});
	});
})(jQuery);

Не забудьте поменять NID на соответствующий форме заказа звонка. У меня стоит 2, так как форма находится по адресу: node/2. А также изменить селектор контента где находится форма. По умолчанию стоит для бартика, у вас же будет свой селектор под ту тему которую вы используете.

Далее создайте новый блок или просто где это необходимо, в котором разместим кнопку для вызова нашей формы:
<a href="#“ id="call-me» class="button">Заказать звонок</a>

Теперь при нажатии на кнопку будет грузиться наша форма, но она будет появляться в самом низу страницы. Для этого просто накатаем пару строчек CSS чтобы он был вверху и в более-менее подобающем виде:

#call-me-form {
  position: fixed;
  left: 40%;
  top: 200px;
  width: 390px;
  padding: 15px;
  background: rgb(250, 250, 250);
  border: 3px solid rgb(202, 202, 202);
  border-radius: 3px;
  box-shadow: 0 8px 30px 0 rgb(213, 213, 213);
}
 
#call-me-close {
  position: absolute;
  top: 5px;
  right: 10px;
  color: rgb(75, 75, 75);
  font-weight: bold;
}

Вот и все, после нажатия на кнопку заказа звонка будет появляться такая формочка, которая легко редактируется через webform, а также позволяет отслеживать заявки и прочие прелести модуля.

​

Оригинал статьи && первоисточник.