Всплывающее окно с формой обратной связи
Этот урок можно назвать продолжением предыдущего мини-обзора где мы создавали круглые кнопки, одна из которых – заказ звонка, а вторая – обратная связь. Они являются лишь началом работы полной функции. Для завершения не хватает еще одной части, а именно модального окна.
По идее, оно должно появляться при нажатии на кнопку, чтобы создался эффект всплывающего окна с формой обратной связи. Форму будем создавать с помощью всем известного плагина «Contact Forms 7». Добавим свои стили к форме, оформим красиво. В общем, сделаем как надо.
В работе над модальным окном я воспользуюсь свободным плагином «Modal Window Effects» ( демо ). Вы же можете использовать любой другой (даже специальный) плагин окна для WordPress. Надо лишь привязать вызов к нашей кнопке, и все будет в ажуре. Поехали!
Кнопка со сплывающим окном обратной связи
Первым делом займемся установкой на сайт кнопки с окном, и уже потом перейдем к форме связи. Сложного в этом ничего нет. Из архива, скаченного выше по ссылке, нужно подключить три файла: два файла из папки «modal — JS» и один из папки «modal — CSS». Все они относятся к модальному окну, это для ясности.
Теперь открываем файл style.css и добавляем еще такой код (это стили кнопки):
Осталось вывести разметку.
Открываем файл footer.php и перед функцией вставляем HTML-разметку. На этом этапе у вас должна получиться плавающая кнопка на странице, по нажатию которой появляется всплывающее окно (пока что пустое).
Форма связи
Ну вот, дошли до последней части «урока».
Думаю, плагином «Contact Forms 7» все умеют пользоваться. После того, как в нем создадите новую форму, вместо стандартного кода, что образовывается по умолчанию, добавьте этот:
Теперь выводим форму в разметке выше в указанном там месте:
Стили оформления, по идее, должны подхватиться из вашей текущей WordPress темы, но можно прописать свои. В файл style.css прописываем такой код:
Обратите внимание на идентификатор перед тегами формы в стилях. У вас, естественно, он будет другой. Следовательно, его нужно поменять на свой, чтобы стили заработали. Узнать его можно в исходном коде.
Форма обратной связи в модальном окне html
В этой рубрике Вы найдете уроки, посвященные полезным скриптам для Вашего сайта, которые призваны улучшить его функциональность.
Эффекты блочного раскрытия
Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.
20 бесплатных тем для WordPress в стиле Material Design
Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.
20 сайтов с креативным MouseOver эффектом
Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.
45+ бесплатных материалов для веб дизайнеров за август 2016
Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.
Бесплатка: PSD шабон Modus Versus
Вашему вниманию предлагаем PSD шаблон с множеством элементов.
Делаем модальные окна для сайта. Заботимся об удобстве и доступности
Я занимаюсь вёрсткой и программированием сайтов. Почти в каждом макете, который я верстал, были модальные окна. Обычно это формы заказа звонка в лендингах, уведомления о завершении каких-то процессов, или сообщения об ошибках.
Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.
В итоге было задумано сделать собственное простое решение.
Вообще говоря, есть несколько готовых скриптов, JavaScript библиотек, реализующих функционал модальных окон, например:
(в статье не рассматриваем решения на базе Frontend-фреймворков)
Несколькими из них я пользовался сам, но почти у всех находил какие-то недостатки. Некоторые из них требуют подключения библиотеки jQuery, которая есть не на всех проектах. Для разработки своего решения, нужно сначала определиться с требованиями.
Что мы ждём от модальных окон? Отвечая на этот вопрос, я основывался на докладе «Знакомьтесь, модальное окно» Анны Селезнёвой, а так-же на относительно старой статье NikoX «arcticModal — jQuery-плагин для модальных окон».
Итак, чтобы нам хотелось видеть?
Дисклеймер: Прежде чем мы рассмотрим подробности, сразу дам ссылку на готовый код получившейся библиотеки (HystModal) на GitHub, а также ссылку на демо+документацию.
1. Разметка HTML и CSS
1.1. Каркас модальных окон
Как открыть окно быстро? Самое простое решение: разместить всю разметку модального окна сразу в HTML странице. Затем скрывать/показывать это окно при помощи переключения классов CSS.
Набросаем такую разметку HTML (я назвал этот скрипт «hystmodal»):
Ajax форма обратной связи в модальном окне
Всем привет. Засыпали вопросами о том, как реализовать форму, которая появляется в модальном окне после нажатия на кнопку, а после отправки, выводилось бы сообщение об успехе или провале.
Ajax форма обратной связи
Сегодня начнем не с jQuery, а с верстки кнопки и формы. Все скрипты подключим в конце страницы.
Кнопка, по нажатию на которую будет открываться модальное окно:
Теперь приведу код формы и блока, на котором будет располагаться форма:
Добавив стили, выглядеть это стало так:
Для создания модального окна, использовалась библиотека Remodal. Это набор из css и js файлов, как раз для создания анимированных модальных окон. Можете скачать по ссылке или уже с моими правками в конце статьи.
Между тегами head подключаем стили:
Не буду приводить исходный код css и js из файлов, отвечающих за модальное окно и форму, так как они достаточно объемы. Если что, смотрите в исходнике. А вот php обработчик во многом стандартный (если можно так сказать):
Пожалуйста, не забывайте менять адреса электронной почты на свои.
Ребята, настоятельно прошу тестировать форму на реальном или виртуальном сервере (хостинге). Убедитесь пожалуйста, что ваш сервер поддерживает php, у вас платный тариф и не тестовый период. В противном случае, в 90% случаев форма работать не будет.
Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на конструктор форм обратной связи.
Обновленная версия статьи находится тут
163 комментария
Кнопка, по нажатию на которую будет открываться модальное окно:
Ты же на сервере тестируешь верно? Если да, то похоже, что в php.ini не правильно настроен путь к сайту. Скачай исходник, проверь просто его на сервере. Работает?
После нажатия на Оставить заявку выскакивает ошибся.
Здравствуйте, такой вопрос, форма открывается во всплывающем окне, после отправки я ее очищаю, далее выводится сообщение «Спасибо за вашу заявку», после этого если еще раз попробовать открыть форму то снова выводится сообщение «Спасибо за вашу заявку», хотелось бы чтобы при нажатии открывалась снова чистая форма а не данное сообщение, выше читал комментарии про то что необходимо сменить место вывода сообщения, можно на конкретном примере или коде это показать, заранее спасибо
На следующей неделе сделаю статью, в которой учту эту «проблему», хотя я не понимаю, зачем вам всем по несколько раз получать сообщения от одного пользователя)) Сделаю, чтобы можно было повторно отправлять. Постараюсь объяснить, что имел ввиду, когда говорил о том, что выводить сообщение нужно в другом месте, возможно, сразу покажу, как сделать несколько форм на одной странице, еще рекапчу от гугл подключим, или это уже отдельной статьей.
Нет, ну серьезно. Отправил юзер данные, посомтрел на «Спасибо», закрыл. Открывает снова, видит «Спасибо». Нужно, что бы при повторном вызове формы выводилась форма, а не благодарность. Лично я пока не понял как этого добиться.
Нужно, что бы при закрытии формы, скрипт начинал работу по новой. Аякс же не зря прикручен. Что добавить в код?
ошибка при отправке, использовал только исходники
прошу прощения, все работает, была проблема с хостингом с отправкой через php mail
Здравствуйте. Дмитрий, вы могли бы сбросить мне на почту, архив с двумя работающими формами?
Заранее благодарю!
Дмитрий, добрый день!
Не подскажете, как сделать, чтобы в форму (обработчик формы) передавался некий параметр, характеризующий откуда была вызвана форма ( в случае если точек вызова формы на основной странице несколько).
Заранее благодарю!
В конце статьи есть ссылка на актуальную версию статьи, там предусмотрена эта возможность.
Добрый день! Что-то на счёт обнуления формы всё так же глухо. Я так понимаю все горазды только писать, как всё просто. Создал событие onclick c перезагрузкой страницы, но на какие-то доли секунды снова показывается благодарственное окно и только потом идёт полная перезагрузка. Думаю, многие будут благодарны, если кто-то всё же реализует обнуление формы. Спасибо.
Так в этой форме суть была та же. Просто скрывалась форма и подставлялось сообщение. А назад не возвращалось ничего до перезагрузки страницы. В варианте, который предложил, сама форма не скрывается, а просто выводится сообщение, об успешной отправке и очищаются поля.
Добрый день. Прикрутил форму на сайт. После заполнения полей формы и нажатия на кнопку отправки пишет, что сообщение не отправлено. Хостинг платный, php поддерживает. Подскажите, пожалуйста, где искать проблему?
Возможно ваш хостер не разрешает отправлять на почтовые адреса не связанные (созданные) специально для сайта. Посмотрите, предоставляет ли хосткр услугу создания почты для сайта и попробуйте отправить на нее.
Добрый вечер.
Столкнулся с такой проблемой, на главной странице форма работает у меня ухожу в корень, форма перестаёт работать Not Found при отправке. Возможно проблема с шаблоном(джумла 2.5)
Помогите, буду очень признателен
studio-marketing.ru
Аналогично, не могу сделать 2 формы уже все перепробовал.
Буду благодарен в помощи.
Иды меня и тд, все полностью.
Если у кого-то есть 2 формы на 2 обработчика, буду очень признателен
Добрый день Дима, спасибо за форму. Я новичок, хочу использовать механику формы для модального окна bootstrap3. На сколько реально это реализовать? И с какой стороны подойти?
Да вполне реально. Просто вырезать форму и вставить в модальное окно бутстрапа. Не понял в чем собственно проблема?
В первую очередь необходимо правильно оформить ссылку для вызова модального окна, ей может быть просто текстовая ссылка в любой статье, а так же пункт в меню навигации по сайту. Соответственно туда где вам приспичит добавляем теги
Добрый день, подскажите пожалуйста как сделать в вашем скрипте чтобы после отправки появлялось всплывающее окно с каким то текстом?
Подскажите плизь как прикрутить отправку файла к такой форме
input type=»file» не работает
используя serialize не получится передать файл, посмотрите в сторону formdata
Здравствуйте.
Почему то не работает отправка. Посылает на перезагрузку. Дело в расположении mail.php, я так понимаю? Я и в корень его ложил, и указывал полный путь, все равно страница перезагружается. Можете подсказать, в чем может быть подвох?
Отличная форма. Так и не смог разобраться как делать 2 формы на одной страницы. Вышлите пожалуйста на почту вариант с 2-мя формами. Новый вариант формы смотрел, он не совсем подходит, нужен именно этот вариант формы. Спасибо
Нужна только подстановка Темы письмат (разная тема для каждой формы)
а как вы уже пробовали? что не получилось? какая ошибка вылазит? по аналогии с другими полями пробовали? понимаете как обработчик получает данные из формы?
А как вы уже пробовали? Какая ошибка выскакивала? На каком этапе загвоздка?
Да я не пробовал еще, разные коды только пробовал с разных сайтов, вот думал вы поможете мне, тк код же ваш. там несколько строчек наверное поправить нужно и все.
У меня сейчас вот такой код стоит, но выводит сообщение «спасибо» вместо полей инпут, то есть между тегами
В случае успешной отправки, нужно вызвать модальное окно. То есть тут:
Добрый день подскажите как закрыть окно remodal автоматически после отправки и показа сообщения Спасибо за заявку!. Использовал скрипт Unimail для формы.
Вот код
Форма обратной связи в модальном окне
Здравствуйте. В этом уроке мы будем делать полноценную форму обратной связи, причем появляться она будет в модальном окне по нажатию на кнопку на странице. Данный урок я делал сам, с нуля, воспользовавшись только фреймфорком jQuery и одним небольшим JavaScript’ом. Урок очень интересный, поэтому прошу не проходить мимо! Ниже Вы можете просмотреть демонстрацию получившейся у меня формы, а также скачать необходимые файлы для работы:
Шаг 1. Общее описание и работа формы обратной связи:
Сначала я Вам расскажу, какие нам файлы будут нужны и, собственно, зачем они нужны:
Итак, идем дальше и по порядку. Работа формы будет заключаться следующим образом: Пользователь заходит на страницу, на которой находится кнопка для вызова модального окна, нажмет ее, затем появляется форма, в ней посетитель вводит все данные и текст сообщения и отправляет, потом его перекидывает на страницу с сообщением об удачной или неудачной отправке письма. Вот и все, а теперь начнем верстать нашу форму.
Шаг 2. Кнопка для вызова формы.
Так, чтобы, наше модальное окно с формой появлялось, нужно его как-то заставить делать это. Для этого нам всего лишь нужно разместить на странице обыкновенную кнопку. Код такой кнопки приведен ниже, вместе с примененными к ней стилями:
HTML:
Шаг 3. Сама форма + настройки к ней
Теперь давайте разберемся, где же все-таки будет находиться наша форма обратной связи. А находиться она будет в файле contact.html, который уже расположен в исходниках урока. Данная форма совсем небольшая, поэтому ее код я расположу ниже:
Как Вы можете наблюдать, идя по коду даже невооруженным глазом видно, что для более качественного отображения формы я использовал табличную верстку. Это мне очень пригодилось, чтобы сравнять все поля формы.
Шаг 4. Обработчик, отвечающий за отправку писем
Здесь я быстро расскажу Вам о главном обработчике по отправке писем. Его код я не буду здесь приводить, т. к. он есть в исходниках. Скачайте и посмотрите его содержание. Если Вы знаете php где-то на среднем уровне, примерно как я, то вы без труда сможете самостоятельно разобрать весь код этого обработчика. Если все готово, то идем дальше.
Шаг 5. «Прикрутка» основного фреймворка jQuery
Шаг 6. Стилизация формы
Как Вы можете видеть, стили к нашей форме вынесены отдельно, в файл style.css, поскольку эти стили занимают слишком много места. Нам всего лишь надо привязать нижеприведенный код к нашему индексному файлу:
Шаг 7. jQuery-доработки
Теперь для полноценной работы модального окна формы мы должны вставить следующий jQuery-код:
jQuery
Заключение.
Вот и готова наша интересная форма обратной связи. Путь был долгим и сложным, поэтому, если кто-нибудь что-нибудь не понял, выслушаю ваши вопросы в комментариях к данному уроку. А у меня на этом все, до новых встреч, друзья!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Максим Курочкин
Урок создан: 15 Июня 2009
Просмотров: 249286
Правила перепечатки
5 последних уроков рубрики «Для сайта»
Эффекты блочного раскрытия
Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.
20 бесплатных тем для WordPress в стиле Material Design
Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.
20 сайтов с креативным MouseOver эффектом
Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.
45+ бесплатных материалов для веб дизайнеров за август 2016
Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.