From fc653073c154cdd9a359d8f985ccbe60b3ba4cbb Mon Sep 17 00:00:00 2001
From: Joshua Perry <45966243+jpez-development@users.noreply.github.com>
Date: Wed, 13 Apr 2022 12:35:39 +0100
Subject: [PATCH] added some styling and background to form

---
 contact/contact.css  | 28 +++++++++++++++++++++++-----
 contact/contact.html | 12 ++++++------
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/contact/contact.css b/contact/contact.css
index 777de6f..ce771d8 100644
--- a/contact/contact.css
+++ b/contact/contact.css
@@ -3,18 +3,29 @@ form {
     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[type="text"] {
-    border: none;
+input {
+    border-radius: 1em;
+    padding-left: 0.5em;
 }
 
-input[type="email"] {
+textarea {
+    border-radius: 1em;
     border: none;
+    max-width: 41em;
+    font-family: body;
 }
 
-input[type="tel"] {
+input {
     border: none;
+    font-family: body;
 }
 
 input[type="radio"] {
@@ -50,4 +61,11 @@ input[type="radio"] {
 input[type="submit"] {
     grid-row: 4;
     max-width: 10em;
-}
\ No newline at end of file
+}
+
+#reason_answer {
+    margin-left: 1em;
+    min-width: 40em;
+    padding-top: 0.5em;
+}
+
diff --git a/contact/contact.html b/contact/contact.html
index a3d6227..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">
@@ -33,17 +33,17 @@
         <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"/>
+                <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" name="contact_type" value="business" id="business_radio"/>
+                    <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"/>