Michael Rausch
121 lines
4.6 KiB
Plaintext
121 lines
4.6 KiB
Plaintext
---
|
|
// Contact Form Component
|
|
---
|
|
<div id="form-message" class="hidden mb-4"></div>
|
|
|
|
<form id="contact-form" class="space-y-6 contact-form-wrapper">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label for="name" class="block text-sm text-black/70 dark:text-white/60">
|
|
Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
class="w-full px-4 py-3 rounded-md border border-black/5 dark:border-white/5 bg-transparent text-black dark:text-white placeholder-black/30 dark:placeholder-white/30 focus:outline-none focus:border-black/20 dark:focus:border-white/20 transition-all duration-300"
|
|
placeholder="Your name"
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label for="email" class="block text-sm text-black/70 dark:text-white/60">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
class="w-full px-4 py-3 rounded-md border border-black/5 dark:border-white/5 bg-transparent text-black dark:text-white placeholder-black/30 dark:placeholder-white/30 focus:outline-none focus:border-black/20 dark:focus:border-white/20 transition-all duration-300"
|
|
placeholder="your.email@example.com"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label for="message" class="block text-sm text-black/70 dark:text-white/60">
|
|
Message
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
required
|
|
rows="5"
|
|
class="w-full px-4 py-3 rounded-md border border-black/5 dark:border-white/5 bg-transparent text-black dark:text-white placeholder-black/30 dark:placeholder-white/30 focus:outline-none focus:border-black/20 dark:focus:border-white/20 transition-all duration-300 resize-none"
|
|
placeholder="Your message..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<button
|
|
type="submit"
|
|
class="px-8 py-3 rounded-md bg-black/90 dark:bg-white/90 text-white dark:text-black font-medium hover:bg-black dark:hover:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black/50 dark:focus:ring-white/50 transition-all duration-300 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
>
|
|
<span id="button-text">Send Message</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const form = document.getElementById('contact-form') as HTMLFormElement;
|
|
const buttonText = document.getElementById('button-text') as HTMLSpanElement;
|
|
const formMessage = document.getElementById('form-message') as HTMLDivElement;
|
|
|
|
if (form) {
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
// Get form data
|
|
const formData = new FormData(form);
|
|
const name = formData.get('name') as string;
|
|
const email = formData.get('email') as string;
|
|
const message = formData.get('message') as string;
|
|
|
|
// Disable button and show loading state
|
|
const submitButton = form.querySelector('button[type="submit"]') as HTMLButtonElement;
|
|
submitButton.disabled = true;
|
|
buttonText.textContent = 'Sending...';
|
|
formMessage.className = 'hidden';
|
|
|
|
try {
|
|
// Send to API
|
|
const response = await fetch('https://notify.api.standard.nz/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
name,
|
|
email,
|
|
message,
|
|
destination: 'michael'
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
// Success
|
|
formMessage.textContent = 'Message sent successfully! I\'ll get back to you soon.';
|
|
formMessage.className = 'text-sm px-4 py-2.5 rounded-md bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-800/30';
|
|
form.style.display = 'none';
|
|
} else {
|
|
// Error response
|
|
throw new Error('Failed to send message');
|
|
}
|
|
} catch (error) {
|
|
// Network or other error
|
|
formMessage.textContent = 'Failed to send message. Please try again or email me directly.';
|
|
formMessage.className = 'text-sm px-4 py-2.5 rounded-md bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800/30';
|
|
} finally {
|
|
// Re-enable button
|
|
submitButton.disabled = false;
|
|
buttonText.textContent = 'Send Message';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|