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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

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

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

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

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Данные будут отправляться с использованием метода 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).

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Получить

Метки:

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

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

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

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

  1. Сергей

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

  2. Александр

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

    • Александр

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree