Я посвятил тому, как можно создать всплывающее окошко, которое показывается на сайте один раз и через определенный интервал времени. Так вот, в данное окно, как вариант, можно вставить форму. Она может быть формой подписки или формой связи, в общем, чем угодно. Во всплывающих окнах лучше выводить 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 . После включения смотрите консоль на наличие ошибок.
Вот такая вот форма. Используйте на своем сайте, надеюсь она будет вам полезна. Что еще сказать? Давайте теперь говорить будете вы — в комментариях. Спрашивайте, если что непонятно. Также, если найдете ошибку, то прошу сообщить незамедлительно, исправим…
На этом все. Спасибо за внимание. До встречи в следующих постах!
Здравствуйте, уважаемые читатели 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 . Вот и все!
На этом урок заканчиваю. Хочу напомнить, что данная подписка работает только на сервере (так как мы используем базу и ).
Все мы привыкли видеть контактные на отдельных, специально созданных страницах, для обратной связи с пользователями. Как правило, на таких страницах помимо контактных форм, размещают много другой информации для взаимодействия и коммуникации. Механизм отлаженный, проверенный годами и отлично работающий. Но в некоторых случаях возникает необходимость вывести отдельную контактную форму в виде всплывающего окна, не перенаправляя пользователей на другие страницы.
В свое время мы рассматривали, работающее на 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, а с верстки кнопки и формы. Все скрипты подключим в конце страницы.
Кнопка, по нажатию на которую будет открываться модальное окно:
Оставить заявку
Класс можете задать любой, а вот в 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 — это серверный язык!
Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на .
Обновленная версия статьи находится