more or less finished decorating form

2 files changed, 40 insertions, 10 deletions

diff --git a/index.php b/index.php
index 61165fa..02d5fde 100644
--- a/index.php
+++ b/index.php
@@ -224,7 +224,7 @@
 		</section>
 
 		<!-- contact box -->
-		<section id="contact" class="quiet">
+		<section id="contact">
 			<?php
 			// handle form submission
 			if (isset($_POST['name'], $_POST['email'], $_POST['body'])) {
@@ -237,28 +237,27 @@
 				mail('atc@53hor.net', 'test', 'test');
 				echo $email;
 				echo 'Thank you for your email!';
-			} else {
-				echo 'Please fill out the required fields.';
 			}
 			?>
 
 			<form action="/#contact" method="post">
 				<label for="name">Name</label>
-				<input name="name" type="text" id="name" required />
+				<input name="name" type="text" id="name" placeholder="Jane Doe" required />
 
 				<label for="email">Email Address</label>
-				<input name="email" type="email" id="email" required />
+				<input name="email" type="email" id="email" placeholder="jdoe85@aol.com" required />
 
 				<label for="body">Question/Comment</label>
-				<textarea name="body" id="body" required></textarea>
+				<textarea name="body" id="body" placeholder="Briefly describe your inquiry, including any services or areas of study you're interested in." required></textarea>
 
-				<input type="submit" value="Send" />
+				<!--<input type="submit" value="Send" />-->
+				<button type="submit" class="button">Send</button>
 			</form>
 		</section>
 	</main>
 
 	<footer>
-		<p>&copy; 2021 Carpenter Tutoring, LLC. All rights reserved.</p>
+		<p>&copy; <?php echo date('Y'); ?> Carpenter Tutoring, LLC. All rights reserved.</p>
 		<p>
 			<a href="mailto:webmaster@carpentertutoring.com">
 				Having trouble with our site?
diff --git a/stylesheet.css b/stylesheet.css
index fd034c1..776f738 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -82,17 +82,23 @@ section.quiet {
   background-color: white;
 }
 
+button.button,
 a.button {
   background-color: var(--teal);
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
-  margin: 0.5em;
+  margin-right: 0.5em;
   text-decoration: none;
   color: white;
   border-radius: 3em;
-  font-size: 1.25em;
+}
+
+button {
+  font-family: "PT Sans", sans-serif;
+  border: none;
+  font-size: 0.75em;
 }
 
 a.primary {
@@ -110,3 +116,28 @@ footer a {
   color: var(--darkteal);
   text-decoration: underline;
 }
+
+form {
+  background-color: white;
+  padding: 2em;
+  border-radius: 1em;
+}
+
+input,
+textarea {
+  font-family: "PT Sans", sans-serif;
+  margin-bottom: 1.5em;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid lightgray;
+  padding: 1em;
+}
+
+input {
+  border-radius: 3em;
+}
+
+textarea {
+  border-radius: 1em;
+  resize: none;
+}