96 lines
3.8 KiB
Svelte
96 lines
3.8 KiB
Svelte
<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>
|
|
|
|
<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>
|