Думаю, повно вже подібного в інтернеті, але раз народ просить, то вирішив зробити. Тим більше, подібний функціонал повинен бути присутнім майже на кожному Лендінзі для реалізації кнопки зворотного дзвінка. І дійсно, зараз все більше з'являється результатів АБ - тестування, які говорять, що відкриті форми працюють гірше, ніж ті, що заховані в модальне вікно і відкриваються після натискання на кнопу.
Деякі стверджують, що це через те, що у людей потихеньку "виробляється імунітет" і відкрита форма - це агресивна продаж. Нібито зараз настав той час, коли користувач при вигляді відкритої форми вважає, що йому намагаються щось "впарити". Не зовсім згоден з цією теорією, але зерно істини - присутній. Може бути в деяких видах бізнесу це і так. Ну а зараз давайте займемося реалізацією форми.
Ajax форма зворотного зв'язку
Сьогодні почнемо ні з jQuery, а з верстки кнопки і форми. Всі скрипти підключимо в кінці сторінки.
Кнопка, після натискання на яку буде відкриватися модальне вікно:
Клас можете поставити будь-яке, а ось в href напишіть #modal - це буде id у контейнера затінений і контактною формою.
Тепер приведу код форми і блоку, на якому буде розташовуватися форма:
Додавши стилі, виглядати це стало так:
Для створення модального вікна, використовувалася бібліотека Remodal. Це набір з css і js файлів, як раз для створення анімованих модальних вікон. Можете скачати за посиланням або вже з моїми правками в кінці статті.
Між тегами head підключаємо стилі:
А перед закривається тегом body - додаємо скрипти:
Script.js - це скрипт для обробки форми. Той самий Ajax, який дозволяє нам здійснити всю процедуру без перезавантаження сторінки:
Не буду приводити вихідний код css і js з файлів, що відповідають за модальне вікно і форму, так як вони досить обсяги. Якщо що, дивіться в исходнике. А ось php обробник багато в чому стандартний (якщо можна так сказати):
Ось така ajax форма вийшла. Вибачте, що не намагався пояснити докладно, як робився кожен елемент. Просто хотілося дати готовий результат, а описувати всі анімації, появи - немає ніякого сенсу. Качайте исходник і впроваджуйте на свій сайт. А на сьогодні - все. Всім удачі!
Хлопці, настійно прошу тестувати форму на реальному або віртуальному сервері (хостингу). Переконайтеся ласка, що ваш сервер підтримує php, у вас платний тариф і не тестовий період. В іншому випадку, в 90% випадків форма працювати не буде.
Не чекайте листа у себе в поштовій скриньці, якщо ви просто відкрили індексний файл в браузері і натиснули кнопку "Відправити". Php - це серверний мова!
Якщо вам ліньки розбиратися і самостійно робити форму, то рекомендую звернути увагу на конструктор форм зворотного зв'язку.
Оновлена версія статті знаходиться тут
Це цікаво:
Напевно моє запитання не зовсім зрозуміли ...
З висновком повідомлення все відмінно, хотілося б що б при закритті форми - повідомлення зникало і з'являлася знову форма. Не знаю наскільки правильно буде сказати «оновити» форму без перезавантаження після повторного відкриття мода. Хто допоможе дописати в цьому напрямку - допоможу фінансово.
Правильно тебе зрозуміли. Я з відповіді зрозумів, що перенесуть форму виведення Спасибі над формою, тоді коли відвідувач захоче снів ввести дані, форма буде снів відправляти, а не виводиться повідомлення Спасибі, оскільки його перенесуть і форма для відправки не закриватиметься висновком успішного відправлення. Тобто, буде форма і висновок відправки кожне в своєму вікні, тоді користувачі зможуть спокійно відправляти скільки потрібно заявок.