Kindly please contact us if there are any Issues with our Web Templates.Īll our templates are copyright to The WebThemez. This template fits in Mobile, Tablet, and Desktops. Most of the website in the world wide web (All our templates at WebThemez has full (100%) Responsive design compatibility. Key featuresĬlean & Developer-friendly HTML5 and CSS3 code This free bootstrap template meets the latest requirement and it is fully responsive template fits on all devices with multi-browser support. This template is built using Material design framework and latest Bootstrap 3.3, html5 and css3 which is easy and simple to customize the theme as per your requirements. This template fits in all types of requirements like the corporate, business, agency, consultancy, portfolio and many more. 'message': $('textarea').Overtake Business Bootstrap HTML Website Template is a clean modern well-crafted bootstrap template for a multi-page website. Let’s replace following JavaScript code in index.html file:ĭocument.getElementById('status').innerHTML = "Sending." Instead of reloading the page, we would like to send contact form on the same page. Our contact form is working correctly, however the user experience leaves much to be desired. Sending an email without reloading the page using AJAX In order to add similar validation as we did in the previous point, update the mail.php file by adding the following code: Since user can easily disable Javascript on his side, it's very important to also validate the submitted form on the server side. You can download the source file from here. Var message = document.getElementById('message').value ĭocument.querySelector('.status').innerHTML = "Message cannot be empty" ĭocument.querySelector('.status').innerHTML = "Sending." Var subject = document.getElementById('subject').value ĭocument.querySelector('.status').innerHTML = "Subject cannot be empty" Var email = document.getElementById('email').value ĭocument.querySelector('.status').innerHTML = "Email cannot be empty" Var name = document.getElementById('name').value ĭocument.querySelector('.status').innerHTML = "Name cannot be empty" So first change the existing line in index.html file In order to apply validation we have to change the code of our form. The other potential problem is that user might make a mistake in his email address so he would never get a response from us. However currently if the user makes a mistake by clicking send without filling in the form first, this will result in sending an empty email. Javascript validation (client-side validation) You can download the source code file from here. Work you will need to keep it on PHP-supporting server such as Apache. Now just replace with your email address and it's done. It's recommended to use this library along with theĬonnecting your contact form to email using PHPĬreate a new file called mail.php within the same folder as the contact form and place within it the following code: Will still work, however it may look and behave differently. Within this tutorial we are using the Material Design for Bootstrap library, you can download it for free from here. + 01 234 567 and paste the following code into your file (i.e. If you don't want to follow the tutorial or you, just need a working solution, you can download the final files from our GitHub repository here.ĭo you have any questions? Please do not hesitate to contact us directly.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |