luke-else.co.uk/src/routes/contact/+page.svelte

<script lang="ts">
    import Card from '$lib/components/Cards/Card.svelte';
    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
            )
        );
    }
    // 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
    )
        );
    }
</script>

<Card>
    <div slot="header">
        <h2>Contact</h2>
    </div>
    <div slot="content">
        <form action="https://api.staticforms.xyz/submit" method="post" class="contact-form">
            <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">

            <!-- Form Items-->
            <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>
            </div>
            <div class="input-group">
                <textarea id="message" name="message" rows="4" required placeholder="Your Message" />
            </div>
            
            <!-- Hidden Attributes-->
            <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">
            
            <!-- reCAPTCHA integration -->
            <div class="input-group">
                <div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
                <script src="https://www.google.com/recaptcha/api.js" async defer></script>
            </div>

            <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>

<style>

    /* Contact form styling */
    .contact-form {
        background: none;
        padding: 1rem;
        width: 80%;
        display: flex;
        flex-direction: column;
        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 {
        width: fit-content;
        overflow: hidden;
    }
</style>