- Підключаємо форму до сайту
- ініціалізація форми
- Опції
- HTML код
- Виклик форми з модальним вікном
- Як включити Recaptcha?
- можливі помилки
- Чи не показується Google Recaptcha в формі
- Все зробив по інструкції, але форма не працює, де шукати помилку?
- Інтеграція форми на cms Joomla + висновок в списку матеріалів (в кожному матеріалі) з захопленням заголовка...
Вітаю всіх! минулу замітку я присвятив тому, як можна створити спливаюче вікно, яке показується на сайті один раз і через певний інтервал часу. Так ось, в це вікно, як варіант, можна вставити форму. Вона може бути формою підписки або формою зв'язку, в загальному, чим завгодно. У спливаючих вікнах краще виводити ajax-форми, щоб дані відсилалися без перезавантаження сторінки.
структура статті
Якщо ви робите сайт на движку, наприклад, Joomla або WordPress, то можна звичайно використовувати різні готові рішення для форм, в тому числі і конструктори. Але що, якщо ви верстаєте просто на чистому HTML і замовник попросив «оживити» форми, щоб вони працювали. Ось тут якраз і стане в нагоді ця форма.
UPD. 02.08.2018
Стаття переписана з урахуванням того, що форма була викладена на GitHub
І так, давайте приступимо. Насамперед скачайте вихідні форми з мого сховища на Гітхаб.
Дану збірку я збирав за допомогою таск-менеджера Gulp. Про те, як з ним працювати я писав детальний огляд , Обов'язково прочитайте.
Підключаємо форму до сайту
Розпаковуємо архів з формою. Далі скопіюйте з папки dist весь вміст в папку форми (наприклад, ajax-form) в вашому шаблоні сайту. Далі підключаємо ресурси - стилі і скрипти. У папках css і js є дві версії - стисла і звичайна. Якщо ви плануєте надалі вносити правки в код, то краще підключати стиснені версії.
<Link rel = "stylesheet" href = "/ css / main.css"> <script src = "// ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </ script> <script src = "/ js / scripts.js"> </ script>
Якщо на вашому сайті вже підключена бібліотека 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>
код форми
<Div id = "callback" class = "zoom-anim-dialog mfp-hide white-block"> <! - Код форми -> </ 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 + висновок в списку матеріалів (в кожному матеріалі) з захопленням заголовка матеріалу
Перевірка орфографії
В чому проблема?Все зробив по інструкції, але форма не працює, де шукати помилку?
Що ще сказати?