Stopping basic spam bots from filling contact form (#80)

* Prevent form submit if username form field is filled

* Clean up white space in the diff

* Clean up white space in the diff(2)

* Clean up white space in the diff(3)

* Remove placeholder text to avoid confusion if hidden field exposed unintentionally

Co-authored-by: Copilot <[email protected]>

* Cleanup whitespace

* Remove placeholder text to avoid confusion if hidden field exposed

---------

Co-authored-by: Copilot <[email protected]>

Author: avicndugu

_includes/contact.html

@@ -23,6 +23,9 @@ <h3 class="section-subheading text-muted">{{ site.data.sitetext[site.locale].con
                   required="required" data-validation-required-message="{{ site.data.sitetext[site.locale].contact.name-validation | default: "Please enter your name." }}">
                 <p class="help-block text-danger"></p>
               </div>
+              <div class="form-group d-none">
+                <input name="username" class="form-control" id="username" type="text" tabindex="-1" autocomplete="off">
+              </div>
               <div class="form-group">
                 <input name="_replyto" class="form-control" id="email" type="email"
                   placeholder="{{ site.data.sitetext[site.locale].contact.email | default: "Email*" }}"
@@ -84,6 +87,9 @@ <h3 class="section-subheading text-muted">{{ site.data.sitetext.contact.text | d
                   required="required" data-validation-required-message="{{ site.data.sitetext.contact.name-validation | default: "Please enter your name." }}">
                 <p class="help-block text-danger"></p>
               </div>
+              <div class="form-group d-none">
+                <input name="username" class="form-control" id="username" type="text" tabindex="-1" autocomplete="off">
+              </div>
               <div class="form-group">
                 <input name="_replyto" class="form-control" id="email" type="email"
                   placeholder="{{ site.data.sitetext.contact.email | default: "Email*" }}"
@@ -122,4 +128,4 @@ <h3 class="section-subheading text-muted">{{ site.data.sitetext.contact.text | d
   </div>
 </section>
 {% endif %}
-<!-- End Contact -->
+<!-- End Contact -->

assets/js/contact_me.js

@@ -12,6 +12,7 @@ $(function() {
       // get values from FORM
 	  var url = "https://formspree.io/" + "{% if site.formspree_form_path %}{{ site.formspree_form_path }}{% else %}{{ site.email }}{% endif %}";
       var name = $("input#name").val();
+      var username = $("input#username").val();
       var email = $("input#email").val();
       var phone = $("input#phone").val();
       var message = $("textarea#message").val();
@@ -22,6 +23,7 @@ $(function() {
       }
       $this = $("#sendMessageButton");
       $this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
+      if(username === ''){ // Disable's form submit if hidden input(username) has been filled
       $.ajax({
         url: url,
         type: "POST",
@@ -64,6 +66,7 @@ $(function() {
           }, 1000);
         }
       });
+    }
     },
     filter: function() {
       return $(this).is(":visible");