diff --git a/assets/contact/contact.css b/assets/contact/contact.css
index dc8ca2465..1234861ff 100644
--- a/assets/contact/contact.css
+++ b/assets/contact/contact.css
@@ -109,6 +109,12 @@ textarea:hover {
box-shadow: 5px 5px 10px black;
}
+.contact-container #charCount {
+ font-size: 1.5em;
+ font-weight: bold;
+ margin-top: 10px;
+}
+
.contact-container button {
font-size: 20px;
font-weight: 700;
diff --git a/assets/contact/contact.html b/assets/contact/contact.html
index 6efe48974..fba9655e7 100644
--- a/assets/contact/contact.html
+++ b/assets/contact/contact.html
@@ -95,6 +95,7 @@
Contact Us
+ Message Count: 0/50
diff --git a/assets/contact/contact.js b/assets/contact/contact.js
index 77c7ed52e..8b067ceee 100644
--- a/assets/contact/contact.js
+++ b/assets/contact/contact.js
@@ -33,9 +33,21 @@ function mobileMenu() {
document.addEventListener('DOMContentLoaded', function() {
const contactForm = document.getElementById('contact-form');
const messageInput = document.getElementById('message');
+ const charCount = document.getElementById('charCount');
+ const minLength = 50; // Minimum length for the message
+
+ messageInput.addEventListener('input', function() {
+ const currentLength = messageInput.value.length;
+ charCount.textContent = `Message Count: ${currentLength}/${minLength}`;
+ if (currentLength < minLength) {
+ charCount.style.color = 'red';
+ } else {
+ charCount.style.color = '#00F260';
+ }
+ });
contactForm.addEventListener('submit', function(event) {
- if (messageInput.value.length < 50) {
+ if (messageInput.value.length < minLength) {
event.preventDefault();
alert('Your message must be at least 50 characters long.');
}