Всем привет. Засыпали вопросами о том, как реализовать форму, которая появляется в модальном окне после нажатия на кнопку, а после отправки, выводилось бы сообщение об успехе или провале.
Думаю, полно уже подобного в интернете, но раз народ просит, то решил сделать. Тем более, подобный функционал должен присутствовать почти на каждом лендинге для реализации кнопки обратного звонка. И действительно, сейчас все больше появляется результатов АБ — тестирования, которые говорят, что открытые формы работают хуже, чем те, что спрятаны в модальное окно и открываются после нажатия на кнопу.
Некоторые утверждают, что это из-за того, что у людей потихоньку «вырабатывается иммунитет» и открытая форма — это агрессивная продажа. Якобы сейчас настало то время, когда пользователь при виде открытой формы считает, что ему пытаются что-то «впарить». Не совсем согласен с этой теорией, но зерно истины — присутствует. Может быть в некоторых видах бизнеса это и так. Ну а сейчас давайте займемся реализацией формы.
Примечание! Я не буду подробно описывать каждое действие, а предлагаю вам готовый вариант в исходнике. Если возникнут вопросы — пишите в комментариях. Будем разбираться:)
Сегодня начнем не с 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 — это серверный язык!
Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на .
Обновленная версия статьи находится
Здравствуйте, уважаемые читатели a! В этом уроке я покажу, как мы можем сделать форму e-mail подписки на HTML5 с проверкой введенного адреса на JQuery. Для проверки будем использовать регулярные выражения, а сохранять введенный адрес будем в базе данных MySql. Таким образом при сохранении будет использован AJAX (т.е. вызовем PHP сценарий без перезагрузки страницы). Результат можно посмотреть на демонстрационной странице, а также скачать исходники. Приступаем!
Базовая разметкаНачнем с создания нового файла index.html . И сделаем простую структуру документа придерживаясь HTML5. Также сразу подключим стили CSS и библиотеку , она нам понадобится при проверке введенного e-mail:
1 |
|
Теперь все готово для создания формы!
Форма e-mail подпискиЦель нашей формы, это проверить введенный адрес электронной почты посетителя и как-то сохранить его в список подписчиков. Для этого делаем обычную форму с кнопкой, по нажатию на которую адрес обрабатывается и сохраняется в базе или в файл кому как удобно. В уроке рассмотрим же сохранение в бузу данных. Так будет более наглядней, упор сделаем на проверку правильности введенного адреса. Вот таким образом выглядит форма подписки:
1 |
Подписаться |
Завернем форму в блок 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 | function
completeInviteForm()
{
|
А с помощью метода setTimeout скрытие формы и выполнение ajax-запроса происходит асинхронно с задержкой 1100 миллисекунд.
Обработка формыДля удобства обращения к элементам страницы, создадим пару переменных, с селекторами #error и #btnwrap .
var
erdiv =
$("#error"
)
;
|
С помощью обработчика событий live отслеживаем нажатие на кнопку «Подписаться» ее id=»sendbtn» . Метод e.preventDefault(); отменяет стандартное поведение браузера на действие (нажатие на кнопку), а именно отменяем обновление страницы и изменение URL. Переменной emailval присваиваем введенный email, и можем приступать к обработке этой переменной.
Первое if if(!isEmail(emailval)) проверяет если функция isEmail вернула ложь (false), то это означает, введенный пользователем электронный адрес не совпадают с регулярным выражением то есть не верный, оповестим пользователя об этом в блок error выводим сообщение (Вы не правильно ввели адрес электронной почты).
Теперь второе if выполняется только в том случае, если пользователь ввел верный электронный адрес. Тогда мы можем начать процесс сохранения адреса.
Чтобы процесс был наглядным в блок error вставляем соответствующий текст, а в блок где находилась кнопка «Подписаться» помещаем GIF изображение. И вызываем функцию completeInviteForm() , которую мы рассмотрели выше.
1 | if
(!
isEmail(emailval)
)
{
|
Так как я выбрал способ сохранение в базу данных введенного адреса, то коротко расскажу о создании самой базы и таблицы, а также как и обещал код файла save.php , который и работает с базой данных MySql.
Для этого нам понадобится локальный сервер, я использую Denwer . Наверняка многие им пользуются, поэтому вдаваться в подробности не буду. Переходим phpMyAdmin
, и создаем базу данных email
:
Для сохранения адресов подписчиков нам понадобится одна таблица с двумя полями, назовем ее address :
Поля будут следующие:
- id — идентификатор электронного адреса (он же первичный ключ);
- address — непосредственно сам электронный адрес.
Вот и пришло время рассказать о последнем элементе создаваемой подписки, о файле save.php . В нем находится PHP сценарий сохранения электронного адреса в базу данных.
1 |
|
Сначала проверяем существует ли в глобальном массиве POST переменная email, если да то присваиваем ее значение локальной переменной $email . Далее устанавливаем соединение с сервером mysql_connect() пользователь root, пароля нет. Выбираем базу данных email и выполняем запрос к базе, вставляем новую запись в таблицу address, где в поля address будет вставлено значение переменной $email . Вот и все!
На этом урок заканчиваю. Хочу напомнить, что данная подписка работает только на сервере (так как мы используем базу и ).
Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи 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 (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.
Все мы привыкли видеть контактные на отдельных, специально созданных страницах, для обратной связи с пользователями. Как правило, на таких страницах помимо контактных форм, размещают много другой информации для взаимодействия и коммуникации. Механизм отлаженный, проверенный годами и отлично работающий. Но в некоторых случаях возникает необходимость вывести отдельную контактную форму в виде всплывающего окна, не перенаправляя пользователей на другие страницы.
В свое время мы рассматривали, работающее на jQuery. Сегодня же, хочу познакомить вас, с интересным решением создания отдельной, оригинально оформленной, всплывающей формы контактов для сайта.
На мой взгляд, замечательный образец средств взаимодействия с пользователями.
Пример посмотрели. Теперь, давайте разложим эту форму на составляющие, от создания общей структуры в Html, до формирования внешнего вида макета с помощью CSS.
HTML-код формыНичего сверхъестественного, максимально простой каркас обычной контактной формы, помещенный в блочный элемент div с определенным идентификатором и классом, для дальнейшего формирования внешнего вида формы в css и взаимодействия с небольшим javascript, который нам понадобится для активации и закрытия всплывающей формы.
| Закрыть Отправить нам сообщение |
Закрыть Отправить нам сообщение Пожалуйста, введите своё сообщение здесь..
Так же, нам необходимо создать слой затемнения общего фона, при активации всплывающей формы. Выполнить эту задачу можно по разному, но мы мудрить особо не будем и добавим еще один div , присвоив ему идентификатор: id="fade" и класс: class="black-overlay" . Поместить его можете рядом с формой, чтобы долго не искать при необходимости.
Обратная связь
Вы наверное заметили, что кнопка закрытия, вписана в блок контактной формы, непосредственно перед заголовком и это логично, а где же ей еще быть, кнопка должна появляться и исчезать вместе с формой. Внешний вид и позицию кнопки закрытия мы в дальнейшем сформируем в CSS
Вот и все, давайте теперь, посмотрим на полный Html-код страницы содержащей всплывающую форму обратной связи:
| Всплывающая контактная форма Обратная связь Закрыть Отправить нам сообщение Пожалуйста, введите своё сообщение здесь.. |
Всплывающая контактная форма Обратная связь Закрыть Отправить нам сообщение Пожалуйста, введите своё сообщение здесь..
Прежде чем перейдем к самому интересному, к формированию стилей нашей контактной формы с помощью CSS, немного отступлю. Самые внимательные, наверняка заметили, что кнопки открытия и закрытия формы реализованы в виде ссылок с «глушилкой» href="javascript:void(0)" . Плохо этот или хорошо, точного ответа для себя я так и не нашел, использую этот способ по привычке. Хотя для элементов, на которых событие onclick обрабатывается скриптом, думается мне, логичнее и правильнее, использовать , или . При желании, вы всегда можете так и поступить с кнопками из данного примера.
Магия CSSДанная форма обратной связи выполнена в оригинальном стиле, с некоторыми дизайнерскими жудожествами, так что вариант верстки с использованием исключительно современных стандартов CSS3, довольно проблематичен.
Основой всей конструкции, фоном контактной формы, будет служить незамысловатый рисунок конверта, не оставляющий у пользователя, никаких сомнений на счет того, что перед ним открылось)))) В кнопке закрытия, мы так же используем парочку небольших картинок, чтобы она видоизменялась при наведении. Все эти картинки, вы легко сможете поменять на свои, а кнопки вообще, если поймаете кураж, можете забабахать на CSS3.
А вот, непосредственно и сам CSS-код, нашей замечательной формы, с небольшими комментариями, для ясности и дабы избежать лишних вопросов:
Код получился довольно объемным, ну что поделаешь, не могу отказать себе в удовольствии, там где это допустимо и оправдано конечно, поэкспериментировать и применить на практике новые свойства и функции стандарта CSS3. Благодаря чему, появляются интересные и свежие решения по верстке. Не без ошибок и сомнений, но это реальная движуха и одновременно полезная практика.
Все! Только что, мы вместе с вами, создали отличный инструмент взаимодействия с пользователями, всплывающую контактную форму для сайта. Вам остается только посмотреть живой пример, при желании скачать исходники и прикрутить к форме свой php-обработчик.
В архиве с исходниками, вы найдете все необходимое и еще парочку вариантов фоновых изображений для формы.
Обновление от 21.05.2017
В архив с исходниками добавил папку «mail», в которой вы найдёте простейший php-обработчик для формы и файл конфигураций, для настройки. Обработчик привязан к данной форме, небольшая инструкция и комментарии прописанные непосредственно в коде файлов обработчика, надеюсь, помогут разобраться что, куда и зачем.
С Уважением, Андрей
Здравствуйте. В этом уроке мы будем делать полноценную форму обратной связи, причем появляться она будет в модальном окне по нажатию на кнопку на странице. Данный урок я делал сам, с нуля, воспользовавшись только фреймфорком jQuery и одним небольшим JavaScript"ом. Урок очень интересный, поэтому прошу не проходить мимо! Ниже Вы можете просмотреть демонстрацию получившейся у меня формы, а также скачать необходимые файлы для работы:
Шаг 1. Общее описание и работа формы обратной связи:
Сначала я Вам расскажу, какие нам файлы будут нужны и, собственно, зачем они нужны:
- images - папка, где хранятся все изображения нашей формы;
- index.html - главный, "индексный" файл, в котором будет располагаться кнопка для вызова формы обратной связи;
- contact.html - файл, в котором находится сама форма. Именно этот файл будет подключаться в модальное окошечко;
- send.php - файл-обработчик, занимающийся отправкой письма;
- jquery.js - основной фреймворк jQuery;
- style.css - файл с каскадными таблицами стилей для нашей формы.
Итак, идем дальше и по порядку... Работа формы будет заключаться следующим образом: Пользователь заходит на страницу, на которой находится кнопка для вызова модального окна, нажмет ее, затем появляется форма, в ней посетитель вводит все данные и текст сообщения и отправляет, потом его перекидывает на страницу с сообщением об удачной или неудачной отправке письма. Вот и все, а теперь начнем верстать нашу форму...
Шаг 2. Кнопка для вызова формы.
Так, чтобы, наше модальное окно с формой появлялось, нужно его как-то заставить делать это. Для этого нам всего лишь нужно разместить на странице обыкновенную кнопку. Код такой кнопки приведен ниже, вместе с примененными к ней стилями:
Написать сообщение администратору
Шаг 3. Сама форма + настройки к ней
Теперь давайте разберемся, где же все-таки будет находиться наша форма обратной связи. А находиться она будет в файле contact.html , который уже расположен в исходниках урока. Данная форма совсем небольшая, поэтому ее код я расположу ниже:
Отправка Сообщения Администрации:
Как Вы можете наблюдать, идя по коду даже невооруженным глазом видно, что для более качественного отображения формы я использовал табличную верстку. Это мне очень пригодилось, чтобы сравнять все поля формы.
Шаг 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 - проводник - М. К.