FEAT: Added contact page

This commit is contained in:
Luke Else 2025-05-23 20:41:32 +01:00
parent fd3c620cb9
commit 206c5665a2
Signed by: luke-else
GPG Key ID: B44FAF5CD3964A56

View File

@ -1,14 +1,95 @@
<script lang="ts">
import { toasts } from 'svelte-toasts';
import Card from '$lib/components/Cards/Card.svelte';
import { page } from '$app/state';
const sent = page.url.searchParams.get('sent');
if (sent == 'true') {
toasts.add({
title: 'Message sent!',
description: 'Thank you for contacting me.',
type: 'success',
duration: 4000,
placement: 'bottom-center'
});
}
if (sent == 'false') {
toasts.add({
title: 'Message not sent!',
description: 'Please try again later.',
type: 'error',
duration: 4000,
placement: 'bottom-center'
});
}
</script>
<div style="display: none;">
{toasts.add({
title: 'Warning',
description: 'This page is under construction',
duration: 0,
type: 'warning',
placement: 'center-center',
showProgress: true
})}
</div>
<Card headerLeft="Contact Me">
<!-- Contact Form -->
<form class="w-full max-w-3xl mx-auto flex flex-col gap-4 text-lg" action="https://api.staticforms.xyz/submit" method="post">
<div class="hidden">
<input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
<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>
<div class="flex flex-col md:flex-row gap-3">
<div class="flex-1">
<label class="block text-xs font-medium mb-1" for="name">Name</label>
<input
id="name"
name="name"
type="text"
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
required
placeholder="Your name"
/>
</div>
<div class="flex-1">
<label class="block text-xs font-medium mb-1" for="email">Email</label>
<input
id="email"
name="email"
type="email"
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
required
placeholder="you@email.com"
/>
</div>
<div class="flex-1">
<label class="block text-xs font-medium mb-1" for="subject">Subject</label>
<input
id="subject"
name="subject"
type="text"
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
required
placeholder="Subject"
/>
</div>
</div>
<div>
<label class="block text-xs font-medium mb-1" for="message">Message</label>
<textarea
id="message"
name="message"
class="w-full rounded-lg border border-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-600 transition min-h-[80px] placeholder-gray-400"
required
placeholder="Your message"
></textarea>
</div>
<!-- reCAPTCHA integration -->
<div class="">
<div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</div>
<button
type="submit"
class="self-end bg-blue-600 hover:bg-blue-700 text-white font-semibold py-1.5 px-8 rounded-lg transition"
>
Send Message
</button>
</form>
</Card>