Add simple anti-spam checks to contact form

_config.yml

@@ -327,6 +327,9 @@ t:
         label: "Objet"
       message:
         label: "Votre message"
+      captcha:
+        label: "Question anti-spam : combien font 3 + 3 ?"
+        error: "Merci de répondre correctement à la question anti-spam."
       confirmation:
         title: "Message envoyé !"
         subtitle: "Merci de nous avoir contacté, nous revenons vers vous le plus vite possible !"
@@ -504,6 +507,9 @@ t:
         privacyPhrase: "We will never share your email without your consent."
       message:
         label: "Your message"
+      captcha:
+        label: "Anti-spam question: what is 3 + 3?"
+        error: "Please answer the anti-spam question correctly."
       confirmation:
         title: "Message sent!"
         subtitle: "Thank you for contacting us, we will get back to you as soon as possible!"
@@ -680,6 +686,9 @@ t:
         privacyPhrase: "Mai compartirem el teu correu electrònic sense el teu consentiment."
       message:
         label: "El teu missatge"
+      captcha:
+        label: "Pregunta anti-brossa: quant fan 3 + 3?"
+        error: "Respon correctament a la pregunta anti-brossa."
       confirmation:
         title: "Missatge enviat!"
         subtitle: "Gràcies per contactar amb nosaltres, us respondrem el més aviat possible!"
@@ -855,7 +864,10 @@ t:
         label: "Su dirección de correo electrónico"
         privacyPhrase: "Nunca compartiremos su correo electrónico sin su consentimiento."
       message:
-        label: "Tu mensa"
+        label: "Tu mensaje"
+      captcha:
+        label: "Pregunta anti-spam: ¿cuánto es 3 + 3?"
+        error: "Responda correctamente a la pregunta anti-spam."
       confirmation:
         title: "¡Mensaje enviado!"
         subtitle: "¡Gracias por contactarnos, nos pondremos en contacto con usted lo antes posible!"

_includes/contact-form.html

@@ -12,7 +12,18 @@ <h2>{{ site.t.[layout.lang].contactForm.title }}</h2>
             class="gform"
             method="POST"
             action="https://script.google.com/macros/s/AKfycbxzvB_Jbta7xCVuz-iThqXftPb1DcBTf-P-ah4KnbxBn3OhcHJF/exec"
+            data-captcha-error="{{ site.t.[layout.lang].contactForm.captcha.error }}"
           >
+            <div aria-hidden="true" style="position: absolute; left: -5000px;">
+              <label for="honeypot">Leave this field empty</label>
+              <input
+                type="text"
+                id="honeypot"
+                name="honeypot"
+                tabindex="-1"
+                autocomplete="off"
+              />
+            </div>
             <div class="form-group">
               <label for="email">{{ site.t.[layout.lang].contactForm.email.label }}</label>
               <input
@@ -46,6 +57,17 @@ <h2>{{ site.t.[layout.lang].contactForm.title }}</h2>
                 name="message"
               ></textarea>
             </div>
+            <div class="form-group">
+              <label for="captcha">{{ site.t.[layout.lang].contactForm.captcha.label }}</label>
+              <input
+                type="text"
+                class="form-control email-form"
+                id="captcha"
+                name="captcha"
+                inputmode="numeric"
+                required
+              />
+            </div>
             <button class="btn-default btn btn-block btn-lg" type="submit">
               {{ site.t.[layout.lang].buttons.submit }}
             </button>

js/form-submission-handler.js

@@ -3,12 +3,17 @@
     function getFormData(form) {
       var elements = form.elements;
       var honeypot;
+      var captcha;
 
       var fields = Object.keys(elements).filter(function(k) {
         if (elements[k].name === "honeypot") {
           honeypot = elements[k].value;
           return false;
         }
+        if (elements[k].name === "captcha") {
+          captcha = elements[k].value;
+          return false;
+        }
         return true;
       }).map(function(k) {
         if(elements[k].name !== undefined) {
@@ -47,7 +52,7 @@
       formData.formGoogleSendEmail
         = form.dataset.email || ""; // no email by default
 
-      return {data: formData, honeypot: honeypot};
+      return {data: formData, honeypot: honeypot, captcha: captcha};
     }
 
     function handleFormSubmit(event) {  // handles form submit without any jquery
@@ -60,6 +65,11 @@
       if (formData.honeypot) {
         return false;
       }
+
+      if ((formData.captcha || "").trim() !== "6") {
+        alert(form.dataset.captchaError || "Please answer the anti-spam question.");
+        return false;
+      }
 
       disableAllButtons(form);
       var url = form.action;
@@ -102,4 +112,4 @@
         buttons[i].disabled = true;
       }
     }
-  })();
+  })();