xCap - это самая простая капча для любого сайта

xab.su

Подключение одной строкой за 1 секунду!

xCap Капча (CAPTCHA) для сайта - элементарно

Чтоб подключить капчу на свой сайт нужно всего лишь вставить эту строку
<script src="https://api.xab.su/lib/captcha.js"></script>
на сраницу с формой, для которой требуется CAPTCHA. И для input, в который будут вводится символы капчи добавить класс “xab_captcha” (class=”xab_captcha”). ВСЁ!

Демо на Codepen

DEMO https://codepen.io/mrTorres/pen/WavXmB

Подключение капчи по пунктам

  1. Перед закрывающимся тегом body вставьте строку

     <script src="https://api.xab.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.xab.su/lib/captcha.js"></script>

      </body>
     </html>
  2. Внутри формы, которую вы хотите защитить капчей, создайте <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.xab.su/lib/captcha.js"></script>
     </body>
  3. Всё! Готово! Пользуйтесь!

Стилизация

После подключения капчи xCap, перед элементом <input class="xab_captcha"/> появиться изображение с капчей <img>, обернутое в <div class="selectme_forcss">

  <div class="selectme_forcss">
  <img id="img_xabcapt" src="https://api.xab.su?api=get_img_captca">
 </div>

Стилизовать эти элементы можно используя селектор .selectme_forcss, пример:


  div.selectme_forcss {
    ....
    ...
    ..
    .
  }
  div.selectme_forcss img {
    ....
    ...
    ..
    .
  }

2014-2018 © xab.su

Россия, МО, Одинцово