From 770beea25864f5a7d7d76c8430fe3110809aab38 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Wed, 8 Nov 2023 18:10:39 +0100
Subject: [PATCH] Contact form script wip

---
 assets/css/partials/contact-form.css |  4 ++++
 assets/js/partials/contact-form.js   |  4 ++++
 layouts/partials/contact-form.html   | 21 ++++++++++++++++-----
 3 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 assets/js/partials/contact-form.js

diff --git a/assets/css/partials/contact-form.css b/assets/css/partials/contact-form.css
index 817dde3..6634447 100644
--- a/assets/css/partials/contact-form.css
+++ b/assets/css/partials/contact-form.css
@@ -41,3 +41,7 @@ form input,
 form textarea {
   width: 100%;
 }
+
+form button {
+  cursor: pointer;
+}
diff --git a/assets/js/partials/contact-form.js b/assets/js/partials/contact-form.js
new file mode 100644
index 0000000..11b87f8
--- /dev/null
+++ b/assets/js/partials/contact-form.js
@@ -0,0 +1,4 @@
+document.querySelector('form').addEventListener('submit', (event) => {
+  event.preventDefault();
+  console.log(new FormData(event.target));
+});
diff --git a/layouts/partials/contact-form.html b/layouts/partials/contact-form.html
index c964f86..657bfc5 100644
--- a/layouts/partials/contact-form.html
+++ b/layouts/partials/contact-form.html
@@ -1,10 +1,21 @@
 {{ $styles := resources.Get "css/partials/contact-form.css" | toCSS | minify }}
+{{ $scripts := resources.Get "js/partials/contact-form.js" | js.Build | minify }}
 
-<link rel="stylesheet" href="{{ $styles.Permalink }}">
+<link rel="stylesheet" href="{{ $styles.Permalink }}" />
+<script defer src="{{ $scripts.Permalink }}"></script>
 
-<form action="{{ .Site.Params.formSpreeURL }}" method="post">
-  <input name="name" placeholder="Your name" type="text" />
-  <input name="email" placeholder="Your email" type="email" />
-  <textarea cols="30" name="message" placeholder="Enter your message here" rows="10"></textarea>
+<form
+  action="{{ .Site.Params.formSpreeURL }}"
+  method="POST"
+>
+  <input name="name" placeholder="Your name" required type="text" />
+  <input name="email" placeholder="Your email" required type="email" />
+  <textarea
+    cols="30"
+    name="message"
+    placeholder="Your message"
+    required
+    rows="10"
+  ></textarea>
   <button type="submit">Submit</button>
 </form>