diff --git a/contact/contact.css b/contact/contact.css
index e69de29..ce771d8 100644
--- a/contact/contact.css
+++ b/contact/contact.css
@@ -0,0 +1,71 @@
+form {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-template-rows: 30% 30% 30% 10%;
+    gap: 1em;
+    margin-left: 38em;
+    background-color: rgba(0, 0, 0, 90%);
+    border-radius: 1em;
+    min-width: 42em;
+    padding-left: 0.5em;
+    padding-bottom: 0.5em;
+}
+
+input {
+    border-radius: 1em;
+    padding-left: 0.5em;
+}
+
+textarea {
+    border-radius: 1em;
+    border: none;
+    max-width: 41em;
+    font-family: body;
+}
+
+input {
+    border: none;
+    font-family: body;
+}
+
+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;
+}
+
+#reason_answer {
+    margin-left: 1em;
+    min-width: 40em;
+    padding-top: 0.5em;
+}
+
diff --git a/contact/contact.html b/contact/contact.html
index 09473cf..aae7dd5 100644
--- a/contact/contact.html
+++ b/contact/contact.html
@@ -10,7 +10,7 @@
 
     <base href="../">
 
-    <title>J-Pez Development</title>
+    <title>Contact: J-Pez Development</title>
     <link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
 
     <link rel="stylesheet" href="style/main.css" media = "screen">
@@ -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="First name"/>
+                <input type="text" name="last_name" placeholder="Last name"/>
+                <input type="email" name="email_address" placeholder="Email address (e.g. someone@domain.com)"/>
+                <input type="tel" name="phone_number" placeholder="Phone Number (e.g. +44 1632 960501)"/>
+            </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" checked="checked" 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>
diff --git a/style/main.css b/style/main.css
index ddbd998..8b99b62 100644
--- a/style/main.css
+++ b/style/main.css
@@ -83,7 +83,6 @@ nav > .link:hover {
 #blog {
     grid-area: blog;
 }
-
 #contact {
     grid-area: contact;
     border-top-right-radius: 10em;