Сегодня разберем форму обратной связи на Bootstrap 4 со встроенной recaptcha от google.
Посмотреть демо можно на сайте исо24.рф
Исходники можно скачать здесь
Вот так вот выглядит Bootstrap форма обратной связи
Данная форма создана на HTML5 с применением технологии AJAX (без перезагрузки страницы) и выполнение отправки на PHP. В форме используется recaptcha от Google. Отправка сообщения подтверждается появлением уведомления над формой.
Заметка: Форма адаптирована под Bootstrap 4, но если вы используете Bootstrap 3, в исходниках есть соответствующий index файл.
Зарегистрируйте сайт
Для того чтобы использовать ReCaptcha, Вам нужно зарегистрировать сайт на сайте ReCaptcha.
После регистрации Вы получите пару ключей для использования ReCaptcha.
HTML
Для создания формы используйте код представленный в файле index.php со вставленной уже reCaptcha.
Не забудьте внести изменения:
- измените содержание блока с alt
data-sitekeyна Ваш ключ сайта от Гугл. —<div class="g-recaptcha" data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S"></div> - Не забудьте подключить скрипт гугл в шапке или футере сайта-
<script src='https://www.google.com/recaptcha/api.js'></script>
PHP
В php мы будем использовать Google’s client library библиотеку которая будет проводить проверку заполнения форм.
Данная библиотека представлена в исходниках.
Будьте внимательны. В файле contact.php необходимо внести изменения:
- Введите ваш секретный ключ —
$recaptchaSecret = 'YOUR_SECRET_KEY';
Вот и все. Форма должна работать. В завершение напомню, не забудьте подключить php и js файлы в футере.
<script src="validator.js"></script> <script src="contact.js"></script> |