From 6fb094ef29e0bff2b2099db57aca3019c4af0be0 Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves@ygat.es>
Date: Mon, 17 Aug 2020 16:29:26 +0200
Subject: [PATCH] Honeypot for preventing spam on form

---
 .../partials/components/contact-form.njk      | 20 ++++++++++++-------
 src/form/contact-form-handler.php             | 10 +++++++---
 src/scss/components/_form.scss                | 10 ++++++++++
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/_includes/partials/components/contact-form.njk b/src/_includes/partials/components/contact-form.njk
index 2cfb240..bfe55c2 100644
--- a/src/_includes/partials/components/contact-form.njk
+++ b/src/_includes/partials/components/contact-form.njk
@@ -7,12 +7,12 @@
     <form name="contact" method="POST" action="/form/contact-form-handler.php">
       <ol class="[ field-list ]">
         <li class="[ field-list__field-group ]">
-          {{ label("Nom", "name") }}
-          {{ field( "text", "name", { required: true, placeholder: "", autocomplete: "name", autocorrect: "off", autocapitalize: "off" } ) }}
+          {{ label("Nom", "namezzz") }}
+          {{ field( "text", "namezzz", { required: true, placeholder: "", autocomplete: "name", autocorrect: "off", autocapitalize: "off" } ) }}
         </li>
         <li class="[ field-list__field-group ]">
-          {{ label("Email", "email") }}
-          {{ field( "email", "email", { required: true, placeholder: "", autocomplete: "email" } ) }}
+          {{ label("Email", "emailzzz") }}
+          {{ field( "email", "emailzzz", { required: true, placeholder: "", autocomplete: "email" } ) }}
         </li>
         <li class="[ field-list__field-group ] [ full-width ]">
           {{ label("Je vous contacte pour :", "select") }}
@@ -30,9 +30,15 @@
         <li class="[ field-list__field-group ] [ full-width ]">
           {{ checkboxes("", "subscribe", [ "Je souhaite être tenu au courant de l’actualité Astrolabe"], { description: "" } ) }}
         </li>
-        {# <li hidden>
-          <label>Don’t fill this out if you're human: <input name="bot-field" /></label>
-        </li> #}
+        <!-- H o n e y p o t -->
+        <li aria-hidden="true">
+          <label class="ohnohoney" for="name"></label>
+          <input class="ohnohoney" autocomplete="off" type="text" id="name" name="name" placeholder="Your name here">
+        </li>
+        <li aria-hidden="true">
+          <label class="ohnohoney" for="email"></label>
+          <input class="ohnohoney" autocomplete="off" type="email" id="email" name="email" placeholder="Your e-mail here">
+        </li>
       </ol>
       {{ button("Envoyer") }}
     </form>
diff --git a/src/form/contact-form-handler.php b/src/form/contact-form-handler.php
index 18ec6af..4c1cb29 100644
--- a/src/form/contact-form-handler.php
+++ b/src/form/contact-form-handler.php
@@ -2,12 +2,16 @@
 	$errors = '';
 	$myEmail = 'contact-form@astrolabe.coop'; // email address to send form content
 
-	if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) {
+	if(empty($_POST['namezzz']) || empty($_POST['emailzzz']) || empty($_POST['message'])) {
 			$errors .= "\n Error: all fields are required";
 	}
 
-	$name = $_POST['name'];
-	$emailAddress = $_POST['email'];
+	if(!empty($_POST['name']) && !empty($_POST['email'])) {
+		$errors .= "\n Error: spam";
+}
+
+	$name = $_POST['namezzz'];
+	$emailAddress = $_POST['emailzzz'];
 	$select = $_POST['select'];
 	$message = $_POST['message'];
 	$subscribe = $_POST['subscribe'];
diff --git a/src/scss/components/_form.scss b/src/scss/components/_form.scss
index c2db8a8..496c62c 100644
--- a/src/scss/components/_form.scss
+++ b/src/scss/components/_form.scss
@@ -127,6 +127,16 @@ legend {
   }
 }
 
+.ohnohoney {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 0;
+  z-index: -1;
+}
+
 @media (max-width: 575.98px) {
   .form-container {
     svg {