Проста форма зв'язку, яка працює без перезавантаження сторінки

Підключаємо форму до сайту
ініціалізація форми
Опції
HTML код
Виклик форми з модальним вікном
Як включити Recaptcha?
можливі помилки
Чи не показується Google Recaptcha в формі
Все зробив по інструкції, але форма не працює, де шукати помилку?
Інтеграція форми на cms Joomla + висновок в списку матеріалів (в кожному матеріалі) з захопленням заголовка...

Вітаю всіх! минулу замітку я присвятив тому, як можна створити спливаюче вікно, яке показується на сайті один раз і через певний інтервал часу. Так ось, в це вікно, як варіант, можна вставити форму. Вона може бути формою підписки або формою зв'язку, в загальному, чим завгодно. У спливаючих вікнах краще виводити ajax-форми, щоб дані відсилалися без перезавантаження сторінки.

структура статті

Якщо ви робите сайт на движку, наприклад, Joomla або WordPress, то можна звичайно використовувати різні готові рішення для форм, в тому числі і конструктори. Але що, якщо ви верстаєте просто на чистому HTML і замовник попросив «оживити» форми, щоб вони працювали. Ось тут якраз і стане в нагоді ця форма.

UPD. 02.08.2018
Стаття переписана з урахуванням того, що форма була викладена на GitHub

І так, давайте приступимо. Насамперед скачайте вихідні форми з мого сховища на Гітхаб.

Дану збірку я збирав за допомогою таск-менеджера Gulp. Про те, як з ним працювати я писав детальний огляд , Обов'язково прочитайте.

Підключаємо форму до сайту

Розпаковуємо архів з формою. Далі скопіюйте з папки dist весь вміст в папку форми (наприклад, ajax-form) в вашому шаблоні сайту. Далі підключаємо ресурси - стилі і скрипти. У папках css і js є дві версії - стисла і звичайна. Якщо ви плануєте надалі вносити правки в код, то краще підключати стиснені версії.

Якщо на вашому сайті вже підключена бібліотека jQuery, то можете її не підключати. Зверніть увагу на порядок підключення скриптів .

ініціалізація форми

Відразу зазначу, що валідація полів організовано засобами HTML5.

Форма викликається методом .simpleSendForm (), наприклад:

$ ( '# IdForm'). SimpleSendForm ();

Замість #idForm вказуємо індіфікатор форми. Взагалі код ініціалізації форми ви можете знайти в файлі scripts.js. Код виклику плагіна можна вирізати звідти і прописати прямо перед </ body>. Не забуваємо про 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 (рядок) - публічний ключ рекаптчі.

Форма в модальному вікні

Нашу форму можна показати і в модальному вікні. Модалку буде виводити бібліотека Magnific Popup .

HTML код

код кнопки

<Div class = "modal-btn-container btn-block"> <a href="#callback" class="modal-popup btn-submit btn btn-s40 btn-empty btn-grey"> Замовити дзвінок </a> </ div>

код форми

Ініціалізіруем модальне вікно і форму. Давайте зробимо автоматичне закриття віконця через 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. Після включення дивіться консоль на наявність помилок.

Ось така ось форма. Використовуйте на своєму сайті, сподіваюся вона буде вам корисна. Що ще сказати? Давайте тепер говорити будете ви - в коментарях. Запитуйте, якщо що незрозуміло. Також, якщо знайдете помилку, то прошу повідомити негайно, виправимо ...

На цьому все. Дякуємо за увагу. До зустрічі в наступних постах!

Інтеграція форми на cms Joomla + висновок в списку матеріалів (в кожному матеріалі) з захопленням заголовка матеріалу

Перевірка орфографії

В чому проблема?
Все зробив по інструкції, але форма не працює, де шукати помилку?
Що ще сказати?

Статьи