Всплывающая форма обратной связи на ajax. WordPress форма обратной связи: создаем быстро и качественно

Прочие модели 26.06.2019
Прочие модели

По многочисленным просьбам пользователей, мы нашли частное решение для реализации , появляющейся при нажатии на кнопку (например «Заказать звонок»).

Для того, чтобы добавить в свою целевую страницу «всплывающую» форму:

1. Войдите в редактор страницы, в которую должна быть встроена форма.

2. Для устранения конфликта библиотек jQuery, скопируйте код, размещенный , и вставьте его через инструмент «Скрипты», установив положение «После тега :

3. С помощью инструмента «Кнопка» создайте кнопку:

Эта кнопка будет отображаться на целевой странице, поэтому текст на ней должен соответствовать целевому действию, которое последует за ее нажатием (например, «Заказать звонок!»). В строке URL вы можете указать любую ссылку (например, на основной сайт), т. к. она нужна только для создания кнопки.

4. С помощью инструмента «Форма» создайте форму:

Форма будет появляться после нажатия на кнопку, название меток должно соответствовать целевому действию (например, «Имя» и «Телефон» для кнопки «Заказать звонок!»).

7. Найдите в коде строчки:

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

8.1 В ID под номером 1 на скриншоте вам нужно вписать ID формы. Для этого кликните 1 раз по полям формы, войдите во вкладку «Расширенные» меню «Свойства» справа и скопируйте «ID якоря»:

8.2 В строке 2 на скриншоте вам нужно вписать ID кнопки, связанной с формой.
8.3 В строке 3 на скриншоте — ID кнопки, которая будет отображаться на странице.

Вот и все. «Всплывающая форма» готова.

По желанию, вы можете изменить внешний вид

Здравствуйте. В этом уроке мы будем делать полноценную форму обратной связи, причем появляться она будет в модальном окне по нажатию на кнопку на странице. Данный урок я делал сам, с нуля, воспользовавшись только фреймфорком jQuery и одним небольшим JavaScript"ом. Урок очень интересный, поэтому прошу не проходить мимо! Ниже Вы можете просмотреть демонстрацию получившейся у меня формы, а также скачать необходимые файлы для работы:

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

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

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

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

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

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

Написать сообщение администратору

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

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

Отправка Сообщения Администрации:

*Имя: *E-mail: Тема: *Сообщение:

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

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

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

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

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

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

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

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

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

$(function() { $("a").overlay(function() { var wrap = this.getContent().find("div.wrap"); if (wrap.is(":empty")) { wrap.load(this.getTrigger().attr("href")); } }); });

Заключение.

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

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

Здравствуйте, уважаемые читатели a! Однажды я уже писал о модальных окнах, то была статья . В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox . А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!

Что нам понадобится?! не так уж и много:

  • библиотека jQuery;
  • плагин fancybox;
  • сценарий PHP для отправки сообщения.
Разметка

Скачать актуальную версию плагина Вы сможете по ссылке выше. Что касается плагина fancybox , очень хороший инструмент для создания окон на веб-сайте. В окна можно включать любое содержимое видео, изображения (как по одиночке так и галереей), текст, плавающие фреймы, плагин имеет кучу настроек (о них чуть ниже) + то что он работает одинаково корректно во всех браузерах, очень радует.

Разметку не стану усложнять, просто кликаем по ссылке и открывается окно с формой отправки сообщения:

Отправить сообщение

Где значение атрибута href совпадаем с идентификатором блока div в котором располагается форма отправки письма:

1
2
3
4
5
6
7
8
9
10
11
12
13


Отправка сообщения


Ваш E-mail



Введите сообщение

Отправить E-mail

Добавим на форму два поля это текст сообщения и электронный адрес отправителя, а также кнопку оправки. После того как пользователь введет e-mail, текст сообщения и нажмет отправить сначала проведем проверку корректности введенной информации затем с помощью ajax запроса отправим данные в PHP сценарий.

Изначально форма скрыта:

#inline { display : none ; }

Стили формы

Немного стилей для оформления полей формы и пара классов применяемых к полям при не корректном вводе данных. Когда ошибки исправлены стиль полей становится нормальным.:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

Txt {
display : inline-block ;
color : #676767 ;
width : 420px ;

margin-bottom : 10px ;

padding : 5px 9px ;
font-size : 1.2em ;
line-height : 1.4em ;
}

Txtarea {
display : block ;
resize : none ;
color : #676767 ;
font-family : Arial, Tahoma, sans-serif ;
margin-bottom : 10px ;
width : 500px ;
height : 150px ;
border : 1px dotted #ccc ;
padding : 5px 9px ;
font-size : 1.2em ;
line-height : 1.4em ;
}

Txt : focus ,
.txtarea : focus {
border-style : solid ;
border-color : #bababa ;
color : #444 ;
}

Input.error,
textarea.error {
border-color : #973d3d ;
border-style : solid ;
background : #f0bebe ;
color : #a35959 ;
}

Input.error : focus ,
textarea.error : focus {
border-color : #973d3d ;
color : #a35959 ;
}

Для оформления кнопки «Отправить» будем .:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#send {
color : #dee5f0 ;
display : block ;
cursor : pointer ;
padding : 5px 11px ;
font-size : 1.2em ;
border : solid 1px #224983 ;
border-radius : 5px ;
background : #1e4c99 ;
background : -webkit-gradient(linear, left top , left bottom , from(#2f52b7 ) , to(#0e3a7d ) ) ;
background : -moz-linear-gradient(top , #2f52b7 , #0e3a7d ) ;
background : -webkit-linear-gradient(top , #2f52b7 , #0e3a7d ) ;
background : -o-linear-gradient(top , #2f52b7 , #0e3a7d ) ;
background : -ms-linear-gradient(top , #2f52b7 , #0e3a7d ) ;
background : linear-gradient(top , #2f52b7 , #0e3a7d ) ;
filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#2f52b7" , endColorstr= "#0e3a7d" ) ;
}

#send : hover {
background : #183d80 ;
background : -webkit-gradient(linear, left top , left bottom , from(#284f9d ) , to(#0c2b6b ) ) ;
background : -moz-linear-gradient(top , #284f9d , #0c2b6b ) ;
background : -webkit-linear-gradient(top , #284f9d , #0c2b6b ) ;
background : -o-linear-gradient(top , #284f9d , #0c2b6b ) ;
background : -ms-linear-gradient(top , #284f9d , #0c2b6b ) ;
background : linear-gradient(top , #284f9d , #0c2b6b ) ;
filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#284f9d" , endColorstr= "#0c2b6b" ) ;
}

#send : active {
color : #8c9dc0 ;
background : -webkit-gradient(linear, left top , left bottom , from(#0e387d ) , to(#2f55b7 ) ) ;
background : -moz-linear-gradient(top , #0e387d , #2f55b7 ) ;
background : -webkit-linear-gradient(top , #0e387d , #2f55b7 ) ;
background : -o-linear-gradient(top , #0e387d , #2f55b7 ) ;
background : -ms-linear-gradient(top , #0e387d , #2f55b7 ) ;
background : linear-gradient(top , #0e387d , #2f55b7 ) ;
filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#0e387d" , endColorstr= "#2f55b7" ) ;
}

Fancybox

Переходим к самому интересному, к использованию плагина. Вызываем метод .fancybox в качестве селектора выступает класс ссылки:

$(document) .ready (function () {
$(".modalbox" ) .fancybox () ;
$("#contact" ) .submit (function () { return false ; } ) ;

Также отменяем стандартное действие формы submit (отправить), это позволит нам использовать свой собственный ajax запрос. При вызове метода я не использовал не одного параметра, оставил все значения по умолчанию. Однако о них стоит упомянуть:

Название Описание
padding Отступы до содержимого в окне (По-умолчанию 15px)
margin Расстояние от краев браузера до окна (По-умолчанию 20px)
width Ширина по умолчанию для «IFRAME» и «SWF» содержимого. Кроме того, для «inline», «AJAX» и «HTML» объектов если «AutoSize» устанавливается на «false». Может быть числовым или «Auto». (По-умолчанию 800px)
height Высота по умолчанию для «IFRAME» и «SWF» содержимого. Кроме того, для «inline», «AJAX» и «HTML» объектов если «AutoSize» устанавливается на «false». Может быть числовым или «Auto». (По-умолчанию 600px)
minWidth Минимальная ширина окна (По-умолчанию 100px)
minHeight Минимальная высота окна (По-умолчанию 100px)
maxWidth Максимальная ширина окна (По-умолчанию 9999px)
maxHeight Максимальная высота окна (По-умолчанию 9999px)
autoSize Если «true», то autoHeight и autoWidth также «true» (По-умолчанию true)
autoHeight Если установлен «true», для «inline», «AJAX» и «HTML» содержимого высота определяется автоматически (По-умолчанию false)
autoWidth Если установлен «true», для «inline», «AJAX» и «HTML» содержимого ширина определяется автоматически (По-умолчанию false)
autoResize Если установлено «true», то размер содержимого будет изменяться вместе с изменением окна
autoCenter Если установлено «true», то содержимое будет по центру
fitToView Если установлено «true», то окно будет подстроено под размер браузера перед открытием (По-умолчанию true)
aspectRatio Если установлено «true», то изменение размера ограничено соотношением сторон (По-умолчанию false)
topRatio Вертикальное позиционирование. Если установлено 0.5 то расстояние до верха и низа окна браузера будет одинаково. Если 0 то модальное окно будет сверху (По-умолчанию 0.5)
leftRatio Аналогичный параметр только для горизонтального позиционирования (По-умолчанию 0.5)
scrolling Показывать полосы прокрутки. Может быть установлено ‘auto’, ‘yes’, ‘no’ или ‘visible’ (По-умолчанию auto)
wrapCSS Настраиваемый класс CSS
arrows Если установлено «true», то будут отображаться навигационные кнопки (По-умолчанию true)
closeBtn Если установлено «true», то кнопка закрыть окно будет отображаться (По-умолчанию true)
closeClick Если «true», то при нажатии на содержимое окно закроется (По-умолчанию false)
nextClick Если установлено «true», то в галерее при нажатии на содержимое будет переход к следующей картинке (По-умолчанию false)
mouseWheel Если «true», то галерею можно прокручивать с помощью колесика мыши (По-умолчанию true)
autoPlay Если «true», то при открытии первого элемента галерее начнется слайдшоу (По-умолчанию false)
playSpeed Скорость слайдшоу (По-умолчанию 3000 миллисекунд)
preload Количество картинок миниатюр под основным изображением (По-умолчанию 3)
modal Если «true», навигация и кнопка закрытия будет отключена (По-умолчанию false)
loop Если «true», то в галерее после достижения конца, начнется заново (По-умолчанию true)
ajax Опция для ajax запроса
iframe Опция для управления iframe
swf Опция для управления swf содержимым
keys Можно определить клавиши для навигации по слайдшоу
direction Направление навигации
scrollOutside Если установлено «true», то сценарий будет избегать создания полос прокрутки (По-умолчанию true)
index Переопределяет индекс группы начала (По-умолчанию 0)
type Переопределяет тип содержимого. Поддерживаемые типы «image», «inline», «AJAX», «IFRAME», «SWF» и «HTML» (По-умолчанию null)
href Переопределяет ссылкой источник контента (По-умолчанию null)
content Переопределяет содержимое, которое будет отображаться (По-умолчанию null)
title Переопределяет заголовок, можно установить любой HTML (По-умолчанию null)
tpl Объект, содержащий различные шаблоны
openEffect /
closeEffect /
nextEffect /
prevEffect 		Эффект анимации для действий, возможны значения ‘fade’, ‘fade’, ‘elastic’, ‘elastic’
openSpeed /
closeSpeed /
nextSpeed /
prevSpeed 		Скорость анимации (По-умолчанию 250)
openEasing /
closeEasing /
nextEasing /
prevEasing 		Easing метод для каждого типа перехода (По-умолчанию swing)
openOpacity/
closeOpacity 		Если установлено «true», то меняется прозрачность (По-умолчанию true)
openMethod/
closeMethod/
nextMethod/
prevMethod 		Эффект transition может принимать значения ‘zoomIn’ / ‘zoomOut’ / ‘changeIn’ / ‘changeOut’
parent Родительский элемент в контейнере. Это полезно для ASP.NET, где верхний элемент является «формой» (По-умолчанию body)

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

1
2
3
4

$(".modalbox" ) .fancybox ({
padding : 0 ,
height : 100
} ) ;

Отправка сообщения

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

1
2
3
4

function validateEmail(email) {
var reg = /^(([^()[\]\\.,;:\s@"]+(\.[^()[\]\\.,;:\s@"]+)*)|(".+"))@((\[{1,3}\.{1,3}\.{1,3}\.{1,3}\])|((+\.)+{2,}))$/ ;
return reg.test (email) ;
}

Последний шаг — это отправка сообщения. Отслеживаем событие клик по кнопке «Отправить»:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$("#send" ) .on ("click" , function () {
var emailval = $("#email" ) .val () ;
var msgval = $("#msg" ) .val () ;
var msglen = msgval.length ;
var mailvalid = validateEmail(emailval) ;
// Проверка правильности электронного адреса
if (mailvalid == false ) {
$("#email" ) .addClass ("error" ) ;
}
else if (mailvalid == true ) {
$("#email" ) .removeClass ("error" ) ;
}
// Проверка длины сообщения
if (msglen < 4 ) {
$("#msg" ) .addClass ("error" ) ;
}
else if (msglen >= 4 ) {
$("#msg" ) .removeClass ("error" ) ;
}

Помещаем в первые две переменные данные, которые ввел пользователь. Определяем длину сообщения (msglen ) и проводим проверку введенного электронного адреса (mailvalid ). Далее проверяем если в переменная mailvalid равна false , значит электронный адрес введен неверно, и данный инпут будет подсвечен красным. Также проверяем количество введенных символов в текст сообщения, если меньше 4 символов значит показываем, что это ошибка (подсвечиваем текстовый инпут красным). $("#contact" ) .serialize () ,
success: function (data) {
if (data == "true" ) {
$("#contact" ) .fadeOut ("fast" , function () {
$(this ) .before ("Успешно! Ваше сообщение отправлено:)" ) ;
setTimeout("$.fancybox.close()" , 1000 ) ;
} ) ;
}
}
} ) ;
}
} ) ;

Если оба поля проверены то вместо кнопки «отправить» показываем текст, что происходит отправка сообщения. Это дает пользователю подтверждение того, что оба поля проверены и идет процесс.

Теперь запрос AJAX. Первый параметр запроса это тип передачи данных (POST или GET). Далее указываем файл обработчик (sendmessage.php ). Следующий параметр data (данные), методом serialize подготавливаем данные в формах для отправки на сервер.

Если мы получим хороший отклик от сервера (эти данные мы формируем в пхп файле), то мы скроем контактную форму и покажем сообщение об успехе отправки. Я использую SetTimeout() , для того чтобы модальное окно закрылось не сразу а через секунду после отправки данных.

PHP сценарий

Мы посылаем данные, введенные пользователем с помощью JQuery в sendmessage.php . В PHP мы формируем получаем эти данные из POST массива, формируем и отправляем сообщение. Если отправка прошла успешно возвращаем обратно в JQuery true иначе false .

В переменной $sendto мы указываем адрес электронной почты на который будут приходить письма.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$sendto = "[email protected]" ;
$usermail = $_POST [ "email" ] ;
$content = nl2br ($_POST [ "msg" ] ) ;

// Формирование заголовка письма
$subject = "Новое сообщение" ;
$headers = "From: " . strip_tags ($usermail ) . "\r \n " ;
$headers .= "Reply-To: " . strip_tags ($usermail ) . "\r \n " ;
$headers .= "MIME-Version: 1.0\r \n " ;
$headers .= "Content-Type: text/html;charset=utf-8 \r \n " ;

// Формирование тела письма
$msg = "" ;
$msg .= "Новое сообщение\r \n " ;
$msg .= "

От кого: " . $usermail . "

\r \n " ;
$msg .= "

Сообщение: " . $content . "

\r \n " ;
$msg .= "" ;

// отправка сообщения
if (@ mail ($sendto , $subject , $msg , $headers ) ) {
echo "true" ;
} else {
echo "false" ;
}

Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи php. Покажу на наглядных примерах, чтобы вы понимали как все устроено и как происходит взаимодействие между самой формой ввода (ее полями input) и файлом-обработчиком, написанный на языке php. К тому же бесплатно сможете скачать исходники вместе с .

Конечно здорово будет, если вы хоть немного разбираетесь в HTML / CSS т.к. Вам придется уже по аналогии перетягивать код на свою страницу. PHP язык затрагивать не будем, все необходимые правки, которые нужно будет сделать под себя я покажу.

UPDATE :По откликам читателей, я понял, что нужно что-то более красивое и функциональное, встречайте , ознакомьтесь и посмотрите. Сами выбирайте какая больше понравится)

UPDATE2 : Version 3.0 Адаптивный Лендинг + форма ajax с передачей UTM-меток , ознакомьтесь и посмотрите. Вам понравится

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

Форма обратной связи php — структура

Разбор самой формы обратной связи будем изучать на примере посадочной страницы (Landing Page), кстати есть отдельная статья по . Посмотреть как это работает в действии можете по кнопкам расположенным ниже, прикладываю исходники этого одностраничника и главного файла обработчика-php (этот файл и будет обрабатывать и отправлять письмо на email)

После того как скачаете исходники и распакуете архив, вы увидите следующую структуру по файлам:

  • image — все изображения, которые используются для самого Landing Page, кнопки и т.д.
  • js — javascript скрипты, которые обеспечивают например всплывающее модальное окно на странице и другие визуальные эффекты
  • index.html — индексный файл нашего одностраничника
  • index1.php — файл обработчик, в который передаются значения из формы, далее формируется письмо из полученных переменных и отправляется на указанный email адрес. Так же index1.php случит в роли промежуточной страницы уведомления об успешной отправке данных с автоматическим перенаправлением обратно на index.html (т.е. наш одностраничник)

Важно, чтобы ваш хостинг, на котором располагаются файлы сайта, поддерживал php обработку, иначе файл index1.php не выполнится и работать не будет. Чтобы уточнить этот нюанс обратитесь в кампанию, где зарегистрирован ваш хостинг или просто протестируйте — работает, значит есть поддержка. Если нет, то включите опцию поддержки языка php

Взгляните на схему работы взаимодействия всех элементов (страница, форма, обработчик)

Исходный код вызова формы и обработчика

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Заказать обратный звонок Заказажите обратный звонок

Заказать обратный звонок Заказажите обратный звонок

Ниже полный исходный код обработчика index1.php, для того чтобы настроить отправку на свой почтовый ящик, поменяйте «[email protected]» на свой, остальное в принципе можно оставить без изменений

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 С вами свяжутся

С вами свяжутся body { background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; } setTimeout("location.replace("/index.html")", 3000); /*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/

Проверка работоспособности формы

Вызываем окно и вводим данные для тестовой проверки нашей формы

Еще раз напомню, ваш хостинг должен поддерживать обработку php файлов, иначе наш обработчик просто не выполнится и никакое письмо не отправится на указанный email-адрес. Результат успешно отработанной форма обратной связи


У меня на этом все, старался донести смысл и работу скрипта наилучшим образом. Возникнут вопросы, можете смело обращаться в комментарии или ко мне в VK (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.



Рекомендуем почитать