Animation input contact

ContactUs.html

@@ -184,16 +184,16 @@
         <h1>Contact Us</h1>
         <form id="contactForm">
             <div class="form-group">
-                <input type="text" id="description" placeholder="Name" required>
+                <input type="text" class="anim" id="description" value="Name" required>
             </div>
             <div class="form-group">
-                <input type="text" id="phone" placeholder="Email" required>
+                <input type="text" class="anim" id="phone" value="Email" required>
             </div>
             <div class="form-group">
-                <input type="text" id="name" placeholder="Phone Number" required>
+                <input type="text" class="anim" id="name" value="Phone Number" required>
             </div>
             <div class="form-group">
-                <input type="text" id="email" placeholder="Description" required>
+                <input type="text" class="anim" id="email" value="Description" required>
             </div>
             <div class="form-group">
                 <button type="submit">Submit</button>

js/script.js

@@ -1,4 +1,32 @@
-document.addEventListener('DOMContentLoaded', function() {
+function animateInputText(inputField, originalText) {
+    let currentIndex = 0;
+
+    function typeLetter() {
+        if (currentIndex < originalText.length) {
+            inputField.value += originalText[currentIndex];
+            currentIndex++;
+            setTimeout(typeLetter, 200);
+        } else {
+            setTimeout(clearAndRestart, 1000);
+        }
+    }
+
+    function clearAndRestart() {
+        inputField.value = '';
+        currentIndex = 0;
+        typeLetter();
+    }
+
+    clearAndRestart();
+}
+
+// Attach the event to each input field
+document.querySelectorAll('.anim').forEach((inputField) => {
+    const originalText = inputField.value;
+    animateInputText(inputField, originalText);
+});
+
+document.addEventListener('DOMContentLoaded', function () {
     const header = document.getElementById('chaos-header');
     const words = header.textContent.split(' ');
     header.innerHTML = words.map(word => `<span>${word}</span>`).join(' ');