Optimize contact form

hoppydicetactics · Nov 26, 2024 · 30fbce6 · 30fbce6
1 parent 6532c2d
commit 30fbce6
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 56 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;