defined form in html. added minor formatting

contact/contact.css

@@ -0,0 +1,53 @@
+form {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-template-rows: 30% 30% 30% 10%;
+    gap: 1em;
+}
+
+input[type="text"] {
+    border: none;
+}
+
+input[type="email"] {
+    border: none;
+}
+
+input[type="tel"] {
+    border: none;
+}
+
+input[type="radio"] {
+    accent-color: #f29602;
+}
+
+#contact_details {
+    grid-row: 1;
+    display: grid;
+    grid-template-rows: 20% 20% 20% 20% 20%;
+    gap: 0.2em;
+}
+
+#contact_details > input {
+    min-width: 40em;
+}
+
+#contact_reason {
+    grid-row: 2;
+    display: grid;
+    grid-template-columns: 40% 60%;
+    gap: 0.2em;
+}
+
+#contact_body {
+    grid-row: 3;
+}
+
+#contact_body > textarea {
+    min-width: 40em;
+}
+
+input[type="submit"] {
+    grid-row: 4;
+    max-width: 10em;
+}

contact/contact.html

@@ -30,6 +30,34 @@
 
     <main>
         <a class="shownav" href="contact/contact.html#clicked"></a>
+        <form action="mailto:joshua.perry21@my.northampton.ac.uk?subject=Inquiry from website" method="POST">
+            <section id="contact_details">
+                <label for="contact_details">Contact Details</label>
+                <input type="text" name="first_name" placeholder="Enter your First name"/>
+                <input type="text" name="last_name" placeholder="Enter your Last name"/>
+                <input type="email" name="email_address" placeholder="Enter your Email address"/>
+                <input type="tel" name="phone_number" placeholder="Enter your Phone Number"/>
+            </section>
+
+            <section id="contact_reason">
+                <label for="contact_reason" class="header">Reason for contacting:</label>
+                <section id="reason_answer">
+                    <label for="business_radio" class="label">Business</label>
+                    <input type="radio" name="contact_type" value="business" id="business_radio"/>
+                    
+                    <label for="academic_radio" class="label">Academic</label>
+                    <input type="radio" name="contact_type" value="academic" id="academic_radio"/>
+                    
+                    <label for="personal_radio" class="label">Personal</label>
+                    <input type="radio" name="contact_type" value="personal" id="personal_radio"/>
+                </section>
+            </section>
+
+            <section id="contact_body">
+                <textarea placeholder="Enter your message or query here..."></textarea>
+            </section>
+            <input type="submit" name="submit" value="submit"/>
+        </form>
     </main>
 
     <footer>

style/main.css

@@ -83,7 +83,6 @@ nav > .link:hover {
 #blog {
     grid-area: blog;
 }
-
 #contact {
     grid-area: contact;
     border-top-right-radius: 10em;