luke-else/luke-else.co.uk
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

#26 Re-Made contact form. More work required.]
All checks were successful
Build and Push Development Docker Image / build-and-push (push) Successful in 1m24s
Details

Browse Source
This commit is contained in:
Luke Else 2025-04-27 19:33:46 +01:00
parent 5fe7b83c47
commit da5f47a841
Signed by: luke-else
GPG Key ID: B44FAF5CD3964A56
2 changed files with 108 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/Cards/Card.svelte
View File

@ -39,7 +39,7 @@
.card .card-content :global(div) {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: center;
max-width: 100%;
}

165
src/routes/contact/+page.svelte
View File

@ -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,24 +111,32 @@
<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">
<!-- 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">
<!-- reCAPTCHA integration -->
<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">