Fixes #321 by adding honeypot spam prevention

Remove unnecessary steps in the readme by including
honeypot spam prevention by default in the script.
Works just fine if no honeypot field is present, since
the falsey or empty behavior also means the form is
submitted. This just makes it easier for users to take
our example and get this feature for free rather than
needing to go through steps and having commented
out code in our sample script. Also fixes a bug since
filtering out the honeypot meant that the honeypot
data was no longer being used and was thus broken.

Author: mckennapsean

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

@@ -4,21 +4,17 @@
     return re.test(email);
   }
 
-  function validateHuman(honeypot) {
-    if (honeypot) {  //if hidden form filled up
-      console.log("Robot Detected!");
-      return true;
-    } else {
-      console.log("Welcome Human!");
-    }
-  }
-
   // 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;
@@ -56,19 +52,19 @@
     formData.formGoogleSendEmail = 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;
     }
-    */
 
     if( data.email && !validEmail(data.email) ) {   // if email is not valid show error
       var invalidEmail = form.querySelector(".email-invalid");

index.html

@@ -52,6 +52,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;
+}