Greatly improved contact page

contact/css.css

@@ -10,8 +10,35 @@
   margin-top: 5%;
 }
 .form {
-  margin: auto;
+  margin: 3rem auto;
-  width: 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;
+  }
 }

contact/index.html

@@ -18,8 +18,14 @@
     <div class="main">
         <h1>Contact opnemen?</h1>
         <div class="form">
-            <form action="">
+            <form action="/thank-you" method="post">
-              <input type="text">
+              <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>