1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
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 formData = new FormData();
formData.append('name', this.formData.name);
formData.append('email', this.formData.email);
formData.append('message', this.formData.message);
formData.append('subject', '');
formData.append('website', ''); // honeypot
formData.append('_t', Math.floor(Date.now() / 1000)); // timing check
const response = await fetch('/api/contact.php', {
method: 'POST',
body: 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;
}
}
}));
});
|
