FAQ

src/style/_form.scss

@@ -5,6 +5,12 @@
     max-width: 600px;
     flex-wrap: wrap;
     flex-direction: row;
+    padding: 5px;
+
+    &.success {
+        background-color: #DAFFDA;
+        border-radius: 10px;
+    }
 
     label {
         display: block;

src/style/combined.scss

@@ -70,12 +70,17 @@ body {
 
 h1,h2,h3,h4,h5,h6 {
   font-family: "SFMoviePoster", system-ui, sans-serif;
+  line-height: normal;
 }
 
 h1 {
   font-size: 4rem;
 }
 
+h2 {
+  font-size: 3rem;
+}
+
 h2,h3 {
   margin-top: 20px;
 }
@@ -155,6 +160,13 @@ input.btn, a.btn {
       color: #333 !important;
     }
   }
+
+  &:disabled, &:disabled:hover {
+    color: #CCC !important;
+    background-color: unset;
+    border-color: #ccc;
+    cursor: default;
+  }
 }
 
 body.hero {

src/typescript/script.ts

@@ -60,7 +60,13 @@ window.onload = function() {
         
             // Cleanup
             e.target.reset();
-            alert("Anmeldung abgeschickt");
+            e.target.classList.add("success");
+            const submitButton = e.target.querySelectorAll("input, select, textarea");
+            for (let i = 0; i < submitButton.length; i++) {
+                submitButton[i].setAttribute("disabled", "disabled");
+            }
+
+            alert("Erfolgreich abgeschickt!");
             e.preventDefault();
           });
     }