Як встановити і налаштувати капчу, бізнес-сайт Павла Макарова

Добрий день друзі! У цій статті мова піде про капчи (captcha). Я розповім Вам, як «прикрутити» капчу практично до будь-якої форми Вашого сайту. Як налаштувати капчу. змінити колір фону, колір символів, розміри капчи і т.д. Увага, капча (captcha) працює на php.

Отже, починаємо роботу! Для початку я покажу Вам, що у нас повинно вийти. Зовнішній вигляд форми зворотного зв'язку зі встановленою капчі:

Якщо відвідувач Вашого сайту не заповнив поле форми «введіть літери» або ввів некоректні дані, то з'являється повідомлення про помилку. Символи капчи при цьому змінюються на інші.

Думаю, тепер можна переходити безпосередньо до коду. Я постараюся максимально докладно і послідовно пояснювати кожен крок установки капчі на форму зворотного зв'язку.

У корені Вашого сайту створіть каталог (папку) з назвою «captcha», в ньому будуть перебувати два файли: captcha.php - скрипт генерації капчи і verdana.ttf - файл шрифту капчі.

Пишемо php-код скрипта генерації капчи, файл captcha.php. в коді дані пояснення щодо налаштувань генерації картинок капчи.

А тепер html-код форми зворотного зв'язку зі встановленою капчі цілком:

А зараз, давайте, додамо css-стилі для зображення і поля введення нашої капчі, щоб вони виглядали акуратно:

Їх ми додаємо в кінець загальної таблиці стилів для форми зворотного зв'язку файлу style.css, приводити весь код тут я не бачу сенсу.

З html-кодом ми розібралися, css-стилі для капчи додали, переходимо до файлу js-form.js. Спочатку розберемо js-код, який відповідає за оновлення символів капчи після кожного натискання кнопки «відправити»:

Сенс тут в тому, що ми створюємо змінну «id» і після кожного натискання кнопки «відправити» присвоюємо їй довільне число. У другій сходинці створюємо змінну «captSRC», куди заносимо повний шлях до файлу генерації капчи captcha.php, а також передаємо ідентифікатор «id» методом GET.

Далі створюємо змінну «captcha» і присвоюємо їй дані, які ввів відвідувач:

Зараз нам необхідно оновити рядок, що відповідає за відправку даних в обробник send.php:

І в кінці скрипта js-form.js нам необхідно додати рядок, що відповідає за оновлення символів капчи, в не залежності від отриманих з обробника даних.

Велика частина нашої роботи закінчена, ми можемо сміливо перейти до зміни php-обробника - файл send.php. Зараз, давайте, піднімемося вгору по сторінці і ще раз подивимося на код файлу captcha.php. в самому верху знаходиться функція запуску сесії:

Додаємо цю функцію в самий верх нашого обробника файл send.php, капча працює на сесіях, тому їх запуск зараз нам необхідний. Далі нам потрібно убезпечити себе від шкідливого коду і перевірити вміст змінної $ captcha спеціальними екранують функціями:

І залишилося остання зміна: виконати перевірку на правильність введених символів капчи відвідувачем:

Тепер повний php-код файлу send.php з урахуванням всіх змін виглядає так:

Вітаю, капча встановлена ​​на форму зворотного зв'язку. За таким же принципом цю капчу можна встановити на будь-яку іншу форму Вашого сайту. Нижче, в кінці цієї статті Ви можете завантажити архів. В архіві Ви знайдете дві папки, в одній знаходяться тільки файли капчи. в інший файли форми зворотного зв'язку без перезавантаження сторінки з уже встановленою капчі.

В рубрику «Мотивація - шлях до успіху» я вибрав таку картинку:

Завантажити безкоштовно!

добрий день, форма відмінна, спасибі, за працю. У мене така виникає невелика проблемка, після обробки повідомлення, при наявність помилок, капча не відображається, поки не обновиш сторінку, в чому може бути проблема?