From da5f47a841a8f8d96d444ac778c19c09eab03113 Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Sun, 27 Apr 2025 19:33:46 +0100
Subject: [PATCH] #26 Re-Made contact form. More work required.]

---
 src/lib/components/Cards/Card.svelte |   2 +-
 src/routes/contact/+page.svelte      | 167 +++++++++++++++++----------
 2 files changed, 108 insertions(+), 61 deletions(-)

diff --git a/src/lib/components/Cards/Card.svelte b/src/lib/components/Cards/Card.svelte
index 0d5de39..52633d0 100644
--- a/src/lib/components/Cards/Card.svelte
+++ b/src/lib/components/Cards/Card.svelte
@@ -39,7 +39,7 @@
     .card .card-content :global(div) {
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        justify-content: center;
         max-width: 100%;
     }
 
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 531c33c..671a67f 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -1,64 +1,103 @@
 <script lang="ts">
     import Card from '$lib/components/Cards/Card.svelte';
-    import { Toast, ToastType } from "$lib/toast";
-    import { addToast } from "$lib/stores";
+    import { Toast, ToastType } from '$lib/toast';
+    import { addToast } from '$lib/stores';
 
     import { page } from '$app/stores';
     const sent = $page.url.searchParams.get('sent');
 
-    if (sent == "true") {
-        addToast(new Toast("Thank you! Your E-Mail has been sent. I will reply as soon as possible!", ToastType.Success, true, 5000));
+    if (sent == 'true') {
+        addToast(
+            new Toast(
+                'Thank you! Your E-Mail has been sent. I will reply as soon as possible!',
+                ToastType.Success,
+                true,
+                5000
+            )
+        );
     }
     // Can't use else otherwise the warning will display on load
-    if (sent == "false") {
-        addToast(new Toast("Sorry, your E-Mail could not be sent... Please try again later!", ToastType.Error, true, 5000));
+    if (sent == 'false') {
+        addToast(
+    new Toast(
+        'Sorry, your E-Mail could not be sent... Please try again later!',
+        ToastType.Error,
+        true,
+        5000
+    )
+        );
     }
 </script>
 
 <style>
-    form {
+
+    /* Contact form styling */
+    .contact-form {
+        background: none;
+        padding: 1rem;
+        width: 80%;
         display: flex;
-        flex-wrap: wrap;
-        flex: 2 1;
-        align-items: center;
-        justify-content: center;
-        margin: 1em;
-        gap: 1em 3em;
-    }
-    
-    input, textarea {
-        padding: 1em 0em 1em 1em;
-        background-color: var(--input);
-        color: var(--fg);
-        border: 1px solid var(--fg); 
-        outline: 0;
-        border-radius: 8px;
-        resize: none;
-        min-width: 100%;
-        transition: all 0.15s;
-        font-size: .8em;
-    }
-
-    .button {
-        background-color: var(--fg);
-        color: var(--bg);
-        transition: all 0.2s ease-in-out;
-    }
-
-    .button:hover {
-        transform: scale(1.01);
-    }
-
-    textarea {
-        min-height: 12em;
-    }
-
-    .container {
-        display: flex;
-        flex: 2 1 5rem;
         flex-direction: column;
-        gap: 1em 1em;
+        gap: 1rem;
+        transition: all 0.3s ease;
+    }
+
+    /* Input groups */
+    .input-group {
+        display: flex;
+        flex-direction: row;
         width: 100%;
+        justify-content: center;
+        gap: 1rem;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    /* Input fields and textarea */
+    .contact-form input,
+    .contact-form textarea {
+        padding: 0.8rem 1rem;
+        border: 1px solid var(--fg);
+        border-radius: 0.5rem;
+        background: var(--input);
+        color: var(--fg);
+        font-size: 1rem;
+        transition: border-color 0.3s ease, background 0.3s ease;
+    }
+
+    .contact-form button {
+        border: 1px solid var(--fg);
+        width: 60%;
+    }
+
+    .contact-form textarea {
+        width: 100%;
+        min-width: none;
+        resize: vertical;
+        min-height: fit-content;
+    }
+
+    .contact-form input:focus,
+    .contact-form textarea:focus {
+        border-color: var(--glow);
+        outline: none;
+    }
+
+    /* Submit button */
+    .submit-button {
+        padding: 0.8rem 1rem;
+        background: var(--accent);
+        color: var(--fg);
+        border: none;
+        border-radius: 0.5rem;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: background 0.3s ease;
+    }
+
+    .submit-button:hover {
+        background: var(--link);
+        color: var(--input);
     }
 
     .g-recaptcha {
@@ -72,28 +111,36 @@
         <h2>Contact</h2>
     </div>
     <div slot="content">
-        <form action="https://api.staticforms.xyz/submit" method="post">
-            <div class="container">
-                <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
-                <input type="text" name="name" placeholder="Name" required>
-                <input type="text" name="email" placeholder="Email address" required>
-                <input type="hidden" name="replyTo" value="@">
+        <form action="https://api.staticforms.xyz/submit" method="post" class="contact-form">
+            <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
+            <div class="input-group">
+                <input type="text" id="name" name="name" required placeholder="Your Name" />
+                <input type="email" id="email" name="email" required placeholder="Your Email" />
+            </div>
+            <div class="input-group">
                 <input type="text" name="subject" placeholder="Subject" required>
-                <input type="text" name="honeypot" style="display: none;"> 
             </div>
-            <div class="container">
-                <textarea name="message" id="message" placeholder="Message" required></textarea>
+            <div class="input-group">
+                <textarea id="message" name="message" rows="4" required placeholder="Your Message" />
             </div>
-            <input class="button" type="submit" value="Send" />
+            
+            <input type="hidden" name="replyTo" value="@">
+            <input type="text" name="honeypot" style="display: none;">
             <input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
+            
+            <div class="input-group">
+                <!-- reCAPTCHA integration -->
+                <div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
+                <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+            </div>
 
-            <!-- reCAPTCHA integration -->
-            <div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
-            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+            <div class="input-group">
+                <button type="submit" class="submit-button">Send Message</button>
+            </div>
         </form>
     </div>
     <div slot="footer">
         <a href="/Luke Else - CV.pdf" target="_blank" rel="noopener noreferrer">Curriculum Vitae</a>
         <a href="mailto:contact@luke-else.co.uk">E-Mail</a>
     </div>
-</Card>
\ No newline at end of file
+</Card>