From 6452204beb18fc7844e2a719146abf54128fa1e0 Mon Sep 17 00:00:00 2001
From: Guuq <50501321+Guuq@users.noreply.github.com>
Date: Sat, 30 Nov 2019 18:05:37 +0100
Subject: [PATCH] Greatly improved contact page

---
 contact/css.css    | 34 ++++++++++++++++++++++++++++++++--
 contact/index.html | 10 ++++++++--
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/contact/css.css b/contact/css.css
index 8eaa63a..7c85706 100644
--- a/contact/css.css
+++ b/contact/css.css
@@ -10,8 +10,35 @@
   margin-top: 5%;
 }
 .form {
-  margin: auto;
-  width: auto;
+  margin: 3rem auto;
+  width: 50%;
+  position: relative;
+  border-radius: 7px;
+  box-shadow: 0px 0px 15px -3px rgba(0,0,0,1);
+  padding: 1rem;
+}
+.form h3 {
+  display: block;
+  width: 90%;
+  margin: 0 auto;
+  margin-bottom: 1rem;
+}
+.submit {
+  position: absolute;
+  width: 6rem;
+  height: 40px;
+  right: 2rem;
+  bottom: 1rem;
+}
+.dataInput {
+  width: 90%;
+  display: block;
+  background-color: #2d2d33;
+  margin: 0 auto;
+  margin-bottom: 2rem;
+}
+.dataInput:focus {
+  outline: 0;
 }
 .info {
   background-color: #18181b;
@@ -40,4 +67,7 @@
     font-size: 4rem!important;
     margin-top: 15%!important;
   }
+  .form {
+    width: 90%!important;
+  }
 }
diff --git a/contact/index.html b/contact/index.html
index f776be2..4805d98 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -18,8 +18,14 @@
     <div class="main">
         <h1>Contact opnemen?</h1>
         <div class="form">
-            <form action="">
-              <input type="text">
+            <form action="/thank-you" method="post">
+              <h3>*Naam en Achternaam</h3>
+              <input type="text" class="dataInput input" required name="name" autofocus spellcheck="false">
+              <h3>*E-mailadres</h3>
+              <input type="text" class="dataInput input" required name="email" spellcheck="false">
+              <h3>*Bericht</h3>
+              <input type="text" class="dataInput input" required name="message" spellcheck="false"><br>
+              <input type="submit" class="submit button">
             </form>
         </div>
     </div>