Create a Contact Form using HTML CSS & JavaScript

Last Updated : 26 Oct, 2023

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:

Web-capture_26-10-2023_123648_

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 */
@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: #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 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: #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.5s ease; 
}