Captcha - I'm Not A Robot


Author: Vincent Berger
Created: Jan 26, 2019






Avoid spam like behavior on your web forms.
To implement a 'captcha' or a 'I'm not a robot' like feature, you will prevent spam like behavior in your website by making it mandotary to validate.
Make sure that your captcha string (if used instead of image) is not able to coƶperate to automated programs like AutoIT, send_keys(C#,C,C++) or any similarity, otherwise it has no point to use captcha's.

HTML & Javascript:

<!DOCTYPE html>
<html>
<head>
    <title>Translate System</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
</head>
<body>
    
    <h3>Captcha validation</h3>
    <div id="captcha_wrapper">
        <div id="captcha"></div>
        <input type="text" id="input" placeholder="Insert Captcha" />
        <div id="output">gg</div>
        <div id="captcha_container">
            <input type="checkbox" id="checked" onclick="validate();"/>
            I'm not a robot
        </div>

    </div>
    
    <!-- Scripts -->
    <script>
        function rand(captcha_str,fin){
            captcha_str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()_+{}:,./;][=-";
            fin=Math.floor(Math.random()*captcha_str.length);
            for(let i=0; i<24; i++){
                fin+=captcha_str[Math.floor(Math.random()* 85)];
            }
            //console.log(captcha_str.length);
            return fin;
        }
        var doc=document.getElementById("captcha");
            doc.innerHTML=(rand());
    </script>
</body>
</html>
                

CSS:

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

body {
    margin:0; font-family: 'Ubuntu', sans-serif;
    font-size:13px;
}
h3 {
    position:absolute; padding:20px;
    top:0px; left:100px; color:#379;
}
#input {
    position:relative; width:80%; left:5%;
    background-color:rgba(40,90,120,0.15);
    border:solid 2px #379;
    border-radius:4px; 
    color:#379; margin:10px; padding:5px;
}

#captcha_wrapper {
    position:absolute; padding:20px;
    top:50px; left:50px;
    border-bottom:solid 3px #379;
    border-top:solid 3px #379;
    background-color:rgba(40,90,120,0.11);
}
#captcha {
    position:relative; width:100% height:200px;
    background-color:rgba(40,90,120,0.15); 
    border-radius:4px;
    padding:10px; margin:20px;
}
#output {
    width:70%; left:10%;
    position:relative;
    border:solid 1px #379; border-radius:4px;
    background-color:rgba(40,90,120,0.15);
    padding:1px; margin-bottom:10px; 
    text-align:center;
    display:none;
}
#captcha_container {
    position:relative; background-color:rgba(40,90,120,0.3);
    border-radius:4px;
    padding:30px; 
}
                

Javascript:

function validate(){
    var input=document.getElementById("input"),
        check=document.getElementById("checked"),
        valid=document.getElementById("output");
    if(check.checked==true&&input.value===doc.textContent){
        doc.innerHTML=(rand());
        valid.style.display="block";
        valid.style.color="#090";
        valid.style.border="solid 1px #090";
        valid.style.backgroundColor="rgba(0,170,0,0.15)";
        valid.innerHTML=("Valid Captcha! Redirecting....");
    }else{
        doc.innerHTML=(rand());
        valid.style.display="block";
        valid.style.color="#900";
        valid.style.border="solid 1px #900";
        valid.style.backgroundColor="rgba(170,0,0,0.15)";
        valid.innerHTML=("Invalid Captcha! Try agian!");
    }
}
                

Place a comment related to this article

!

When u want to use a code block in your comment, you need to work with the <pre> and <code> tags.
You can specify the program language you want to use in the comment to assign the code tag class attribute with your program language name.
<pre>
  <code class="javascript">
   //_ Use lowercase phrase within the code tags class attribute:
   //_ C++ refered as cpp
   //_ C# refered as cs
   //_ Objective-C and C both refered as c
   //_ VB.net refered as vbnet
   //_ And so on...
  </code>
</pre>
Available program languages:
  • Access log
  • Apache
  • AutoIt
  • Arduino
  • Bash
  • C
  • C#
  • C++
  • CSS
  • CoffeeScript
  • HTML or XML
  • JSON
  • Java
  • JavaScript
  • Nginx
  • Objective-C
  • PHP
  • Perl
  • Python
  • Ruby
  • SQL
  • Swift
  • PowerShell
  • VB.net
We do not allow any direct type of links in the comment section.
Please format a link with with the following query:
domain dot com/?q=query
Thank you for understanding.


3248fsdf1283 Captcha


Back to Top