This is a simple and subtle project that can be put in a resume, It will help gain good expression among the recruiters. Also, it is a good project for developers to practice. You can use it on websites login/sign-up pages.
Contact Form Validation In HTML, CSS & JavaScript| User-Freindly Project |
Hello Everyone 👋 Welcome to My New Blog. Today I have made a Contact Form Validation with the help of HTML, CSS & Javascript 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this contact form with validation step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS & finally JS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
In HTML we have made a div for the container for the contact form and have put input fields in it.
<div class="wrapper">
<h2>Contact us</h2>
<div id="error_message">
</div>
<form action="" id="myform" onsubmit = "return validate();">
<div class="input_field">
<input type="text" placeholder="Name" id="name">
</div>
<div class="input_field">
<input type="text" placeholder="Subject" id="subject">
</div>
<div class="input_field">
<input type="text" placeholder="Phone" id="phone">
</div>
<div class="input_field">
<input type="text" placeholder="Email" id="email">
</div>
<div class="input_field">
<textarea placeholder="Message" id="message"></textarea>
</div>
<div class="btn">
<input type="submit">
</div>
</form>
</div>
After the HTML we will design the contact form, input fields will make it look attractive.
CSS🎈( step - 2)
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background: #fece0c;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 350px;
width: 100%;
background: #fff;
padding: 25px;
border-radius: 5px;
box-shadow: 4px 4px 2px rgba(254,236,164,1);
}
.wrapper h2{
text-align: center;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 3px;
color: #332902;
}
.wrapper .input_field{
margin-bottom: 10px;
}
.wrapper .input_field input[type="text"],
.wrapper textarea{
border: 1px solid #e0e0e0;
width: 100%;
padding: 10px;
}
.wrapper textarea{
resize: none;
height: 80px;
}
.wrapper .btn input[type="submit"]{
border: 0px;
margin-top: 15px;
padding: 10px;
text-align: center;
width: 100%;
background: #fece0c;
color: #332902;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: bold;
border-radius: 25px;
cursor: pointer;
}
#error_message{
margin-bottom: 20px;
background: #fe8b8e;
padding: 0px;
text-align: center;
font-size: 14px;
transition: all 0.5s ease;
}
Now we have done the CSS coding as well, now let's move to javascript. in javascript, we have not done enough coding. we have written for making buttons work.
JavaScript🎈( step - 3)
function validate(){
var name = document.getElementById("name").value;
var subject = document.getElementById("subject").value;
var phone = document.getElementById("phone").value;
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;
var error_message = document.getElementById("error_message");
error_message.style.padding = "10px";
var text;
if(name.length < 5){
text = "Please Enter valid Name";
error_message.innerHTML = text;
return false;
}
if(subject.length < 10){
text = "Please Enter Correct Subject";
error_message.innerHTML = text;
return false;
}
if(isNaN(phone) || phone.length != 10){
text = "Please Enter valid Phone Number";
error_message.innerHTML = text;
return false;
}
if(email.indexOf("@") == -1 || email.length < 6){
text = "Please Enter valid Email";
error_message.innerHTML = text;
return false;
}
if(message.length <= 140){
text = "Please Enter More Than 140 Characters";
error_message.innerHTML = text;
return false;
}
alert("Form Submitted Successfully!");
return true;
}All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
If you found any value in this blog you can support me buy me a coffee.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.