Обратный звонок для сайта. Часть 2

Обратный звонок для сайта

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

скачать исходникискачать урок

Для привлечения внимания посетителей, к кнопке показа формы обратной связи, мы с Вами в стилях CSS определили две покадровые анимации, с псевдонимами shadow и pulse. При этом мы задали параметры анимационных эффектов, но не указали, что именно будет выполняться при работе анимации. А значит, давайте сформируем параметры анимации pulse (в файл стилей style.css добавим следующие строки).

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Правило @keyframes – позволяет описать анимацию CSS свойств, выбранного элемента в виде перечня состояний элемента в определенные моменты времени. Обратите внимание, что метки времени указываются в виде определенного процента от общего времени выполнения анимации. Каждая метка времени, задает конкретное состояние элемента, то есть значения свойств CSS – размеры, позиция, поворот и т.д. В соответствии с этим для начала, мы добавим пульсацию кнопки, то есть ее поочередное увеличение и уменьшение, а затем сделаем несколько поворотов на 10 градусов в обе стороны. Далее опишем очень простые параметры анимации shadow:

Здесь в течении всего времени анимации, мы плавно будем увеличивать блок с классом .telButton_border, то есть рамку кнопки.

На этом работа с кнопкой, что касается CSS, закончена. Теперь давайте стилизуем форму обратного звонка. Первым делом определим правила для блока с классом window_wrap, который должен затенять абсолютно весь контент, когда форма обратного звонка будет показана на экран.

При этом ширина и высота данного блока указана как 100%, прозрачность 0.7 и изначально он скрыт. Затем добавим правила, для оформления основного контейнера формы:

После этого стилизуем кнопку закрытия окна с формой.

И напоследок, добавляем правила, для тега <p>, текстовой области формы, а так же кнопки отправки данных формы.

Конечно, пока результат нашей работы мы не увидим, так как форма скрыта, поэтому давайте в файл script.js добавим логику появления формы обратного звонка.

То есть при помощи библиотеки jQuery, выбираем блок с классом telButton и регистрируем функцию обработчик события клик мышью. То есть, как только пользователь кликнет мышью по кнопке, мы отобразим на экран окошко с формой обратной связи.

При этом пока, закрыть данную форму мы с Вами не можем, так как логика закрытия формы еще не прописана, а значит давайте, это исправим. При этом условимся, что модальное окно будет закрываться при двух условиях: первое – клик мышью по кнопке закрытия окна, второе – клик мышью по любой произвольной области отличной от контейнера формы обратного звонка. А значит, опишем логику закрытия модального окна, используя кнопку закрытия.

И второе условие.

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

Напомню, что работая с функцией обработчиком события, мы получаем доступ к свойству this, в котором содержится объект выбранного элемента. При этом в свойстве target, объекта event, который передается в качестве первого аргумента при вызове функции обработчика, содержится объект элемента, для которого сработало событие. И если оба вышеупомянутых объекта совпадут – значит, модальное окно следует закрыть. Теперь давайте опишем код отправки данных, добавленных в форму, обратного звонка.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Данные будут отправляться с использованием метода AJAX, а значит необходимо выбрать при помощи библиотеки jQuery кнопку отправки формы и зарегистрировать функцию обработчик события клик.

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

Затем скрываем форму, используя анимационный эффект fadeout, и обращаемся к методу jQuery ajax(), для асинхронной отправки данных на сервер. При этом данные, в виде параметра tel, будут направляться в файл srv.php, который необходимо создать в корне нашего проекта. Выше указанный файл в качестве ответа, будет возвращать данные в формате строки JSON, а значит указываем это в параметре dataType. При этом в функцию обработчик свойства success, будет передана переменная json, в которую автоматически будет помещен объект, после декодирования строки ответа.

При этом если в текущем объекте, присутствует свойство error, значит на стороне сервера возникла ошибка. В этом случае форма обратной связи будет повторно показана на экране и отображено сообщение о ошибке, с использованием alert().
Если же ошибок нет, на экран покажется сообщение “Заявка принята!” и модальное окно будет скрыто. Теперь открываем файл srv.php и опишем логику серверной стороны.

Для начала проверим – пришли ли данные методом POST и если это так, получим содержимое, отправленное в запросе, предварительно обработав его функцией strip_tags().

При этом, если в переменной $tel, будет храниться пустое значение, соответственно пользователь не указал номер телефона, а значит нет смысла далее выполнять какие либо действия. То есть формируем ответ – массив с ячейкой error, кодируем его в строку JSON, отображаем на экране и завершаем работу приложения.

Если вышеуказанное условие на срабатывает значит, мы можем отправить сообщение на определенный электронный ящик, с запросом обратного звонка. Для этого мы используем достаточно известную библиотеку Swiftmailer.

Для ее установки воспользуемся инструментом Composer и для этого выполняем в консоли, следующую команду.

После этого подключаем библиотеку к нашему проекту.

Затем формируем сообщение, создав объект класса Swift_Message:

При этом используются следующие методы:

setSubject() – задет тему будущего сообщения;

setFrom() – определяет отправителя;

setTo() – задает адрес на который будет отправлено письмо;

setBody() – формирует содержимое письма.

Далее необходимо определить драйвер отправки сообщения, так называемый транспорт.

Мы используем драйвер, который в своей работе задействует стандартную функцию PHP mail(). Далее создаем объект глобального объекта библиотеки и при этом передаем объект используемого драйвера:

И наконец, отправляем созданное сообщение и заканчиваем работу данного скрипта (полный код файла srv.php).

Если протестировать работу приложения в целом – мы увидим, что вот такое сообщение будет отправлено на электронный ящик.

Вот собственно и все о чем я хотел рассказать Вам в данном уроке, сервис обратный звонок реализован а значит Вы можете использовать его на своих страницах. Всего Вам доброго и удачного кодирования!!!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (5)

  1. Сергей

    Спасибо за статью, сейчас пользуюсь обратным звонком CallCons

  2. Александр

    Здравствуйте.Большое спасибо за ваши уроки и статьи.Я не особо шарю в программировании.Просто интересна тема создания сайтов.По мере возможности изучаю.Ну и другу помогаю с сайтом.Вот решил попробовать сделать такую кнопку.Пока только на первом этапе.Возник нюанс.Стили к кнопке применились, а вот скрипт не работает.Сам скрипт я добавил в папку шаблона сайта.Да,кстати сайт на Джумле и библиотека jQuery там подключена по умолчанию,поэтому библиотеку я не добавлял.Только стили и скрипт.Скрипт подключил в файле idex.php.
    $doc->addScriptVersion($this->baseurl . '/templates/' . $this->template . '/js/script.js');
    Буду благодарен,если подскажете решение задачи.В интернете находил вариант с заменой $ на jQuery . Не помогло.

    • Александр

      Со скриптом разобрался.Я все функции добавил в Джумловский скрипт.Всё отлично работает.Но есть ещё один вопрос.Как можно по клику данной кнопки вызывать модуль Джумлы? Дело в том что на сайте есть некий модуль для обратной связи,который тоже вызывается при нажатии кнопки меню.Там выводятся данные о графике работы магазина и есть отправка письма с сообщением через стандартную отправку почты в Джумле через smtp. Вот и хотелось бы с помощью данной кнопки вызывать данный модуль.Сейчас он вызывается через пункт меню с помощью сласса css. Может быть подскажете.

  3. Eandy

    Спасибо за урок!
    Заметил один баг, когда заявка отправлена, но вдруг захотелось еще раз отправить, например ошибся при вводе телефона, нажимаем на конному звонка, открывается форма, но там текст «ЗАЯВКА ПРИНЯТА!». Как сделать, чтобы можно было сново вводить телефон?

  4. Eandy

    Еще вопрос, пытался сделать чтобы в форме было еще и имя, но не знаю как его добавить в js и в php.