Подключение одной строкой за 1 секунду!
Чтоб подключить капчу на свой сайт нужно всего лишь вставить эту строку
<script src="https://api.tee.su/lib/captcha.js"></script>
на сраницу с формой, для которой требуется CAPTCHA. И для input, в который будут вводится символы капчи добавить класс “xab_captcha” (class=”xab_captcha”). ВСЁ!
Демо на Codepen
DEMO https://codepen.io/mrTorres/pen/WavXmB
Подключение капчи по пунктам
-
Перед закрывающимся тегом body вставьте строку
<script src="https://api.tee.su/lib/captcha.js"></script>
Должно получиться так (пример):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ваш сайт</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
....
.....
......
........
...........
.................
........................
<script src="https://api.tee.su/lib/captcha.js"></script>
</body>
</html>
-
Внутри формы, которую вы хотите защитить капчей, создайте <input class="xab_captcha"/>
<form> ... <input class="xab_captcha"/> ... </form>
он предназначен для ввода символов капчи пользователем
* input может иметь любое количество и других классовДолжно получиться так (пример):
<body>
<form method="post">
<input name="user" placeholder="user"/>
<input name="pass" placeholder="password"/>
<input class="xab_captcha" placeholder="Введите символы с картинки"/>
<button>Отправить форму</button>
</form>
<script src="https://api.tee.su/lib/captcha.js"></script>
</body>
-
Всё! Готово! Пользуйтесь!
Стилизация
После подключения капчи xCap, перед элементом <input class="xab_captcha"/> появиться изображение с капчей <img>, обернутое в <div class="selectme_forcss">
<div class="selectme_forcss">
<img id="img_xabcapt" src="https://api.tee.su?api=get_img_captca">
</div>
Стилизовать эти элементы можно используя селектор .selectme_forcss, пример:
div.selectme_forcss {
....
...
..
.
}
div.selectme_forcss img {
....
...
..
.
}