diff --git a/src/components/contact/ContactForm.tsx b/src/components/contact/ContactForm.tsx index 4d453c0..1800a32 100644 --- a/src/components/contact/ContactForm.tsx +++ b/src/components/contact/ContactForm.tsx @@ -15,6 +15,8 @@ interface FormData { export function ContactForm() { const t = useTranslations('pages.contact'); + const MAX_MESSAGE_LENGTH = 1000; + const [isSubmitting, setIsSubmitting] = useState(false); const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle'); const [errorMessage, setErrorMessage] = useState(''); @@ -26,6 +28,8 @@ export function ContactForm() { const [errors, setErrors] = useState>({}); const [remainingAttempts, setRemainingAttempts] = useState(null); + const messageLength = formData.message.length; + const validateForm = () => { const newErrors: Partial = {}; @@ -319,6 +323,7 @@ export function ContactForm() { onChange={handleChange} placeholder={t('contactForm.message.placeholder')} rows={6} + maxLength={MAX_MESSAGE_LENGTH} disabled={isSubmitting} aria-required="true" aria-invalid={!!errors.message} @@ -328,6 +333,19 @@ export function ContactForm() { {errors.message && ( )} +
+

MAX_MESSAGE_LENGTH + ? 'text-red-500' + : messageLength >= MAX_MESSAGE_LENGTH * 0.8 + ? 'text-yellow-500' + : 'text-zinc-500' + }`} + > + {t('contactForm.characterCounter', { current: messageLength, max: MAX_MESSAGE_LENGTH })} +

+
diff --git a/src/messages/de.json b/src/messages/de.json index b7debd3..dd62817 100644 --- a/src/messages/de.json +++ b/src/messages/de.json @@ -394,6 +394,7 @@ "label": "Nachricht", "placeholder": "Ihre Nachricht an mich..." }, + "characterCounter": "{current}/{max} Zeichen", "submit": "Nachricht senden", "submitting": "Nachricht wird gesendet...", "successMessage": "Vielen Dank für Ihre Nachricht! Ich werde mich so schnell wie möglich bei Ihnen melden.", diff --git a/src/messages/en.json b/src/messages/en.json index 465e413..eafeeaf 100644 --- a/src/messages/en.json +++ b/src/messages/en.json @@ -409,6 +409,7 @@ "label": "Message", "placeholder": "Your message to me..." }, + "characterCounter": "{current}/{max} characters", "submit": "Send Message", "submitting": "Sending message...", "successMessage": "Thank you for your message! I will get back to you as soon as possible.", diff --git a/src/messages/sr.json b/src/messages/sr.json index 17a3028..12d8973 100644 --- a/src/messages/sr.json +++ b/src/messages/sr.json @@ -416,6 +416,7 @@ "label": "Poruka", "placeholder": "Vasa poruka za mene..." }, + "characterCounter": "{current}/{max} karaktera", "submit": "Posalji poruku", "submitting": "Slanje poruke...", "successMessage": "Hvala vam na poruci! Javicu vam se sto je pre moguce.",