diff options
Diffstat (limited to 'themes/danix-xyz-hacker/assets/js/contact-form.js')
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/contact-form.js | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/themes/danix-xyz-hacker/assets/js/contact-form.js b/themes/danix-xyz-hacker/assets/js/contact-form.js new file mode 100644 index 0000000..4fa8f55 --- /dev/null +++ b/themes/danix-xyz-hacker/assets/js/contact-form.js @@ -0,0 +1,45 @@ +document.addEventListener('alpine:init', () => { + Alpine.data('contactForm', () => ({ + formData: { + name: '', + email: '', + message: '' + }, + isSubmitting: false, + statusMessage: '', + statusClass: '', + + async submitContactForm() { + this.isSubmitting = true; + this.statusMessage = ''; + this.statusClass = ''; + + try { + const response = await fetch('/contact.php', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(this.formData) + }); + + const data = await response.json(); + + if (response.ok) { + this.statusMessage = 'Message sent successfully!'; + this.statusClass = 'bg-green-100 text-green-800 border border-green-300'; + this.formData = { name: '', email: '', message: '' }; + } else { + this.statusMessage = data.error || 'An error occurred. Please try again.'; + this.statusClass = 'bg-red-100 text-red-800 border border-red-300'; + } + } catch (error) { + this.statusMessage = 'An error occurred. Please try again.'; + this.statusClass = 'bg-red-100 text-red-800 border border-red-300'; + console.error('Form submission error:', error); + } finally { + this.isSubmitting = false; + } + } + })); +}); |
