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
|
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;
}
}
}));
});
|
