Bootstrap форма обратной связи c recaptcha от Google

Сегодня разберем форму обратной связи на Bootstrap 4 со встроенной recaptcha от google.

Посмотреть демо можно на сайте исо24.рф

Исходники можно скачать здесь

Вот так вот выглядит Bootstrap форма обратной связи

Bootstrap форма обратной связи

Данная форма создана на HTML5 с применением технологии AJAX (без перезагрузки страницы) и выполнение отправки на PHP. В форме используется recaptcha от Google. Отправка сообщения подтверждается появлением уведомления над формой.

Заметка: Форма адаптирована под Bootstrap 4, но если вы используете Bootstrap 3, в исходниках есть соответствующий index файл.

Зарегистрируйте сайт

Для того чтобы использовать ReCaptcha, Вам нужно зарегистрировать сайт на сайте ReCaptcha.

Bootstrap форма обратной связи

После регистрации Вы получите пару ключей для использования  ReCaptcha.

Bootstrap форма обратной связи

HTML

Для создания формы используйте код представленный в файле index.php со вставленной уже reCaptcha.

Не забудьте внести изменения:

  • измените содержание блока с altdata-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>

3 комментария к “Bootstrap форма обратной связи c recaptcha от Google”

Оставьте комментарий