Форма обратной связи в модальном окне



форма обратной связи в модальном окне

Красивая форма обратной связи на основе AJAX

Предоставление посетителям сайта простого и надежного средства обратной связи – это важнейшая часть любого веб-проекта. Наиболее простым и часто используемым каналом обратной связи #8212 являются контактные формы. Посмотреть результат можно здесь.

В сегодняшней статье, мы создадим форму обратной связи на аяксе. с использованием современных техник веб-разработки. Для этого мы будем использовать PHP, CSS и jQuery в виде нескольких плагинов. Плагин formValidator будем использовать для проверки введенных значений, а с помощью плагина jQTransform. будем стилизовать текстовые поля и кнопки нашей формы. В дополнение, мы будем использовать класс PHPMailer для отправки на почту введенных данных.

Кроме того, наша форма будет прекрасно работать даже с выключенным JS.

*Для нормальной работы примера, вам понадобится PHP5

Шаг 1 – XHTML

Сначала нам понадобится XHTML-разметка для формы.

Как вы могли заметить в строке 8, обрабатывать нашу форму будет файл submit.php. Мы будем использовать этот файл в обоих случаях – как для обычной отправки формы (для посетителей с выключенным JS), так и для аяксовой отправки формы. Это позволит легко обновлять код, без необходимости объединять изменения между файлами.

Далее, мы можете видеть, что мы используем массив $_SESSION для заполнения текстовых полей значениями. Это делается для того, чтобы данные не потерялись во время перенаправления страницы, которое происходит во время отправки формы в submit.php .

Другой важный аспект – это классы, назначенный текстовым полям – classs=”validate[required,custom[onlyLetter]]”. Эти классы используются плагином валидации для определения правил проверки введенных значений для каждого текстового поля. В нашем примере, мы указываем, что поле обязательное, и разрешено вводить только буквы.

Существует множество доступных правил валидации, вы можете узнать о них на домашней странице плагина.

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

Шаг 2 – jQuery

МЫ используем два плагина jQuery – jQtransform для стилизации элементов формы, и formValidator для проверки введенных значений на клиентской стороне.

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

Итак, для начала нам нужно подключить все необходимые библиотеки.

Указанный выше код расположен в секции head. файла demo.php. Сначала мы подключаем CSS-файлы, используемые обоими плагинами, а затем уже библиотеку JQuery и плагины. Возможно, вас заинтересовала строка 5 – это специальный набор CSS-правил, который мы создадим с помощью PHP, для отображения подтверждающего сообщения, как вы увидите в дальнейшем.

Теперь, давайте посмотрим на наш файл script.js .

Весь блок скрипта выполняется внутри метода $(document).ready. который гарантирует нам, свое исполнение, только после окончания загрузки страницы.

Далее, мы используем метод jqTransform(). который определен в плагине jqtransform. Он переделывает и стилизует все элементы формы (тестовые поля, кнопки и др.)

Элемент select заменяется набором дивов и ссылок. Это выглядит здорово, однако влечет за собой некоторые проблемы с плагином валидации, в связи с чем, тултип для селекта нам придется сделать вручную.

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

Далее, мы инициализируем плагин formValidation. с помощью метода validationEngine() и в строке 24 описываем событие формы onsubmit. Пара моментов, на которые стоит обратить внимание здесь – отдельный тултип в строке 28, и дополнительный параметр ajax=1. в строке 39. Этот параметр использует файл submit.php. для того чтобы определить, передан ли запрос с помощью аякса или получен непосредственно через отправку формы.

Также, обратите внимание, что мы используем специальную переменную use_ajax. для предотвращения работы аякса, если форма не прошла проверку.

Шаг 3 – CSS

Все наши CSS-правила описаны в файле demo.css

Обратите внимание на строку 85. Это правило делает кнопки шире, но, к сожалению это плохо выглядит в IE6. Поэтому мы используем специальный CSS-селектор, который игнорируется IE6, но отлично понимают остальные браузеры.

Теперь, все что нам осталось – это PHP.

Шаг 4 – PHP

Сначала давайте рассмотрим код в начале файла demo.php

Как видите, мы используем массив $_SESSION для хранения двух случайных чисел и ожидаемого результата. Это будет использоваться в дальнейшем, файлом submit.php. для подтверждения того, что капча решена.

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

Обратите внимание как мы проверяем переменную $_POST[‘ajax’] на предмет установки и правильной работы. Как вы наверное помните, мы устанавливаем ее ранее, в файле script.js. для определения используется ли аякс для извлечения данных.

Две переменные массива $_SESSION errStr и post используются для совместного использования данных между формой и файлом submit.php. в случае выключенного JS. Здесь переменная post содержит отправленный нами массив $_POST и используется для заполнения полей формы, после того как пользователь перенаправляется обратно.

На этом работа над нашей формой обратной связи подошла к концу.

Пример рабочий, за исключением одного маленького недоразумения. Плагин formValidation, создан с целью проводить валидацию только английских символов, так что если вы попытаетесь написать имя по-русски, он выдаст ошибку о том, что нужно вводить только буквы. К счастью это решается путем замены регулярного выражения в файле jquery.validationEngine.js. Найдите строчки:

и замените на следующую:

После этого, скрипт перестанет игнорировать русские символы.

В связи с бесконечными вопросами, специально, отдельно сообщаю: настройка адреса email на который производится отправка писем, находится в файле submit.php, в самом начале файла, выглядит вот так:

Всплывающая форма обратной связи

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

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

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

Реализовать данную форму можно двумя способами. Сначала мы разберем универсальный плагин, который подойдет для любого типа сайта. А затем я расскажу о том, как это сделать при помощи специального плагина для WordPress.

Универсальный плагин

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

Открываем в редакторе файл «contact. php» и обращаем свое внимание на первые 8 строк.

Переменная $to должна содержать ваш e-mail, на который будут приходить сообщения с формы.

Переменная $subject содержит тему сообщения по умолчанию.

Переменная $extra содержит дополнительную информацию, которую можно настроить ниже, поменяв значение false на true .

form_subject – добавляет в форму поле «Тема». Пользователь сам сможет указывать тему сообщения, при этом тема, установленная по умолчанию, игнорируется.

form_cc - добавляет в форму поле «Отправить мне копию». Дает возможность пользователю получать копию сообщения на свой e-mail.

ip - добавляет в сообщение ip-aдрес пользователя.

user_agent - добавляет в сообщение информацию User Agent пользователя.

Далее открываем файл «contact.js» и указываем путь до файла «contact.php» в двух местах. В случае если вы загрузили плагин в корень своего сайта, то ничего менять не нужно. Иначе - в строках 7 и 77 указываем правильный путь.

Теперь осталось подключить плагин на свой сайт. Для начала до закрывающего тега /head подключим файл стилей:

link rel='stylesheet' href='contacts/contact.css'

Обратите внимание, чтобы путь был указан правильно.

Теперь подключим библиотеку JQuery с сервера Google (если еще не подключена) добавив до закрывающего тега /body следующий код:

script src= http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js /script

А затем файлы со скриптами:

script src='contacts/js/jquery.simplemodal.js' /script

script src='contacts/js/contact.js' /script

Также обратите внимание, чтобы путь был указан правильно.

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

a href='#' class='contact' Форма обратной связи /a

Плагин для WordPress

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

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

Всплывающая форма обратной связи, как и в первом способе, привязывается к определенному классу «smcf-link». При клике по элементу с этим классом будет появляться окно с формой. Пример:

a href= # class= smcf-link Форма обратной связи /a

На этом у меня все. Надеюсь, что статья оказалась для вас полезной. Будут вопросы – пишите в комментариях, постараюсь помочь. Желаю успехов!

Как Вам статья?

Форма обратной связи в модальном окне

Шаг 1. Общее описание и работа формы обратной связи:

Сначала я Вам расскажу, какие нам файлы будут нужны и, собственно, зачем они нужны:

  • images - папка, где хранятся все изображения нашей формы
  • index.html - главный, индексный файл, в котором будет располагаться кнопка для вызова формы обратной связи
  • contact.html - файл, в котором находится сама форма. Именно этот файл будет подключаться в модальное окошечко
  • send.php - файл-обработчик, занимающийся отправкой письма
  • jquery.js - основной фреймворк jQuery
  • style.css - файл с каскадными таблицами стилей для нашей формы.

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

Шаг 2. Кнопка для вызова формы.

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

Шаг 3. Сама форма + настройки к ней

Теперь давайте разберемся, где же все-таки будет находиться наша форма обратной связи. А находиться она будет в файле contact.html. который уже расположен в исходниках урока. Данная форма совсем небольшая, поэтому ее код я расположу ниже:

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

Шаг 4. Обработчик, отвечающий за отправку писем

Здесь я быстро расскажу Вам о главном обработчике по отправке писем. Его код я не буду здесь приводить, т. к. он есть в исходниках. Скачайте и посмотрите его содержание. Если Вы знаете php где-то на среднем уровне, примерно как я, то вы без труда сможете самостоятельно разобрать весь код этого обработчика. Если все готово, то идем дальше.

Шаг 5. Прикрутка основного фреймворка jQuery

Теперь, как и в любом уроке по jQuery мы должны прикрутить основной фреймворк jQuery. Для этого вернемся немного назад, туда. где располагается наша кнопка, и между тегами head и /head вставим следующий код:

Шаг 6. Стилизация формы

Как Вы можете видеть, стили к нашей форме вынесены отдельно, в файл style.css. поскольку эти стили занимают слишком много места. Нам всего лишь надо привязать нижеприведенный код к нашему индексному файлу:

Шаг 7. jQuery-доработки

Теперь для полноценной работы модального окна формы мы должны вставить следующий jQuery-код:

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

С искренним уважением Ваш jQuery - проводник - М. К.

Источники: http://dreamhelg.ru/2009/11/fancy-ajax-contact-form/, http://online-dohod.ru/vsplyvayushhaya-forma-obratnoj-svyazi, http://ruseller.com/lessons.php?id=283






Комментариев пока нет!

Поделитесь своим мнением

Сумма: код подтверждения