How to insert captcha to blogger or wordpress or any website using Google Apps Script?

How to insert captcha to blogger or wordpress or any website using Google Apps Script sounds different. I came across an article Can I have captcha in google apps script? which inspired me to integrate blogger contact form with captcha using apps script implementation.

CAPTCHA inputs are perhaps the frustrating experiences on the web. Painful for most of users, let alone the visually impaired or anyone who relies on assistive technologies such as screen-readers to access the web. However, sadly, CAPTCHAs are absolutely vital in the fight against spam. The NoCAPTCHA reCAPTCHA of google is most simple to solve. Now let us discuss about its implementation.

You can see the live working implementation in my own blog About Me

App script do not allow g-recaptcha-response value to be fetched from the form which was submitted through POST, Hence, I used a trick to send value of g-recaptcha-response after the user solves from the client side by coping it to hidden field named gc

Here, is a client side implementation of reCaptcha


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script language="JavaScript" type="text/javascript">

$(function() {
  $('#cc-form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
 $("#submit").attr("disabled", true);
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      if(data.success){
            alert('Thank You, will get back to you soon.');
            window.location='http://cybernol.blogspot.in/p/about-me.html';
      }
      else
      {
            alert('Error occured, please try after some time.');
      }
    }).fail(function(data) {
      alert("Failed");
    });
  });
});

function validateform() {
    var captcha_response = grecaptcha.getResponse();
    gc.value = captcha_response;
    if (captcha_response.length == 0) {
        alert("Please prove I'm not a robot");
        return false;
    } else {
        // Captcha is Passed
        return true;
    }
}
// End </script>



<br />
<form action="https://script.google.com/macros/s/AKfycbzr1q-8Y908yNb9rKAZRSJHsXl45SksWHu0y-Q9iG5PPvXgTCQ/exec" id="cc-form" method="post" onsubmit="return validateform();">
<input id="gc" name="gc" type="hidden" value="" />
Name:<br />
<input name="name" required="" type="text" />
  <br />
Subject:<br />
<input name="subject" required="" type="text" />
  <br />
E-Mail:<br />
<input name="mail" placeholder="someone@example.net" required="" type="email" />
  <br />
Description:<br />
<textarea name="desc" required="" type="text"></textarea><br />
<div class="g-recaptcha" data-sitekey="6LeIJBsTAAAAAJUvncIn-GmP0RYrY4m5MOVB1lVl">
</div>
<br />
<input id="submit" type="submit" />
</form>
<script type="text/javascript">
<!-- Begin
H5F.setup(document.getElementById('cc-form'));
// End </script>

Here, is a Server side implementation using Google Apps Script

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function doPost(request) {

var some=request.parameters.gc.toString();

var body="<b>"+request.parameters.name +" says...</b><br/>"+request.parameters.mail 
+ "<br/>Subject: " + request.parameters.subject
+ "<br/>Description: " + request.parameters.desc
;
  
   var payload =
   {
      "response" : some,
      "secret" : "6LeIJBsTAAAAADxhHSa5dDlVcpgC2loKA82m7kS4"
   };
   
   var options =
   {
     "method" : "post",
     "payload" : payload
   };

  var response = UrlFetchApp.fetch("https://www.google.com/recaptcha/api/siteverify", options);
  var result=JSON.parse(response);
  
  if(result.success)
  {
     GmailApp.sendEmail("YOUR-EMAIL", "Cybernol-" + request.parameters.subject,body,{htmlBody:body,replyTo:request.parameters.mail});
  }

   return ContentService.createTextOutput(JSON.stringify(result)).setMimeType(ContentService.MimeType.JSON);
}


Comments

Post a Comment

Do not spam.