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

Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи 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 (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.

Здравствуйте, уважаемые читатели a! В этом уроке я покажу, как мы можем сделать форму e-mail подписки на HTML5 с проверкой введенного адреса на JQuery. Для проверки будем использовать регулярные выражения, а сохранять введенный адрес будем в базе данных MySql. Таким образом при сохранении будет использован AJAX (т.е. вызовем PHP сценарий без перезагрузки страницы). Результат можно посмотреть на демонстрационной странице, а также скачать исходники. Приступаем!

Базовая разметка

Начнем с создания нового файла index.html . И сделаем простую структуру документа придерживаясь HTML5. Также сразу подключим стили CSS и библиотеку , она нам понадобится при проверке введенного e-mail:

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





Форма e-mail подписки с валидатором на jQuery





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

Форма e-mail подписки

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

1
2
3
4
5
6
7
8
9



Подписаться

Завернем форму в блок div #completeform , для того чтобы после сохранения адреса можно, форму можно было свернуть.

Также используем пару новых атрибутов в поле ввода. Тип поля установлен «email» , так что мобильные браузеры могут отображать соответствующую клавиатуру. Chrome и некоторые WebKit браузеры будет использовать это, чтобы проверить, ввел ли пользователь адрес. Атрибуты autocorrect и autocapitalize предназначены специально для мобильных браузеров.

Span с id error изначально скрыт, за что отвечает свойство display со значением none , это у нас прописано в файле со стилями, о нем чуть позже. Но как только пользователь ввел неверный адрес почты в span выводится сообщение с предупреждением.

Валидатор jQuery и AJAX запрос

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

Разберемся с функцией completeInviteForm() . Чтобы форма ввода адреса не сбивала с толку, свернем эффектом fadeOut в течении 400 миллисекунд. А в качестве обратного вызова, обратимся к функции $.ajax() , с ее помощью вызовем файл save.php и сохраним введенный адрес в базу. Исходный код файла save.php приведу чуть ниже, а пока разберемся с функцией $.ajax() .

$.ajax — загружает удаленную страницу используя HTTP запрос. В качестве аргумента функции $.ajax() передается объект, состоящий из пар ключ/значение, которые используются для инициализации и управления запросом. В нашем случаем будем использовать следующие объекты:

  • type:’POST’ — выбираем тип запроса к файлу, по умолчанию GET , разница между POST и GET не особо большая, просто при GET-запросе данные передаются в заголовке а при POST в теле запроса, поэтому с помощью POST можно передать больший объем информации;
  • url:’save.php’ — путь до исполняемого файла;
  • data:’email=’+$(«#email»).val() — данные которые отсылаются на сервер. С помощью CSS селектора #email обратимся к элементу с id=»email» и получим содержимое атрибута value, то есть введенные пользователем email. И присвоим это содержимое переменной email , которую будем использовать в файле save.php ;
  • success: function(){ $(‘#completeform’).before(‘Все готово! Вы добавлены в список рассылки. ‘);} — функция success вызывается при удачном выполнении ajax запроса. Функция выполняет следующие действие. Перед дивом #completeform вставляем контент, оповещающий пользователя, что его email был добавлен в список рассылки.

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

function completeInviteForm() {
setTimeout(function () { $("#completeform" ) .fadeOut (400 , function () {
$.ajax ({
type: "POST" ,
url: "save.php" ,
data: "email=" + $("#email" ) .val () ,
success: function () {
$("#completeform" ) .before ("Все готово! Вы добавлены в список рассылки." ) ; }
} ) ;
} ) ;
} , 1100 ) ;
}

А с помощью метода setTimeout скрытие формы и выполнение ajax-запроса происходит асинхронно с задержкой 1100 миллисекунд.

Обработка формы

Для удобства обращения к элементам страницы, создадим пару переменных, с селекторами #error и #btnwrap .

var erdiv = $("#error" ) ;
var btnwrap = $("#btnwrap" ) ;

С помощью обработчика событий live отслеживаем нажатие на кнопку «Подписаться» ее id=»sendbtn» . Метод e.preventDefault(); отменяет стандартное поведение браузера на действие (нажатие на кнопку), а именно отменяем обновление страницы и изменение URL. Переменной emailval присваиваем введенный email, и можем приступать к обработке этой переменной.

Первое if if(!isEmail(emailval)) проверяет если функция isEmail вернула ложь (false), то это означает, введенный пользователем электронный адрес не совпадают с регулярным выражением то есть не верный, оповестим пользователя об этом в блок error выводим сообщение (Вы не правильно ввели адрес электронной почты).

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

Чтобы процесс был наглядным в блок error вставляем соответствующий текст, а в блок где находилась кнопка «Подписаться» помещаем GIF изображение. И вызываем функцию completeInviteForm() , которую мы рассмотрели выше.

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

if (! isEmail(emailval) ) {
erdiv.html ("Вы не правильно ввели адрес электронной почты" ) ;
erdiv.css ("display" , "block" ) ;
}
if (isEmail(emailval) ) {
erdiv.css ("color" , "#719dc8" ) ;
erdiv.html ("обработка..." ) ;
(completeInviteForm() , 900 ) ;
}
} ) ;
} ) ;

База данных

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

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

Для сохранения адресов подписчиков нам понадобится одна таблица с двумя полями, назовем ее address :

Поля будут следующие:

  • id — идентификатор электронного адреса (он же первичный ключ);
  • address — непосредственно сам электронный адрес.

Файл save.php

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

1
2
3
4
5
6

Сначала проверяем существует ли в глобальном массиве POST переменная email, если да то присваиваем ее значение локальной переменной $email . Далее устанавливаем соединение с сервером mysql_connect() пользователь root, пароля нет. Выбираем базу данных email и выполняем запрос к базе, вставляем новую запись в таблицу address, где в поля address будет вставлено значение переменной $email . Вот и все!

На этом урок заканчиваю. Хочу напомнить, что данная подписка работает только на сервере (так как мы используем базу и ).

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

Думаю, полно уже подобного в интернете, но раз народ просит, то решил сделать. Тем более, подобный функционал должен присутствовать почти на каждом лендинге для реализации кнопки обратного звонка. И действительно, сейчас все больше появляется результатов АБ — тестирования, которые говорят, что открытые формы работают хуже, чем те, что спрятаны в модальное окно и открываются после нажатия на кнопу.

Некоторые утверждают, что это из-за того, что у людей потихоньку «вырабатывается иммунитет» и открытая форма — это агрессивная продажа. Якобы сейчас настало то время, когда пользователь при виде открытой формы считает, что ему пытаются что-то «впарить». Не совсем согласен с этой теорией, но зерно истины — присутствует. Может быть в некоторых видах бизнеса это и так. Ну а сейчас давайте займемся реализацией формы.

Примечание! Я не буду подробно описывать каждое действие, а предлагаю вам готовый вариант в исходнике. Если возникнут вопросы — пишите в комментариях. Будем разбираться:)

Сегодня начнем не с jQuery, а с верстки кнопки и формы. Все скрипты подключим в конце страницы.

Кнопка, по нажатию на которую будет открываться модальное окно:

Оставить заявку

Класс можете задать любой, а вот в href напишите #modal — это будет id у контейнера с затенением и контактной формой.

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

Оставьте ваши контактные данные и наш консультант свяжется с вами Хочу такую форму на свой сайт

Добавив стили, выглядеть это стало так:


Для создания модального окна, использовалась библиотека Remodal. Это набор из css и js файлов, как раз для создания анимированных модальных окон. Можете скачать по ссылке или уже с моими правками в конце статьи.

Между тегами head подключаем стили:

А перед закрывающимся тегом body — добавляем скрипты:

Script.js — это скрипт для обработки формы. Тот самый Ajax, который позволяет нам осуществить всю процедуру без перезагрузки страницы:

$(document).ready(function () { $("form").submit(function () { // Получение ID формы var formID = $(this).attr("id"); // Добавление решётки к имени ID var formNm = $("#" + formID); $.ajax({ type: "POST", url: "mail.php", data: formNm.serialize(), success: function (data) { // Вывод текста результата отправки $(formNm).html(data); }, error: function (jqXHR, text, error) { // Вывод текста ошибки отправки $(formNm).html(error); } }); return false; }); });

Не буду приводить исходный код css и js из файлов, отвечающих за модальное окно и форму, так как они достаточно объемы. Если что, смотрите в исходнике. А вот php обработчик во многом стандартный (если можно так сказать):

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

Вот такая ajax форма получилась. Извините, что не пытался объяснить подробно, как делался каждый элемент. Просто хотелось дать готовый результат, а описывать все анимации, появления — нет никакого смысла. Качайте исходник и внедряйте на свой сайт. А на сегодня — все. Всем удачи!

Ребята, настоятельно прошу тестировать форму на реальном или виртуальном сервере (хостинге). Убедитесь пожалуйста, что ваш сервер поддерживает php, у вас платный тариф и не тестовый период. В противном случае, в 90% случаев форма работать не будет.

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

Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на .

Обновленная версия статьи находится

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

Структура статьи

Если вы делаете сайт на движке, например, Joomla или WordPress, то можно конечно использовать различные готовые решения для форм, в том числе и конструкторы. Но что, если вы верстаете просто на чистом HTML и заказчик попросил «оживить» формы, чтобы они работали. Вот здесь как раз и пригодится данная форма.

UPD. 02.08.2018
Статья переписана с учетом того, что форма была выложена на GitHub

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

Данную сборку я собирал с помощью таск-менеджера Gulp. Про то, как с ним работать я писал , обязательно прочитайте.

Подключаем форму к сайту

Распаковываем архив с формой. Далее скопируйте из папки dist все содержимое в папку формы (например, ajax-form) в вашем шаблоне сайта. Далее подключаем ресурсы — стили и скрипты. В папках css и js имеются две версии — сжатая и обычная. Если вы планируете в дальнейшем вносить правки в код, то лучше подключать несжатые версии.

Если на вашем сайте уже подключена библиотека jQuery, то можете ее не подключать. Обратите внимание на .

Инициализация формы

Сразу отмечу, что валидация полей организовано средствами HTML5.

Форма вызывается методом.simpleSendForm() , например:

$("#idForm").simpleSendForm();

Вместо #idForm указываем индификатор формы. Вообще код инициализации формы вы можете найти в файле scripts.js . Код вызова плагина можно вырезать оттуда и прописать прямо перед . Не забываем про jQuery.(document).ready() .

Форма может принимать некоторые опции.

Опции
  • successTitle (строка) — Заголовок сообщения благодарности при отправленной форме. По умолчанию — «Спасибо, что выбрали нас!»
  • successText (строка) — текст под заголовком сообщения благодарности. По умолчанию — «Мы свяжемся с Вами в ближайшее время».
  • errorTitle (строка) — заголовок сообщения об ошибке отправки формы. По умолчанию — «Сообщение не отправлено!».
  • errorSubmit (строка) — текст сообщения об ошибке отправки формы. По умолчанию — «Ошибка отправки формы!».
  • errorNocaptcha (строка) — текст ошибки, если не заполнили каптчу.
  • errorCaptcha (строка) — текст ошибки, если проверка прошла с ошибкой.
  • mailUrl (строка) — путь до файла обработчика. По умолчанию — «../form-submit/submit.php «. Следует изменить и указать полный путь, если у вас папка «form-submit » лежит не в корне сайта.
  • autoClose (булево) — автоматически закрывает окно после успешной отправки формы (для форм в модальном окне). Окно формы закрывается, показав сообщение благодарности по истечению 5 сек. Данное время можно переопределить.
  • autoCloseDelay (число) — продолжительность (в миллисекундах) показа сообщения благодарности после которого оно закроется. По умолчанию — 5000 (5 сек.).
  • debug (булево) — по умолчанию false. Включение отладки, если есть проблемы с работой формы. Сообщения ошибок смотрите в консоли.
  • captcha (булево) — по умолчанию false. Включение или отключение каптчи Recaptcha 2.0.
  • captchaPublicKey (строка) — публичный ключ рекаптчи.
Форма в модальном окне

Нашу форму можно показать и в модальном окне. Модалку будет выводить библиотека .

HTML код

Код кнопки

Заказать звонок

Код формы

Инициализируем модальное окно и форму. Давайте сделаем автоматическое закрытие окошка через 3 сек. после успешной отправки формы. Код вызова Magnific Popup вы также найдете в файле scripts.js .

Вызов формы с модальным окном // ======= Init Magnific Popup ======= $(".modal-popup").magnificPopup({ type: "inline", fixedContentPos: false, fixedBgPos: true, overflowY: "auto", closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, mainClass: "mfp-top-up" }); // ===== Init modal form ==== $("#idForm").simpleSendForm ({ successTitle: "Ваша заявка принята!", successText: "Наш сотрудник свяжется с Вами в самое ближайшее время.", autoClose: true, autoCloseDelay: 3000 }); Как включить Recaptcha?

Если вы хотите включить рекаптчу в форме, то вам необходимо добавить пустой блок с классом recaptcha в html-коде формы в том месте, где вы хотите ее вывести. Далее в коде вызова плагина формы передаем опцию captcha со значением true, а опцииcaptchaPublicKey передаем ваш публичный ключ recaptcha. Публичный и приватный ключи можете получить .

// ===== Init captcha in the form ==== $("#idForm").simpleSendForm({ successTitle: "Ваша заявка принята!", successText: "Наш сотрудник свяжется с Вами в самое ближайшее время.", autoClose: true, autoCloseDelay: 3000, captcha: true, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" });

Далее открываем файл обработчика формы submit.php из директории form-submit . Ищем переменную recaptchaOn (примерно 7-я строка) и выставляем ей значение true . Далее ищем переменную $secret (примерно 89-я строка) и меняем приватный ключ на свой.

В принципе все. После этих манипуляций каптча у вас должна появиться.

Обратите внимание на демо-сайте каптча работает в тестовом режиме, так как указаны тестовые ключи от Гугл.

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

Возможные ошибки Не отправляется сообщение из формы, прелодер просто бегает и все. В чем проблема?

Посмотрите, правильно ли указан путь до файла обработчика в инициализации формы:

mailUrl: — путь до файла обработчика

Также проверьте корректность включения рекаптчи. То есть если отключено, то опции recaptcha в коде инициализации и $recptchaOn в файле обработчика должны быть выставлены в false или в true , если рекаптча включена.

Не показывается Google Recaptcha в форме

Проверьте переданы ли recaptcha (вызов рекаптчи) и $recaptchaOn (файл обработчика) значения — true . Также проверьте правильно ли вы указали ключи — публичный и приватный.

Все сделал по инструкции, но форма не работает, где искать ошибку?

В первую очередь советую заглянуть в консоль браузера и проверить наличие ошибок. Также проверьте подключена ли у вас библиотека jQuery. Проверьте правильность подключения файла scripts.js . Если все хорошо, то попробуйте включить отладку опцией debug: true . После включения смотрите консоль на наличие ошибок.

Вот такая вот форма. Используйте на своем сайте, надеюсь она будет вам полезна. Что еще сказать? Давайте теперь говорить будете вы — в комментариях. Спрашивайте, если что непонятно. Также, если найдете ошибку, то прошу сообщить незамедлительно, исправим…

На этом все. Спасибо за внимание. До встречи в следующих постах!

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