johannes999

Hello, this is html code: <div class="home-page-image-container"> <img src="https://webdesignleren.com/wp-content/uploads/2023/07/auto-reparatie-in-hoogvliet.webp" alt="auto reparatie" /> <div id="app"></div> </div> and this is JS code : <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script> <script> var app = document.getElementById('app'); var typewriter = new Typewriter(app, { loop: true }); typewriter.typeString('Home Developer') .pauseFor(2500) .deleteAll() .typeString('Web Designer') .pauseFor(2500) .deleteAll() .typeString('<strong>FrontEnd Developer</strong>') .pauseFor(2500) .start(); </script> and this is CSS code: #app{ text-align:center; font-size:50px; background-image: linear-gradient( -225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100% ); background-clip:border-box; text-fill-color: transparent; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color: transparent; text-fill-color: transparent; animation: textclip 2s linear infinite; } @keyframes textclip { to { background-position: 200% center; } } it is on chrome and edge working very wel but only on firefox has deviation . I see firefox has some problems with gradient.the first 3-4 letters are not showing and it has strange behaviour. I tried in this way to solve the problem: #app { text-align: center; font-size: 50px; white-space: nowrap; overflow: hidden; } #app::before { content: attr(data-text); display: inline-block; width: 0; color: #231557; animation: typewriter 4s steps(40) infinite, colorTransition 4s infinite; } @keyframes typewriter { from { width: 0; } } @keyframes colorTransition { 0% { color: #231557; } 50% { color: #ff1361; } 100% { color: #ff1361; } } <div id="app" data-text="Hello, Gradient!"></div> but it didn't helpt . I tried many ways but the problem is the same . https://webdesignleren.com/onderhoud/can some one tell me how I can solve this problem with firefox . thanks johannes

hello, this code for slidershow is from W3 schools; <script> let slideIndex = 0; showSlides(); function showSlides() { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 2000); // Change image every 2 seconds } </script> it is working very well but when I open my websites home page there is no problem but when I open other pages and go to inspect element I see this error: (index):1331 Uncaught TypeError: Cannot read properties of undefined (reading 'style') at showSlides ((index):1331:24) at window.onload ((index):1317:1) I searched in google for solution and found this option: window.onload = function() { //code goes here }; but it didn't help . I couldn't find any solution . it tells that .style.display = "block" is not defind . and problem with the line: showSlides() ; this code is from W3schools where is the fault or how I can fix this problem? thanks my url is: https://webdesignleren.com/onderhoud/

hello. I get this syntaxError under console tab when I open inspect element on my homepage . Uncaught SyntaxError: Unexpected token I have deleted every unneccesary scripts but the problem exists. I have only this 2 scripts. the first is for FAQ . I don’t know if something wil be wrong here! <script> var acc = document.getElementsByClassName('accordion'); var len = acc.length; for (var i = 0; i < len; i++) { acc[i].addEventListener('click', event => { const accordion = event.currentTarget; const currentlyActiveAccordion = document.querySelector('.accordion.active'); if (currentlyActiveAccordion && currentlyActiveAccordion !== accordion) { currentlyActiveAccordion.classList.toggle('active'); currentlyActiveAccordion.nextElementSibling.style.maxHeight = 0; } accordion.classList.toggle('active'); var panel = accordion.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + 'px' } });> } </script> and second is for slider show : <script> let slideIndex = 0; showSlides(); function showSlides() { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; setTimeout(showSlides, 4000); // 4000 = Change image every 4 seconds } </script> may be it can be in this slidershow script something wrong! but I don’t see myself anything. can some one tell me what it can be this syntaxError? thankshttps://webdesignleren.com/

Hello, I have been for while looking for how to create slider show in JS and I found the code in w3school so I have studied and use it . this is my JS code before I ask my question: <script> let slideIndex = 0; let timeoutId = null; const slides = document.getElementsByClassName("mySlides"); const dots = document.getElementsByClassName("dot"); showSlides(); function currentSlide(index) { slideIndex = index; showSlides(); } function plusSlides(step) { if(step < 0) { slideIndex -= 2; if(slideIndex < 0) { slideIndex = slides.length - 1; } } showSlides(); } function showSlides() { for(let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; dots[i].classList.remove('active'); } slideIndex++; if(slideIndex > slides.length) { slideIndex = 1 } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].classList.add('active'); if(timeoutId) { clearTimeout(timeoutId); } timeoutId = setTimeout(showSlides, 5000); // Change image every 5 seconds } </script> it is working OK when you look on my url. 1 problem exists I want to add on the top of the sliders in 3 column some small texts so I created 1 div with 3 classes it didn't work I had to use big minus numbers to bring those texts on the top of the sliders . I thought I create this div with 3 classes in the JS self and solve the problem. and I think it has to be I searched in google how to add id with 3 classes in javascript code . I found many and tried but it didn't work. I have found chat GPT through someone and tried it . it has created to me this JS code : var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; slides[slideIndex-1].id = "myId"; slides[slideIndex-1].classList.add("class1", "class2", "class3"); } this code didn't work because of this 2 lines: slides[slideIndex-1].id = "myId"; slides[slideIndex-1].classList.add("class1", "class2", "class3"); to be sure I inserted this 2 line code in my own JS code above it didn't work either. I am sure that it has to be to create ID with 3 classes in JS slider show code and style it in CSS. I am asking this question for someone hoe knows very good or is expert in Javascript. how I can solve this problem or how I can create ID with 3 classes in the code above (first JS CODE above) not the second which is created with chat GPT. and where exactly insert it in the code above? thanks

thanks, I have changed animation duration from 1.5s to 4s and the problem is resolved. .fade { animation-name: fade; animation-duration: 4s; }

hello, I have found this code from code pen for slider show and it is working perfect but when I paste this code in my wordpress I get this problem : https://webdesignleren.com/ the JS code is : <script> let slideIndex = 0; showSlides(); function showSlides() { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; setTimeout(showSlides, 3000); // 3000 = Change image every 3 seconds } </script> HTML CODE is: <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg" style="width: 100%" height="750px" /> <div class="text">SLIDE 1/3</div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg" style="width: 100%" height="750px" /> <div class="text">SLIDE 2/3</div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg" style="width: 100%" height="750px" /> <div class="text">SLIDE 3/3</div> </div> </div> <br/> <div style="text-align: center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> CSS code is : * { box-sizing: border-box; margin:0; padding:0; } .mySlides { display: none; } img { vertical-align: middle; } /* Slideshow container */ .slideshow-container { max-width: 100%; position: relative; margin: auto; } /* Caption text */ .text { color: #f2f2f2; font-size: 60px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #717171; } /* Fading animation */ .fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } I checked everything carefully few times but I couldn't find the bug. why it is interrupting , what is the wrong here? thanks

thanks , I understood that I am using swiper.js and all code is written in swiper.js and inserting of text has to be there. I found onother slider code in youtube . it is working very wel and I see I can insert text in the slider self as I wanted. now I have a little problem . after sliders repeat from 1 to 3 it is turning back to 1 afterwards not forwards . how I can solve this problem? this is the JS code: <script> var counter= 1; setInterval (function() { document.getElementById('radio' + counter).checked= true; counter++; if(counter > 3) { counter= 1; } }, 3200 ) ; </script> and this is HTML code: <div class="site-header"> <div class="slider"> <div class="slides"> <!-- radio buttons--> <input type="radio" name="radio-btn" id="radio1"> <input type="radio" name="radio-btn" id="radio2"> <input type="radio" name="radio-btn" id="radio3"> <!--slide images--> <div class="slide first"> <img class="img-fluid1" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg" alt="Responsive image"> </div> <div class="slide"> <img class="img-fluid2" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg" alt="Responsive image"> </div> <div class="slide"> <img class="img-fluid3" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg" alt="Responsive image"> </div> <!-- automatic navigation --> <div class="navigation-auto"> <div class="auto-btn1"> </div> <div class="auto-btn2"> </div> <div class="auto-btn3"> </div> </div> </div> <!-- manual navigation --> <div class="navigation-manual"> <label for="radio1" class="manual-btn"></label> <label for="radio2" class="manual-btn"></label> <label for="radio3" class="manual-btn"></label> </div> </div> and this is my url:https://webdesignleren.com/ thanks

I have found this code in google and inserted in swiper scrip const element = document.querySelector("#info-container"); element.classList.add(".text1"); element.classList.add(".text2"); element.classList.add(".text3"); it didn't work then I tried this code: <script> const swiper = new Swiper('.swiper', { autoplay: { delay:3000, disableOnInteraction:false, }, loop: true, pagination: { el: '.swiper-pagination', clickable:true, }, const info-container = document.querySelectorAll('#info-container'); for (const info-container) { info-container.classList.add('.text1'); info-container.classList.add('.text2'); info-container.classList.add('.text3'); } // Navigation arrows /* navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, */ /*const element = document.querySelector("#info-container"); element.classList.add(".text1"); element.classList.add(".text2"); element.classList.add(".text3"); */ }); </script> it didn't work either . I have in my header.php this code ; <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/min.js/0.2.3/$.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" /> <?php wp_head(); ?> </head> I have also the html code in header.php like this: <div class="site-header"> <!-- Slider main container --> <div class="swiper"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"> <img class="img-fluid1" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg" alt="Responsive image"></div> <div class="swiper-slide"> <img class="img-fluid2" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-1.jpg" alt="Responsive image"></div> <div class="swiper-slide"> <img class="img-fluid3" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg" alt="Responsive image"></div> </div> </div> </div> <div id="info-container"> <div class="text1"> hello</div> <div class="text2"> hello hello hello hello</div> <div class="text3"> hello hello</div> </div> what it can be the problem or how I can solve it ? do I have also embed index.js or the problem is in the code? thanks

hello, I have this code for my slider show <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <script> const swiper = new Swiper('.swiper', { autoplay: { delay:3000, disableOnInteraction:false, }, loop: true, pagination: { el: '.swiper-pagination', clickable:true, }, // Navigation arrows /* navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, */ }); </script> now I want to create class with name (container) which wil have 3 classes inside it . class1 class2 class3 . I want to use this classes inside slider on the top of the page with matgin-top = 10px. the first class wil have (menu) name the second class wil have (BMW Specialist) text and the third class wil have (customer satisfaction) text. I tried to do it in HTML but the problem is ? I can't insert class from outside slider . so I thought that it has to be in slider self . in javascript code of it. can you give me an example how to do it to create class container with 3 classes inside it in Javascript code of slider? do I have to begin with creating Cons + querySelectorAll. and add classLists can you give me an simple example ? I couldn't insert my url through link because of link text is not functioning . I tried to leave empty but it is not working. my url is : https://webdesignleren.com/ thanks

Hello, I have this php code for contact form which I had copied and sudied from w3school then I have incorporated in my website. everything was working very wel . but now after a while I see some error . when I try to fill the contact form fields with name email etc. and I let 1 field expressly empty and click on submit botton the email is sent. and I don't get the error for example name is requierd, email is required , etc. what it can be the problem? thanks johannes <?php /* * Template Name: Contact * Description: Template voor contactpagina * Template Post Type: page */ get_header('new4'); the_content(); // define variables and set to empty values $nameErr = $emailErr = $phoneErr = $contentErr = ""; $name_sender = $email_sender= $phone = $content =$success= ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { // post $name_sender = strip_tags($_POST['name_sender']); $email_sender = strip_tags($_POST['email_sender']); $phone = strip_tags($_POST['phone']); $content = strip_tags($_POST['content']); // validate name if (empty($_POST["name_sender"])) { $nameErr = "Name is required"; } else { $name_sender = test_input($_POST["name_sender"]); // check if name only contains letters and whitespace if (!preg_match("/^[a-zA-Z-' ]*$/",$name_sender)) { $nameErr = "Only letters and white space allowed"; } } if (empty($_POST["email_sender"])) { $emailErr = "Email is required"; } else { $email_sender = test_input($_POST["email_sender"]); // check if e-mail address is well-formed if (!filter_var($email_sender, FILTER_VALIDATE_EMAIL)) { $emailErr = "Invalid email format"; } } // validate phone if (empty($_POST["phone"])) { $phoneErr = "Phone is required"; } else { $phone = test_input($_POST["phone"]); // check if phone is well-formed if(!preg_match("/^[0-9\s\-]+$/", $phone)) { $phoneErr = "Invalid phone number"; } } // validate content if (empty($_POST["content"] )) { $contentErr = "Content is required"; } else { $content = test_input($_POST["content"]); } // send if ( empty($nameErr) && empty($emailErr) && empty($phoneErr) && empty($contentErr) ) { // Variables $to = 'johannes@webdesignleren.com'; $subject = 'Contact form'; echo '<script type="text/javascript">window.location.href="https://webdesignleren.com/bedankt/"</script>'; // Message content $content .= ''; // Headers $headers = 'From: ' .$name_sender. ' <' .$email_sender. '>' . PHP_EOL; $headers .= 'Reply-To: <' .$email_sender. '>' . PHP_EOL; $headers .= 'Content-Transfer-Encoding: 8bit' . PHP_EOL; $headers .= 'Content-Type: text/plain; charset=UTF-8' . PHP_EOL; // Send email mail($to, $subject,$content, $headers); } } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } // form ?> <div class="container-form"> <form id="contact" action= "https://webdesignleren.com/bedankt/" autocomplete="off" method="post" action=""> <h3>Quick Contact</h3> <h4>Contact us today, and get reply with in 24 hours!</h4> <fieldset> <input placeholder="Your name" type="text" name="name_sender" id="name_sender" value="<?php echo $name_sender;?>"> <span class="error">* <?php echo $nameErr; ?></span> </fieldset> <fieldset> <input placeholder="Your Email Address" type="text" name="email_sender" id="email_sender" value="<?php echo $email_sender;?>"> <span class="error">* <?php echo $emailErr; ?></span> </fieldset> <fieldset> <input placeholder="Your phone number" type="text" name="phone" id="phone" value="<?php echo $phone;?>"> <span class="error">* <?php echo $phoneErr; ?></span> </fieldset> <fieldset> <textarea placeholder="Type your message here.." type="text" name="content" id="content"><?php echo $content;?></textarea> <span class="error">* <?php echo $contentErr; ?></span> </fieldset> <fieldset> <button name="submit" type="submit" id="btnsubmit" class="submit">Submit</button></fieldset> </form></div> https://webdesignleren.com/contact/

thank you very much, I saw that the class has to be inside the site-header like this in my case : <div class="site-header"> <!-- site-header --> <div class="site-title "> X Auto Service</div> <div class="header-menu"> <ul> <li><a href="http://webdesignleren.com/" > Home </a> </li> <li><a href="http://webdesignleren.com/onderhoud/" > Onderhoud </a> </li> <li><a href="http://webdesignleren.com/banden/" > Banden </a> </li> <li><a href="http://webdesignleren.com/apk/" > APK </a> </li> <li><a href="http://webdesignleren.com/contact/" > Contact </a> </li> </ul> </div> <message> <h1> <span>FULL</span> <span>SERVICE</span> <span>OF</span> <span>AUTO</span> <span>REPAIR</span> <span>And</span> <span>Maintenance</span> <span>PROFESSIONAL</span> <span>HELP</span> <span>AND</span> <span>DURABLE</span> <span>REPAIR</span> <span>SERVICE</span> <span>place</span> <span>on</span> <span>your</span> <span>own</span> <span>thinking.</span> </h1> </message> <div class="box"> <div class="box-item1"> hello </div> <div class="box-item2"> hello </div> <div class="box-item3"> hello </div> </div> </div> and the CSS: .box { display:flex; width:92%; float:left; margin-left:4%; border:0.1 solid; box-shadow: 0px 0px 2px 2px #C8C8C8; box-sizing:inherit; /*-moz-box-sizing: border-box; */ background-color:red; height:200px; margin-top:26rem; } .box-item1{ color:black } .box-item2{ justify-content:center; color:black } .box-item3{ color:black; justify-content:flex-end; } you can see on :https://webdesignleren.com/ it is succeded . it can not be outside the div class of the site-header also flex is causing problem . I used percentages. thank you for usefull information

Hello,I want to insert a border or box with width 92% and height 220px on the bottom of my website home image . the border has to be 50% inside the image and 50% ouside the image.I want to insert text in this white background border.I treid everything I made border in photoshop with background white with 0.1px solid black line . but it is not working . inside the image the section that has to be white it is standing in its origin color.I searched in google and in youtube but I couldn’t find any solution or answer.can some one tell me how I can solve this problem.I saw some websites using even 4 boxes with width of 20% and height of 500px with white background and inserting some text in it.please see my website:https://webdesignleren.com/ to understand what I mean.thanks

thanks , I looked 10 times in JS for typo fault but I never thought it was in HTML. It didn't help . I found much shorter and beter code for splitText on :https://greensock.com/splittext/ I craeted css animation it works fine but I wil try to study more to get beter results. thanks again

sorry I forgot to insert my url :https://webdesignleren.com/ thanks

Hello, I have created this JS script code to let each of letter of text to animate . I have first created this HTML CODE: <h1 class="message-texst">welkom to our website</h1> This is CSS Code: h1{ color:black; font-size:2rem; text-align:center; line-height:50vh; } span { opacity:0; transition:all 1s ease; } span.fade { opacity:1; } and this is JS CODE: <script> const text=document.querySelector(".message-text"); const strText=text.textContent; const splitText=strText.split(""); text.textContent= ""; for(let i=0; i < splitText.length; i++) { text.innerHTML += "<span>" + splitText[i] + "</span>"; } let char= 0; let timer=setInterval(onTick, 50); function onTick() { const span=text.querySelectorAll("span")[char]; span.classList.add("fade"); char++; if(char === splitText.length) { complete(); return; } } function complete() { clearInterval(timer); timer=null; } </script> I don't see any clue ! can some one tell me what is the wrong? the span and fade class are generated in JS code. thank you very much

thanks , I didn't get any message on my email box tath my thread is been answered . I have just log in today to ask question and I saw your reply. thank you very much I have resolved the problem with redirecting to thank you page . I created first thank you page then I used this code: echo '<script type="text/javascript">window.location.href="https://webdesignleren.com/dank-u-wel/"</script>'; then I updated the form action class with my thanks page url: <div class="container-form"> <form id="contact" action= "https://webdesignleren.com/dank-u-wel/" autocomplete="off" method="post"> thanks

I have build contact-form with p <div class="container-form"> <form id="contact" autocomplete="off" method="post" action=""> <h3>Quick Contact</h3> <h4>Contact us today, and get reply with in 24 hours!</h4> <fieldset> <input placeholder="Your name" type="text" name="name_sender" id="name_sender" value="<?php echo $name_sender;?>"> <span class="error">* <?php echo $nameErr; ?></span> </fieldset> <fieldset> <input placeholder="Your Email Address" type="text" name="email_sender" id="email_sender" value="<?php echo $email_sender;?>"> <span class="error">* <?php echo $emailErr; ?></span> </fieldset> <fieldset> <input placeholder="Your phone number" type="text" name="phone" id="phone" value="<?php echo $phone;?>"> <span class="error">* <?php echo $phoneErr; ?></span> </fieldset> <fieldset> <textarea placeholder="Type your message here.." type="text" name="content"><?php echo $content;?></textarea> <span class="error">* <?php echo $contentErr; ?></span> </fieldset> <fieldset> <button name="submit" type="submit" id="submit" class="submit">Submit</button></fieldset> </form></div> hp evrything is OK.there is only 1 problem .when I submit and send email the email been send but the informations remains in the field . I want to clean after submitting all the fields after 10 seconds with Jquery.this is my HTML code : this is my JS code: <script> $(document).ready(function () { $("#submit").click(function(){ setTimeout(function () { $('#submit').hide(); }, 10000); } }); </script> when you go to my website : https://webdesignleren.com/contact/you can see when you input your records in the field after submitting all the information stays there and it is not cleand .I know the reason because I put echo class in contact form for if some one forgets something then he has not to fill again all records .I want to know how with set timeout I can clean all this fields with Jquery?thanks