Kontaktformular

content/kontakt.md

@@ -4,4 +4,24 @@ showDate: false
 showPagination: false
 ---
 
-Bei jeglichen Fragen oder Anregungen, schreib uns gerne eine Mail an [info@mv-molbergen.de](mailto:info@mv-molbergen.de)
+<link rel="stylesheet" href="/css/custom.css">
+
+<div class="contact-form-container">
+  <form class="contact-form" target="_blank" action="https://formsubmit.co/4262db68001290e74415018e5132685b" method="POST">
+    <div class="form-row-two-col">
+      <div class="form-group">
+        <input type="text" name="name" class="form-input" placeholder="Name" required>
+      </div>
+      <div class="form-group">
+        <input type="email" name="email" class="form-input" placeholder="E-Mail Addresse" required>
+      </div>
+    </div>
+    <div class="form-group">
+      <textarea placeholder="Nachricht" class="form-textarea" name="message" required></textarea>
+      <input type="hidden" name="_subject" value="Neuer Eintrag MVM Kontaktformular">
+      <input type="text" name="_honey" style="display:none">
+      <input type="hidden" name="_autoresponse" value="Ihre Nachricht wurde erfolgreich verschickt.">
+    </div>
+    <button type="submit" class="submit-button">Absenden</button>
+  </form>
+</div>

static/css/custom.css

@@ -0,0 +1,98 @@
+/* Contact Form Styles - Using Blowfish GitHub Color Scheme */
+.contact-form-container {
+  width: 60vw;
+  box-sizing: border-box;
+}
+
+.contact-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.form-row-two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-input,
+.form-textarea {
+  padding: 0.625rem 0.875rem;
+  font-size: 0.9375rem;
+  border: 1px solid rgb(var(--color-neutral-300));
+  border-radius: 0.375rem;
+  background-color: rgb(var(--color-neutral));
+  color: rgb(var(--color-neutral-800));
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.form-input:focus,
+.form-textarea:focus {
+  outline: none;
+  border-color: rgb(var(--color-primary-500));
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.1);
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: rgb(var(--color-neutral-400));
+}
+
+.form-textarea {
+  min-height: 180px;
+  resize: vertical;
+}
+
+.submit-button {
+  padding: 0.625rem 1.25rem;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: rgb(var(--color-neutral));
+  background-color: rgb(var(--color-neutral-800));
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  width: 100%;
+  margin-top: 0.25rem;
+}
+
+.submit-button:hover {
+  background-color: rgb(var(--color-neutral-700));
+}
+
+/* Dark mode support */
+.dark .form-input,
+.dark .form-textarea {
+  background-color: rgb(var(--color-neutral-800));
+  color: rgb(var(--color-neutral-100));
+  border-color: rgb(var(--color-neutral-600));
+}
+
+.dark .form-input:focus,
+.dark .form-textarea:focus {
+  border-color: rgb(var(--color-primary-400));
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-400), 0.1);
+}
+
+.dark .submit-button {
+  background-color: rgb(var(--color-primary-600));
+}
+
+.dark .submit-button:hover {
+  background-color: rgb(var(--color-primary-700));
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .form-row-two-col {
+    grid-template-columns: 1fr;
+  }
+}