Форма зворотнього зв’язку з recaptcha

Робити буду на прикладі свій же форми.

Форма зворотнього зв'язку з recaptcha від Google

Отже, для тих, хто ще не зрозумів, ми намагаємося додати таку штуку в нашу форму:


В першу чергу потрібно отримати API key для домену, на якому буде використовуватися reСaptcha. Щоб його отримати, потрібно перейти на етустраніцу придумати назви і вказати потрібний домен:

Форма зворотнього зв'язку з recaptcha

Після цього, вас перекинуть на сторінку, де коротко буде описана інтеграція на сайт, а також перебувати ваш секретний ключ і ключ сайту:

Форма зворотнього зв'язку з recaptcha

Далі, нам кажуть, що перед закривається тегом потрібно розмістити наступний скрипт:

А в форму, там, де буде розташовуватися каптча - наступний блок:

Є кілька додаткових налаштувань, наприклад:

  • світлий або темний зовнішній вигляд - data-theme = "light" або data-theme = "dark".
  • нормальний або компактний розмір - data-size = "compact", data-size = "norml"

Так як в моїй формі всі скрипти розташовуються в кінці сторінки, то я вирішив і скрипт від Google помістити там же. Виглядає це все так:

Розмітка форми зараз виглядає так:

Ще раз повторюся, що не звертайте увагу на форму, якщо не використовуєте ту, про яку йшла мова в одній з минулих статей. Просто додайте в потрібне місце своєї форми div з ключем, який видав Google.

Самостійно зробити це досить складно, але є готовий скрипт, який просто підключається до обробника форми. Завантажити його можна з Github на цій сторінці:

Тепер необхідно підключити його до обробника (php файлу, який відправляє лист) або вставити скрипт прямо в нього. У мене це файл mail.php. Підключати на самому початку:

У цьому файлі написаний код, який передасть наш секретний ключ, значення g-recaptcha-response в Google, потім відбудеться перевірка успішна пройдена каптча. Але спочатку, потрібно додати кілька змінних:

Майже все готово, залишилося додати перевірку в форму, щоб показати користувачами, що вони не заповнили каптчу. Я роблю таку:

Повний код мого обробника:

Зверніть увагу на пошту і не забудьте поміняти на свою. Крім того, спосіб підключення файлу recaptchalib.php передбачає, що що mail.php і recaptchalib.php знаходяться поруч, тобто в одній папці. Якщо буде "вивалюватися" помилка, переконайтеся, що шляхи прописані правильно або скопіюйте код прямо в обробник (в самий верх).

Це цікаво:

  • Форма зворотнього зв'язку з recaptcha
    Атрибут accept в input type file
  • Форма зворотнього зв'язку з recaptcha
    Конструктор landing page Платформа LP
  • Форма зворотнього зв'язку з recaptcha
    Як встановити Google карту на сайт?