In this article, we will see how can we create a contact form with the help of HTML, CSS, and JavaScript. In a contact form there are basically two sections one is the input fields and the other is the submit button section.
Preview Image:
Prerequisites
Approach
- Create a HTML structure for the contact form component having proper id and classes for the styles.
- Add a CSS file which contains all the styles related to the contact form component.
- Add a JavaScript file having all the logic for validation and boundary checks.
-
Form Validations Conditions
- Length of name should be 5 or more.
- Length of subject should be 10 or more.
- Length of number should be 10.
- Email must include @ and length more than 6.
- Message length must be 40 characters.
Then, link the JavaScript and CSS file to the HTML file.
Example: This example describes the basic implementation of the contact form using HTML, CSS, and JavaScript.
Javascript
// Script.js function validate() {
let name =
document.getElementById( "name" ).value;
let subject =
document.getElementById( "subject" ).value;
let phone =
document.getElementById( "phone" ).value;
let email =
document.getElementById( "email" ).value;
let message =
document.getElementById( "message" ).value;
let error_message =
document.getElementById( "error_message" );
error_message.style.padding = "10px" ;
let errors = [];
if (name.length < 5) {
errors.push( "Please Enter a valid Name" );}
if (subject.length < 10) {
errors.push( "Please Enter a Correct Subject" );}
if (isNaN(phone) || phone.length != 10) {
errors.push( "Please Enter a valid Phone Number" );}
if (email.indexOf( "@" ) == -1 || email.length < 6) {
errors.push(
"Please Enter a valid Email" );}
if (message.length <= 40) {
errors.push(
"Please Enter More Than 40 Characters" );}
if (errors.length > 0) {
error_message.innerHTML =
errors.join( "<br>" );
return false ;}
else {
alert(
"Form Submitted Successfully!" );
return true ;}}
|
HTML
<!-- Index.html --> <!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< title >Form</ title >
< link rel = "stylesheet" href = "./styles.css" >
</ head >
< body >
< 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 >
< script src = "./index.js" ></ script >
</ body >
</ html >
|
CSS
/* Styles.css */ * { margin : 0 ;
padding : 0 ;
box-sizing: border-box;
outline : none ;
font-family : "Josefin Sans" ,
sans-serif ;
} body { background : #5eb558 ;
} .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 h 2 {
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 : #569a4d ;
color : #fcfbf7 ;
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.5 s ease;
} |