79 lines
2.5 KiB
Svelte
79 lines
2.5 KiB
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>
|
|
|
|
<style>
|
|
form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex: 2 1;
|
|
align-items: 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;
|
|
}
|
|
|
|
textarea {
|
|
min-height: 12em;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex: 2 1 5rem;
|
|
flex-direction: column;
|
|
gap: 1em 1em;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<Card>
|
|
<div slot="header">
|
|
<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="@">
|
|
<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>
|
|
<input class="button" type="submit" value="Send" />
|
|
<input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
|
|
</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> |