Ще, у минулому статті був, напевно, недолік в тому, що складно було підключити декілька форм, а саме, потрібно було дублювати скрипт, що обробляє форму, що не дуже красиво. У цій статті поправимо і цей момент. Крім того, форма буде працювати і без модального вікна.
Ах да, приведу в порядок айдішнікі і класи, щоб легше розумілося що і навіщо. Зміню дизайн форми, так цікавіше. В одній з наступних статей, можливо, підключимо до цієї форми reCapthсa від Google, і настроєм мета "Подія", при якому зазначається вдале надсилання, так що готується цілий цикл статей.
Як зробити форму зворотного зв'язку в модальному вікні
Давайте приступимо. Так як модальне вікно буде викликатися за допомогою jQuery плагіна Remodal. то перед закривається тегом
підключимо сам jQuery і плагін Remodal. Нижче додамо скрипт, який буде відповідати за відправку форми без перезавантаження сторінки. Виглядає це наступним чином:
Зверніть увагу на шлях до файлів. Я вирішив помістити практично всі файли в папку modalform, щоб легше було підключати до проекту.
Перш ніж перейти до розмітки форми, підключимо css файли модального вікна. Я роблю це між тегами head:
Щоб було цікавіше:
Отже, тепер перейдемо до розмітки самої форми і кнопки викликає її. Почнемо з кнопки.
Хоч коду, на перший погляд, досить багато, насправді все не так складно. Вся форма обгорнута в div c класом remodal. У нього є data-remodal-id з таким же параметром як у кнопки. Тобто firstForm. Саме завдяки їм, при кліці на кнопку відкривається потрібне вікно, в разі, якщо на сторінці їх кілька.
Усередині сама форма з fieldset (ами). Тут важливо звернути увагу, на параграф з класом "msgs". Саме сюди буде виводитися повідомлення про успішну відправку або помилку. Раніше повідомлення виводилося прямо всередині форми, замінюючи весь контент всередині.
Ще один момент. Приховане поле c класом formInfo. Воно потрібне для того, щоб відрізняти заявки і розуміти яку саме форму заповнив користувач, у разі, якщо їх декілька різних. Просто заповнюємо потрібним текстом значення value.
В кінці статті, я покажу як зробити так, щоб викликати вікно з різних місць на сайті і розуміти, на яку саме кнопку натиснув користувач.
Тепер давайте подивимося на скрипт, який допоможе нам відправити форму без перезавантаження сторінки. Я назвав його form.js:
В скрипті, говоримо, що на час показу повідомлення про успішну чи не успішною відправці, сховаємо заголовок. А через 3 секунди повернемо все на місце і відчистити поля форми разом з повідомленням.
Файл, який надішле отримані дані - mail.php. Ось його код:
У ньому кілька перевірок:
Чи прийшли дані методом POST, якщо так, то перевіряємо не порожні чи основні поля, якщо немає, то записуємо в змінні і відправляємо.
Якщо дані не прийшли методом POST, то викидаємо на головну (тобто користувач, якимось чином потрапив відразу на сторінку mail.php), а нам це не потрібно, так як може відправитися порожній лист.
На цьому перша частина закінчена.
Не забувайте вказувати свої поштові скриньки. До речі, на mail.ru листи можуть не приходити з вашого ip. Ну і правильно, користувачі mail.ru і IE повинні страждати.
І написати невеликий скрипт, який при кліці на на нашу кнопку (посилання) буде підставляти в приховане поле інформацію з title:
Тобто ми говоримо, що при кліці на елемент з класом linkButton, візьми текст з його title і помісти в input з name параметром formInfo, де:
linkButton - клас нашої кнопки;
formInfo - значення name прихованого поля;
Це дуже зручно, коли Лендінгем зроблений по типу інтернет магазину і на ньому кілька товарів. Щоб не робити кілька форм, просто задаємо title кнопці і легко дізнаємося, який саме товар, тариф або послугу замовив користувач.
Якщо буде вилазити помилка "not found", насамперед перевірте шлях до mail.php в файлі form.js