Honeypot Instructions (dwyl#106)

* Honeypot Instructions

* fixed honeypot

* Made Honeypot as optional

README.md

@@ -293,7 +293,34 @@ 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;
+}
+
+```
 
 
 ## Background Reading

form-submission-handler.js

@@ -3,6 +3,16 @@ function validEmail(email) { // see:
   var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
   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() {
   var elements = document.getElementById("gform").elements; // all form elements
@@ -45,6 +55,13 @@ function getFormData() {
 function handleFormSubmit(event) {  // handles form submit withtout any jquery
   event.preventDefault();           // we are submitting via xhr below
   var data = getFormData();         // get the values submitted in the form
+
+  /* OPTION: Remove this comment to enable SPAM prevention, see README.md
+  if (validateHuman(data.honeypot)) {  //if form is filled, form will not be submitted
+    return false;
+  }
+  */
+
   if( !validEmail(data.email) ) {   // if email is not valid show error
     document.getElementById('email-invalid').style.display = 'block';
     return false;