feat(contact): fixed form so that it now works again

src/lib/style/globals.css

@@ -0,0 +1,24 @@
+:root {
+	--underlineTitle: 4px solid purple;
+	--underlineTitleBorderRadius: 4px;
+	--img-width: 32px;
+	--img-height: 32px;
+	--card-background-color: rgba(38, 38, 38, 0.5);
+	--card-border-radius: 0.5rem;
+}
+
+body {
+	background-color: #0f1116;
+	color: #ffffff;
+	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+	margin: 20px;
+}
+
+h2 {
+	border-bottom: var(--underlineTitle);
+	border-radius: var(--underlineTitleBorderRadius);
+	display: flex;
+	margin: 2svh 2svw;
+	padding: 0svh 2svw;
+	padding-bottom: 1svh;
+}

src/routes/+layout.svelte

@@ -2,35 +2,10 @@
 	let { children } = $props();
 	import Top from '$lib/components/layout/Top.svelte';
 	import Bottom from '$lib/components/layout/Bottom.svelte';
+
+	import '$lib/style/globals.css';
 </script>
 
 <Top />
 {@render children()}
 <Bottom />
-
-<style>
-	:global(:root) {
-		--underlineTitle: 4px solid purple;
-		--underlineTitleBorderRadius: 4px;
-		--img-width: 32px;
-		--img-height: 32px;
-		--card-background-color: rgba(38, 38, 38, 0.5);
-		--card-border-radius: 0.5rem;
-	}
-
-	:global(body) {
-		background-color: #0f1116;
-		color: #ffffff;
-		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-		margin: 20px;
-	}
-
-	:global(h2) {
-		border-bottom: var(--underlineTitle);
-		border-radius: var(--underlineTitleBorderRadius);
-		display: flex;
-		margin: 2svh 2svw;
-		padding: 0svh 2svw;
-		padding-bottom: 1svh;
-	}
-</style>

src/routes/contact/+page.svelte

@@ -1,11 +1,41 @@
 <script>
 	import Contact from '$lib/components/contact.svelte';
 
-	let contactName = $state('');
-	let contactEmail = $state('');
-	let contactMessage = $state('');
-
 	let error_box_message = $state('');
+	let submitButtonEnable = $state(true);
+	let submitButtonText = $derived(submitButtonEnable ? 'Submit' : 'Submitting');
+
+	const formSubmit = async (event) => {
+		event.preventDefault();
+		submitButtonEnable = false;
+
+		const formData = new FormData(event.target);
+		const formObject = Object.fromEntries(formData.entries());
+
+		try {
+			let json_to_send = {
+				content: `***New Message***\n*Name*: ${formObject.name}\n*Email*: [${formObject.email}](mailto:${formObject.email})\n*Message*: ${formObject.message}`
+			};
+			const res = await fetch(
+				'https://discord.com/api/webhooks/1374798951475187732/zOL9aD1wWn9rCywjqVAy3oUMnzPu25SVIMCDaLD4N8C_V9OqPK8Hj2Wmm-7Ts5QHTbzN',
+				{
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify(json_to_send)
+				}
+			);
+
+			if (!res.ok) {
+				throw new Error(`Discord webhook error: ${res.status} ${res.statusText}`);
+			}
+		} catch (err) {
+			error_box_message = 'An error has occurred';
+			console.error(err);
+		}
+		submitButtonEnable = true;
+	};
 </script>
 
 <title>Brock Tomlinson - Contact</title>
@@ -18,22 +48,23 @@
 			to either fill out this form or contact me through one of the many of the platforms below
 		</p>
 	</div>
-	<form
-		onsubmit={(e) => {
-			e.preventDefault();
-		}}
-	>
+	<form onsubmit={formSubmit}>
 		<label for="name">Name</label>
-		<input type="text" id="name" bind:value={contactName} />
+		<input type="text" id="name" name="name" />
 
 		<label for="email">Email</label>
-		<input type="email" id="email" bind:value={contactEmail} />
+		<input type="email" id="email" name="email" />
 
 		<label for="message">Message</label>
-		<textarea id="message" bind:value={contactMessage}></textarea>
+		<textarea id="message" name="message"></textarea>
 
 		<p>{error_box_message}</p>
-		<button onclick={() => console.log('Clicked')}> Submit </button>
+		<input
+			type="submit"
+			disabled={!submitButtonEnable}
+			class="submitButton"
+			id={submitButtonEnable ? '' : 'disabledSubmitButton'}
+		/>
 	</form>
 </div>
 <Contact />
@@ -90,7 +121,7 @@
 		min-height: 25svh;
 	}
 
-	button {
+	.submitButton {
 		border-radius: var(--card-border-radius);
 		border-color: rgba(245, 245, 245, 0.5);
 		padding: 1svh 0svw;
@@ -101,9 +132,17 @@
 		border-color: transparent;
 	}
 
-	button:hover {
+	.submitButton:hover {
 		cursor: pointer;
 		color: #91a4d2;
 		background-color: rgba(0, 150, 0, 0.6);
 	}
+
+	#disabledSubmitButton {
+		background-color: rgba(211, 211, 211, 0.6);
+	}
+
+	#disabledSubmitButton:hover {
+		background-color: rgba(180, 180, 180, 0.6);
+	}
 </style>