Merge pull request #328 from dwyl/default-to-honeypot

Fixes #321 by adding honeypot spam prevention

Author: nelsonic

README.md

@@ -340,35 +340,6 @@ e.g:
 
 Let us know if you have any questions!
 
-## SPAM prevention
-
-In order to avoid getting spammed and fill up google apps usage quota, we will be implementing a simple SPAM prevention technique that's known as Honeypot where it essentially creates a hidden text field that if filled up is assumed as a spam bot and prevents the form from submit.
-
-```html
-<form action="https://script.google.com/macros/s/..." method="post">
-  <!--input id must be honeypot or else it wont work-->
-  <label class="sr-only">Keep this field blank</label>
-  <input id="honeypot" type="text" name="honeypot" value="" />
-  <!--the rest of your form-->
-</form>
-```
-
-```css
-#honeypot {
-  display: none; /*makes the field not visible to humans*/
-}
-```
-
-```javascript
-/* form-submission-handler.js */
-/* remove the comment from this if statement */
-
-if (validateHuman(data.honeypot)) {  //if form is filled, form will not be submitted
-  return false;
-}
-
-```
-
 
 ## Uploading Files
 

form-submission-handler.js

@@ -1,4 +1,5 @@
 (function() {
+
   function validateHuman(honeypot) {
     if (honeypot) {  //if hidden form filled up
       console.log("Robot Detected!");
@@ -11,9 +12,14 @@
   // get all data in form and return object
   function getFormData(form) {
     var elements = form.elements;
+    var honeypot;
 
     var fields = Object.keys(elements).filter(function(k) {
-          return (elements[k].name !== "honeypot");
+      if (elements[k].name === "honeypot") {
+        honeypot = elements[k].value;
+        return false;
+      }
+      return true;
     }).map(function(k) {
       if(elements[k].name !== undefined) {
         return elements[k].name;
@@ -48,22 +54,23 @@
     // add form-specific values into the data
     formData.formDataNameOrder = JSON.stringify(fields);
     formData.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name
-    formData.formGoogleSendEmail = form.dataset.email || ""; // no email by default
+    formData.formGoogleSend
+      = form.dataset.email || ""; // no email by default
 
     console.log(formData);
-    return formData;
+    return {data: formData, honeypot};
   }
 
   function handleFormSubmit(event) {  // handles form submit without any jquery
     event.preventDefault();           // we are submitting via xhr below
     var form = event.target;
-    var data = getFormData(form);         // get the values submitted in the form
+    var formData = getFormData(form);
+    var data = formData.data;
 
-    /* OPTION: Remove this comment to enable SPAM prevention, see README.md
-    if (validateHuman(data.honeypot)) {  //if form is filled, form will not be submitted
+    // If a honeypot field is filled, assume it was done so by a spam bot.
+    if (formData.honeypot) {
       return false;
     }
-    */
 
     disableAllButtons(form);
     var url = form.action;

index.html

@@ -50,6 +50,11 @@ <h2 class="content-head is-center">Contact Us!</h2>
         <input id="color" name="color" placeholder="green" />
       </fieldset>
 
+      <fieldset class="pure-group honeypot-field">
+        <label for="honeypot">To help avoid spam, utilize a Honeypot technique with a hidden text field; must be empty to submit the form! Otherwise, we assume the user is a spam bot.</label>
+        <input id="honeypot" type="text" name="honeypot" value="" />
+      </fieldset>
+
       <button class="button-success pure-button button-xlarge">
         <i class="fa fa-paper-plane"></i>&nbsp;Send</button>
     </div>

style.css

@@ -35,3 +35,6 @@ button {
 #name, #email {
   width: 50%;
 }
+.honeypot-field {
+  display: none;
+}