kontaktformular

assets/icons/mail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>

content/kontakt/_index.md

@@ -0,0 +1,10 @@
+---
+title: Kontakt
+menu:
+  main:
+    weight: 5
+    params:
+      icon: mail
+---
+
+Du willst uns eine Frage stellen, ein Thema vorschlagen oder einen Artikel einreichen? Schreib uns eine Nachricht über das Formular!

content/page/about.md

@@ -8,7 +8,7 @@ tags:
 show-in-menu: true
 menu:
   main:
-    weight: 3
+    weight: 4
     params:
       icon: users-group
 ---

layouts/kontakt/list.html

@@ -0,0 +1,78 @@
+{{ define "main" }}
+<div class="article-list">
+  <article>
+    <style>
+      .article-details {
+        padding-bottom: 0;
+      }
+    </style>
+    {{ partial "article/components/header" . }}
+    <section class="article-content">{{ .Content | safeHTML }}</section>
+  </article>
+</div>
+
+<style>
+  input,
+  textarea {
+    margin-bottom: 1rem;
+  }
+  textarea {
+    padding: 40px 20px 20px;
+    border-radius: var(--card-border-radius);
+    background-color: var(--card-background);
+    box-shadow: var(--shadow-l1);
+    color: var(--card-text-color-main);
+    width: 100%;
+    border: 0;
+    -webkit-appearance: none;
+    transition: box-shadow 0.3s ease;
+    font-size: 1.5rem;
+    padding: 30px 20px 15px;
+    height: 300px;
+  }
+  p {
+    color: var(--card-text-color-main);
+  }
+  #submit-button {
+    position: relative;
+    background-color: var(--card-background);
+    width: min-content;
+    box-shadow: var(--shadow-l1);
+    border-radius: var(--card-border-radius);
+    color: var(--card-text-color-main);
+    height: 4rem;
+    width: 8rem;
+  }
+  #submit-button:hover {
+    background-color: var(--card-background-selected);
+  }
+</style>
+<form
+  class="search-form widget"
+  action="https://forms.cantorgymnasium.de/form/schuelerzeitung-kontakt"
+  method="post"
+>
+  <p>
+    <label>Name</label>
+    <input id="name" type="text" name="name" required />
+  </p>
+  <p>
+    <label>Klasse</label>
+    <input id="class" type="text" name="class" required />
+  </p>
+  <p>
+    <label>E-Mail-Adresse</label>
+    <input id="email" type="text" name="email" required />
+  </p>
+  <p>
+    <label>Nachricht</label>
+    <textarea id="message" name="message" required></textarea>
+  </p>
+  <p>
+    <button id="submit-button" type="submit" value="send">Senden</button>
+  </p>
+</form>
+
+{{ partial "article/components/footer" . }}
+  {{ partialCached "footer/footer" . }}
+{{ end }}