Adding ReCAPTCHA to contact form

Author: SteveWilkes

_config.yml

@@ -17,14 +17,15 @@ ga_analytics: UA-165403546-1
 
 # Comment settings
 comments:
-  enabled: truec
+  enabled: true
   show_count: true
   empty: []
   form_action: 'https://agileobjects-postblogcomment.azurewebsites.net/api/PostBlogComment?code=4M3vF5qIkyTCwtOWjvjJzuPWm7DAyKNxhMLLlj2gaFFHSyLUYQRK5A=='
 #  form_action: 'http://localhost:7071/api/PostBlogComment'
 
 # Contact form settings
 contact:
+  recaptcha_key: '6LctXKYZAAAAAF7Bm_IchT8ZJaqohVK7w-xrPZqy'
   form_action: 'https://agileobjects-email.azurewebsites.net/api/SendEmail?code=v/fdE3E7FhUc9QgLaXeOXvOParYBoCXfiFesiy9Y7QEiMOYKq7lVrQ=='
 # form_action: 'http://localhost:7071/api/SendEmail'
 

_includes/scripts/comments.html

@@ -1,3 +1,3 @@
 <script src="/assets/js/ao-forms.min.js"></script>
 <script src="/assets/js/md5.min.js"></script>
-<script async src="/assets/js/comments.min.js"></script>
+<script src="/assets/js/comments.min.js" async></script>

_includes/scripts/contact.html

@@ -1,2 +1,3 @@
-<script src="/assets/js/ao-forms.min.js"></script>
-<script async src="/assets/js/contact.min.js"></script>
+<script src="https://www.google.com/recaptcha/api.js" async defer></script>
+<script src="/assets/js/ao-forms.min.js"></script>
+<script src="/assets/js/contact.min.js" async></script>

_sass/_forms.scss

@@ -2,22 +2,32 @@
 
 /* Form fields */
 input,
-textarea {
-    background: $white;
+textarea,
+.g-recaptcha {
     border-radius: 0;
     box-shadow: none;
     box-sizing: border-box;
-    font-size: 16px;
     line-height: 1.5;
     margin: 10px 0 0 0;
-    padding: 8px 10px;
     vertical-align: baseline;
 }
 
-input[type="text"],
+input,
 textarea {
+    background: $white;
+    font-size: 16px;
+    padding: 8px 10px;
+}
+
+input[type="text"],
+textarea,
+.g-recaptcha {
     border: 1px solid $black;
     color: $gray-darkest;
+}
+
+input[type="text"],
+textarea {
     display: block;
     max-width: 100%;
     width: 100%;

assets/js/ao-forms.js

@@ -45,16 +45,20 @@
         },
         email: function () {
             return ao.isEmail(this.e.value);
+        },
+        recaptcha: function () {
+            this.e.value = grecaptcha.getResponse();
+            return Boolean(this.e.value);
         }
     };
     var validatorNames = Object.keys(validators);
     var validatorsCount = validatorNames.length;
 
-    var AoValidator = ao.derive(function (input) {
-        this._base.call(this, input);
+    var AoValidator = ao.derive(function (inputElemOrId) {
+        this._base.call(this, inputElemOrId);
 
         this.on('blur keyup', this.validate);
-        this._msg = ao(input.nextElementSibling);
+        this._msg = ao(this.e.nextElementSibling);
         if (this._msg.hasClass('error-message') === false) {
             this._msg = ao('<span>').addClass('error-message');
             this.after(this._msg);
@@ -69,16 +73,27 @@
         }
     });
 
+    AoValidator.prototype.setValid = function (valid) {
+        var remove, add;
+        if (valid) {
+            remove = 'error', add = 'valid';
+        } else {
+            remove = 'valid', add = 'error';
+        }
+        this._msg.removeClass('field-validation-' + remove).addClass('field-validation-' + add);
+        return this;
+    };
+
     AoValidator.prototype.validate = function () {
         for (var i = 0, l = this._validators.length; i < l; ++i) {
             var validator = this._validators[i];
             if (validator.test.call(this) === false) {
                 this._msg.html(validator.msg);
-                this._msg.removeClass('field-validation-valid').addClass('field-validation-error');
+                this.setValid(false);
                 return false;
             }
         }
-        this._msg.removeClass('field-validation-error').addClass('field-validation-valid');
+        this.setValid(true);
         return true;
     };
 
@@ -140,6 +155,10 @@
         return new AoForm(form);
     };
 
+    ao.validator = function (inputElemOrId) {
+        return new AoValidator(inputElemOrId);
+    };
+
     ao(function () {
         var tooltips = ao.getAllByCss('.has-tooltip');
         for (var i = 0, l = tooltips.length; i < l; ++i) {

assets/js/ao-forms.min.js

@@ -4,9 +4,14 @@
 
         var ContactForm = function () {
             function contactForm() {
-                this.name = ao.get('contact-form-name');
-                this.email = ao.get('contact-form-email');
-                this.message = ao.get('contact-form-message');
+                this._name = ao.get('contact-form-name');
+                this._email = ao.get('contact-form-email');
+                this._message = ao.get('contact-form-message');
+                this._recaptcha = ao.validator('contact-form-recaptcha');
+            };
+
+            contactForm.prototype.recaptchaValid = function () {
+                this._recaptcha.setValid(true);
             };
 
             contactForm.prototype.handleSend = function (form) {
@@ -19,18 +24,19 @@
                 aoForm.submitting();
 
                 var formData = {
-                    name: this.name.value,
-                    email: this.email.value,
-                    message: this.message.value
+                    name: this._name.value,
+                    email: this._email.value,
+                    message: this._message.value,
+                    ['g-recaptcha-response']: this._recaptcha.e.value
                 };
 
                 ao.ajax({
                     type: 'post',
                     url: form.action,
                     data: formData,
                     ctx: aoForm,
-                    onFail: function() { this.error(); },
-                    onSuccess: function() { this.ok(); }
+                    onFail: function () { this.error(); },
+                    onSuccess: function () { this.ok(); }
                 });
 
                 return false;
@@ -49,6 +55,7 @@
 
         ao(function () {
             web.contactForm = new ContactForm();
+            window.recaptchaValid = function () { web.contactForm.recaptchaValid(); };
         });
     })(ao.Web || (ao.Web = {}));
 })(Ao);

assets/js/contact.js

@@ -26,6 +26,10 @@ <h1 class="post-title">Contact</h1>
                       placeholder="Your message"
                       data-val="true" data-val-required="A message is required"></textarea>
 
+            <div class="g-recaptcha" data-sitekey="{{ site.contact.recaptcha_key }}" data-callback="recaptchaValid"></div>
+            <input type="hidden" id="contact-form-recaptcha" name="recaptcha" 
+                   data-val="true" data-val-recaptcha="Are you a robot...?" />
+
             <input id="contact-form-submit" type="submit" value="Send" />
 
             <div id="progress-cover" class="hidden"></div>