From 1e9d96ba4e4bc433a275f5af1a9e3ca0602cdc00 Mon Sep 17 00:00:00 2001
From: Erick Ruiz de Chavez <erick@erch.co>
Date: Fri, 8 Jan 2021 08:41:07 -0500
Subject: [PATCH] Replace honeypot input with recaptcha

---
 _content/contact.njk  | 14 ++++++++++----
 _includes/default.njk |  5 +++++
 2 files changed, 15 insertions(+), 4 deletions(-)
diff --git a/_content/contact.njk b/_content/contact.njk
index 0a77afc..0edd5b2 100644
--- a/_content/contact.njk
+++ b/_content/contact.njk
@@ -1,17 +1,23 @@
 ---
 title: Contact
+headscripts:
+  - https://www.google.com/recaptcha/api.js
 ---
 <h1>{{ title }}</h1>
 
-<form action="https://formspree.io/f/mzbkydal" method="POST" class="flex flex-col">
-  <input type="text" name="_gotcha" style="display:none" />
-  <input type="hidden" name="_subject" value="Contact Form" />
+<script>
+  function onSubmit(token) {
+    document.getElementById("contact-form").submit();
+  }
+</script>
 
+<form action="https://formspree.io/f/mzbkydal" method="POST" class="flex flex-col" id="contact-form">
+  <input type="hidden" name="_subject" value="Contact Form" />
   <label for="name" class="mt-4">Your name:</label>
   <input type="text" required="required" id="name" name="name" class="p-2 dark:bg-gray-700 dark:text-gray-200">
   <label for="_replyto" class="mt-4">Your email:</label>
   <input type="email" required="required" id="_replyto" name="_replyto" class="p-2 dark:bg-gray-700 dark:text-gray-200">
   <label for="message" class="mt-4">Your message:</label>
   <textarea id="message" required="required" name="message" class="h-48 p-2 dark:bg-gray-700 dark:text-gray-200"></textarea>
-  <button type="submit" class="mt-4 p-2 bg-gray-600 text-gray-200 dark:bg-gray-200 dark:text-gray-600 font-bold rounded-full">Send</button>
+  <button class="mt-4 p-2 bg-gray-600 text-gray-200 dark:bg-gray-200 dark:text-gray-600 font-bold rounded-full g-recaptcha" data-sitekey="6LfNwyUaAAAAAH18i_mA70aeQHdbMT4RLzMLaxuc" data-callback='onSubmit'>Submit</button>
 </form>
diff --git a/_includes/default.njk b/_includes/default.njk
index e6a91ad..b490c86 100644
--- a/_includes/default.njk
+++ b/_includes/default.njk
@@ -6,6 +6,11 @@
     <title>{{ title + " - " if title }}{{ site.name }}</title>
     <link rel="stylesheet" href="/styles.css" />
     <link rel="alternate" type="application/atom+xml" title="" href="/feed.xml" />
+    {%- if headscripts %}
+    {%- for script in headscripts %}
+    <script src="{{ script }}" async defer></script>
+    {%- endfor %}
+    {%- endif %}
   </head>
 
   <body class="bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
