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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
{{- $contactFormData := dict -}}
<form id="contact-form" x-data="contactForm()" @submit.prevent="submitContactForm" class="space-y-6">
<!-- Name Field -->
<div>
<label for="name" class="block text-sm font-medium text-text mb-2">
{{ i18n "name" }}
</label>
<input
id="name"
type="text"
x-model="formData.name"
required
class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors"
:aria-busy="isSubmitting"
/>
</div>
<!-- Email Field -->
<div>
<label for="email" class="block text-sm font-medium text-text mb-2">
{{ i18n "email" }}
</label>
<input
id="email"
type="email"
x-model="formData.email"
required
class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors"
:aria-busy="isSubmitting"
/>
</div>
<!-- Message Field -->
<div>
<label for="message" class="block text-sm font-medium text-text mb-2">
{{ i18n "message" }}
</label>
<textarea
id="message"
x-model="formData.message"
rows="5"
required
class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors resize-none"
:aria-busy="isSubmitting"
></textarea>
</div>
<!-- Status Message -->
<div
x-show="statusMessage"
x-text="statusMessage"
:class="statusClass"
class="px-4 py-3 rounded-lg text-sm transition-all"
></div>
<!-- Submit Button -->
<button
type="submit"
:disabled="isSubmitting"
class="w-full px-4 py-2 bg-accent text-bg font-medium rounded-lg hover:bg-accent/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
<span x-show="!isSubmitting">{{ i18n "submit" }}</span>
<span x-show="isSubmitting">{{ i18n "sending" }}</span>
</button>
</form>
<script>
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 = '{{ i18n "form_success" | default "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 || '{{ i18n "form_error" | default "An error occurred. Please try again." }}';
this.statusClass = 'bg-red-100 text-red-800 border border-red-300';
}
} catch (error) {
this.statusMessage = '{{ i18n "form_error" | default "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;
}
}
}));
});
</script>
|
