From 21c92ebcfe8292705bff990ad6caf26a805fd17c Mon Sep 17 00:00:00 2001
From: Joshua Perry <45966243+jpez-development@users.noreply.github.com>
Date: Wed, 13 Apr 2022 11:57:34 +0100
Subject: [PATCH] defined form in html. added minor formatting

---
 contact/contact.css  | 53 ++++++++++++++++++++++++++++++++++++++++++++
 contact/contact.html | 28 +++++++++++++++++++++++
 style/main.css       |  1 -
 3 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/contact/contact.css b/contact/contact.css
index e69de29..777de6f 100644
--- a/contact/contact.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/contact/contact.html b/contact/contact.html
index 09473cf..a3d6227 100644
--- a/contact/contact.html
+++ b/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>
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;