Улучшаем модуль Ajax Call me back

При работе над одним из проектов, потребовалось реализовать простенькую форму заказа обратного звонка. Было принято решение использовать модуль Ajax Call me back.

По задумке дизайнера, обёртка формы должна изменять не только горизонтальный, но и вертикальный размер при открытии. Кроме того, был выявлен ряд недостатков самого модуля:

его нельзя "свернуть" обратно после открытия, что доставляет серьёзные неудобства при просмотре сайта с мобильного телефона;
отсутствует проверка вводимых пользователем данных;
нельзя назначить обязательные для заполнения поля.

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

Для работы нам понадобится файл tmpl/default.php нашего модуля. Находим в нём следующие строки:

$('amCallMeBackShowForm').addEvent('click', function(event) {
    event.stop();
    $('amCallMeBackIntro').destroy();
    $('amCallMeBackForm').setStyle('display','block');
  });

И заменяем их на:

  $('amCallMeBackShowForm').addEvent('click', function(event) {
    event.stop();
    $('amCallMeBackIntro').setStyle('display','none');
    $('amCallMeBackForm').setStyle('display','block');
    $('amCallMeBackWrap').setStyle('width','250px');
    $('amCallMeBackWrap').setStyle('height','310px');
  });

Что мы тем самым сделали? Окно имеет 3 вида: amCallMeBackIntro - вступительная часть и amCallMeBackForm - непосредственно форма, а так же финальное окно с сообщением об отправке. Поскольку нам нужна возможность сворачивать форму после открытия, использование $('amCallMeBackIntro').destroy(); нам не подходит. Блок #amCallMeBackIntro нужно просто спрятать следующим нехитрым способом: $('amCallMeBackIntro').setStyle('display','none');
Вторую строку оставляем без изменений, она идеально вписывается в наш замысел.
Осталось только дописать изменение размеров "обёртки" нашего модуля. Теперь при нажатии мы получим окно совершенно иных размеров, что нам и требовалось.

Затем нужно добавить обработку события при клике на вступительный текст внутри развернувшегося блока с формой, чтобы после клика блок "закрылся". Т.е. вернул нам первоначальный вид вступительного текста amCallMebackIntroText, а так же изменил размер обёртки модуля на нужный:

$('amCallMebackIntroText').addEvent('click', function(event) {
    event.stop();
    $('amCallMeBackForm').setStyle('display','none');
    $('amCallMeBackIntro').setStyle('display','block');
    $('amCallMeBackWrap').setStyle('width','142px');
    $('amCallMeBackWrap').setStyle('height','auto');
  });

Но и это ещё не всё. Части пользователей будет непонятно, что форма "прячется" обратно при нажатии на текст. Логичнее добавить туда кнопку её закрытия. Для этого в форму добавляем ещё один блок, который будет содержать кнопку закрыть <div id="amClose"></div>.
Осталось только прописать для него стиль

#amClose {
width: 25px;
height:25px;
position:relative;
top:-32px;
right:-5px;
background:url('close.png') no-repeat 0 0;
float:right;
}

Кнопка закрыть добавлена в правый верхний угол формы. Далее нам нужен обработчик клика по этой кнопке

  $('amClose').addEvent('click', function(event) {
    event.stop();
    
    $('amCallMeBackForm').setStyle('display','none');
    $('amCallMeBackIntro').setStyle('display','block');
    $('amCallMeBackWrap').setStyle('width','142px');
    $('amCallMeBackWrap').setStyle('height','auto');
  });

Тестируем форму. Обращаем внимание на то, что после её отправки на финальном окне кнопки закрыть уже нет. Значит нужно её добавить. Например, вот так, заменив код:

  
      $('amCallMeBackForm').set('html', '<?php echo $amSendedText; ?>');
        }
    }).send();

на:

  
 $('amCallMeBackForm').set('html', '<?php echo '<div id="amClose2"></div>'.$amSendedText; ?>');
    $('amClose2').addEvent('click', function(event) {
    event.stop();
    $('amCallMeBackForm').setStyle('display','none');
    $('amCallMeBackIntro').setStyle('display','block');
    $('amCallMeBackWrap').setStyle('width','142px');
    $('amCallMeBackWrap').setStyle('height','auto');
  });
        }
    }).send();

Теперь мы можем легко не только развернуть, но и свернуть нашу форму заказа.

Осталось добавить проверку заполняемых пользователем полей. Заказчику требовалось просто определять заполнено ли поле любыми данными, поэтому меняем код:

 
<input type="text" name="name" class="amCallMeback-input" value="<?php echo $amNameText; ?>" />
        <br />
        <input type="text" name="phone" class="amCallMeback-phone" value="<?php echo $amPhoneText; ?>" />

на:

 
<?php echo $amPhoneText; ?>
<input type="text" name="phone" class="amCallMeback-phone" value="" required />
        <br /><?php echo $amNameText; ?>
        <input type="text" name="name" class="amCallMeback-input" value="" />
        <br />
        <input type="submit" value="<?php echo $amButtonText; ?>" class="amCallMeback-button" />

Всё, наша форма готова. Осталось привести общий вид формы под нужный нам цвет и размер.

Вот так выглядит готовый вариант формы запроса обратного звонка на работающем проекте:
Доработанный модуль заказа обратного звонка

Доработанный модуль заказа обратного звонка

Стандартно в модуле Ajax Call me back есть картинка + текст. В примере данной статьи была убрана картинка и оставлен только текст. Вам нужно сделать всё наоборот и заменить стандартную картинку по адресу /modules/mod_amcallmeback/assets/callmeback.png на свою.

Файл с кодом, где нужно убрать вывод текста, скорее всего легко ищется по имени файла картинки.

Есть ещё одно интересное решение, которое позволяет создать интересную форму обратной связи. Оно потребует меньше копания в коде. Это связка Jpanel и Fox Contact Form (или любого другого компонента для создания форм).

Jpanel позволяет легко создать выезжающую с любой стороны экрана панель, в которую вставляется модуль с готовой формой. В стандартный функционал Jpanel уже входит установка картинки вместо надписи. Кроме того, в админке можно выбрать выезд панели по клику или при наведении.

#5 Владимир 2013-11-01 18:17:27

Поставил consultant-web callme, так как сам не разбираюсь в программировании

Новое в блоге

Контакты

Создание сайта интернет-магазина на основе шаблонов

Владельцев сайтов заставят платить госпошлину

Специалист по сайтам

8 (3452) 58 93 85 (Анатолий)

mail@2v3.su

Internet Explorer снова стал первым среди браузеров

Специалист по видео

8 (929) 264 1523 (Константин)