From 30fbce6389ba8f1baec226cc252919577c23e660 Mon Sep 17 00:00:00 2001
From: Benjamin Affolter <5555767+bliemli@users.noreply.github.com>
Date: Tue, 26 Nov 2024 22:26:45 +0100
Subject: [PATCH] Optimize contact form

---
 content/de/contact.md         | 46 ++++++++++++++---------------------
 content/en/contact.md         | 46 ++++++++++++++---------------------
 layouts/_default/single.html  | 15 ++++++++++++
 layouts/partials/contact.html | 29 ++++++++++++++++++++++
 static/css/hoppy.css          | 24 ++++++++++++++++++
 5 files changed, 104 insertions(+), 56 deletions(-)
 create mode 100644 layouts/_default/single.html
 create mode 100644 layouts/partials/contact.html

diff --git a/content/de/contact.md b/content/de/contact.md
index 282f4b7..d0a8ff1 100644
--- a/content/de/contact.md
+++ b/content/de/contact.md
@@ -1,31 +1,21 @@
 ---
 title: Kontakt
-type: page
----
-<form method="post" action="https://forms.un-static.com/forms/edabbc7e6afca6f165ce36fc7b6fa6997859c092">
-  <div>
-    <span data-feather='user'></span> Name:
-    <div class="col-8">
-        <input id="name" name="name" type="text" required="required">
-    </div>
-  </div>
-  <div>
-    <span data-feather='mail'></span> E-Mail Adresse:
-    <div>
-      <input id="email" name="email" type="text" required="required">
-    </div>
-  </div>
-  <div>
-    <span data-feather='message-square'></span> Nachricht:
-    <div>
-      <textarea id="message" name="message" cols="40" rows="10" required="required"></textarea>
-    </div>
-  </div>
-  <div class="form-group row">
-    <button name="submit" type="submit"><span data-feather='send'></span> Abschicken</button>
-  </div>
-</form>
+type: contact
 
-<div>
-  <p><small>(Powered by <a rel="nofollow" href="Un-static Forms">Un-static Forms</a>)</small></p>
-</div>
+form:
+  action: https://forms.un-static.com/forms/edabbc7e6afca6f165ce36fc7b6fa6997859c092
+  input:
+    - label: Name
+      id: name
+      icon: user
+      type: text
+      required: true
+    - label: Email Adresse
+      id: email
+      icon: mail
+      type: email
+      required: true
+  message: Nachricht
+  method: post
+  submit: Abschicken
+---
diff --git a/content/en/contact.md b/content/en/contact.md
index 077a1d7..91566e0 100644
--- a/content/en/contact.md
+++ b/content/en/contact.md
@@ -1,31 +1,21 @@
 ---
 title: Contact
-type: page
----
-<form method="post" action="https://forms.un-static.com/forms/edabbc7e6afca6f165ce36fc7b6fa6997859c092">
-  <div>
-    <span data-feather='user'></span> Name:
-    <div class="col-8">
-        <input id="name" name="name" type="text" required="required">
-    </div>
-  </div>
-  <div>
-    <span data-feather='mail'></span> Email address:
-    <div>
-      <input id="email" name="email" type="text" required="required">
-    </div>
-  </div>
-  <div>
-    <span data-feather='message-square'></span> Message:
-    <div>
-      <textarea id="message" name="message" cols="40" rows="10" required="required"></textarea>
-    </div>
-  </div>
-  <div class="form-group row">
-    <button name="submit" type="submit"><span data-feather='send'></span> Send</button>
-  </div>
-</form>
+type: contact
 
-<div>
-  <p><small>(Powered by <a rel="nofollow" href="Un-static Forms">Un-static Forms</a>)</small></p>
-</div>
+form:
+  action: https://forms.un-static.com/forms/edabbc7e6afca6f165ce36fc7b6fa6997859c092
+  input:
+    - label: Name
+      id: name
+      icon: user
+      type: text
+      required: true
+    - label: Email address
+      id: email
+      icon: mail
+      type: email
+      required: true
+  message: Message
+  method: post
+  submit: Send
+---
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
new file mode 100644
index 0000000..b1179de
--- /dev/null
+++ b/layouts/_default/single.html
@@ -0,0 +1,15 @@
+{{ define "main" }}
+    {{ if eq .Type "post" }}
+        {{- partial "post.html" . -}}
+        {{- partial "toc.html" . -}}
+    {{ end }}
+
+    {{ if eq .Type "page" }}
+        {{- partial "page.html" . -}}
+        {{- partial "toc.html" . -}}
+    {{ end }}
+
+    {{ if eq .Type "contact" }}
+        {{- partial "contact.html" . -}}
+    {{ end }}
+{{ end }}
diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html
new file mode 100644
index 0000000..b61994c
--- /dev/null
+++ b/layouts/partials/contact.html
@@ -0,0 +1,29 @@
+<div class="post container">
+    <div class="post-header-section">
+        <h1>{{ .Title | markdownify }}</h1>
+    </div>
+
+    {{ $action := .Params.form.action }}
+    {{ $formInput := .Params.form.input }}
+    {{ $message := .Params.form.message }}
+    {{ $method := .Params.form.method }}
+    {{ $submit := .Params.form.submit }}
+
+    <div class="contact-form">
+    <form method="{{ $method }}" action="{{ $action }}">
+      {{ range $input := $formInput }}
+      <label for="{{ .id }}"><span data-feather='{{ .icon }}'></span> {{ .label }}:</label><br />
+      <input type="{{ .type }}" id="{{ .id }}" name="{{ .id }}" {{ if .required }}required{{ end }}><br />
+      {{ end }}
+
+      <label for="message"><span data-feather='message-square'></span> {{ $message }}:</label><br />
+      <textarea id="message" name="message" cols="40" rows="10" required></textarea><br />
+
+      <button name="submit" type="submit"><span data-feather='send'></span> {{ $submit }}</button>
+    </form>
+
+    <div>
+      <p><small>(Powered by <a rel="nofollow" href="Un-static Forms">Un-static Forms</a>)</small></p>
+    </div>
+    </div>
+</div>
diff --git a/static/css/hoppy.css b/static/css/hoppy.css
index 7c24c31..32a5582 100644
--- a/static/css/hoppy.css
+++ b/static/css/hoppy.css
@@ -1,3 +1,27 @@
+.contact-form form button {
+  margin: 5px auto -3px;
+  padding: 3px 5px;
+}
+
+.contact-form form button svg {
+  margin: 2px 1px -6px;
+}
+
+.contact-form form input {
+  margin: 5px auto 12px;
+  width: 50%;
+}
+
+.contact-form form svg {
+  margin: 2px auto -3px;
+  stroke-width: 2;
+}
+
+.contact-form form textarea {
+  margin: 5px auto 12px;
+  width: 50%;
+}
+
 figure figcaption {
   font-size: 12px;
   text-align: center;