A simple contact form using HTML CSS and JavaScript

In this post you are going to learn, how to create an awesome-looking contact us form using HTML CSS and JavaScript. And also I have been shared the full source code of the project.

Take a look at the demo IMG:

I have aligned the contact form on the centre of the body/screen using CSS FLEXBOX. You can easily remove it and use the form on your website project.

The form didn't work without filling in the necessary pieces of stuff including name, email and content. Also, it is a mobile and tablet-friendly design so you can easily implement it on your site.

Files and folder.

You want to create 3 files, index.html, style.css and script.js in a folder called contact form or whatever you like.

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>contact form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="contactForm">
        <form action="#" autocomplete="off">
            <h3>Contact form</h3>
            <input type="text" name="Name" placeholder="NAME">
            <input type="email" name="email" placeholder="EMAIL">
            <textarea cols="100%" rows="6" placeholder="MESSAGE"></textarea>
            <input type="button" value="submit">
        </form>
    </div>
</body>
</html>

style.css

Step1: Remove padding, margin and text-decoration

Use this code To remove all the unnecessary margin, padding and text decoration of all tags in this project. It is necessary to get perfection.


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

Step 2: Center alignment of the contents in the body tag

To align the contact form Center I am using flexbox. The use of linear-gradient gives a different feel to the <body/>


body {
    height: 100vh;
    background-image: linear-gradient(45deg, rgb(229, 255, 0), rgb(255, 81, 0));
    display: flex;
    justify-content: center;
    align-items: center;
}

Step3: designing contact form, inputs and button


.contactForm{
    background-color: white;
    padding: 20px;
    width: 400px;
    border-radius: 30px;
    box-shadow:rgb(51 51 51) 0px 0px 26px -8px;
    margin: 20px;
}
.contactForm form{
    display: flex;
    flex-direction: column;
}
.contactForm form h3{
    font-size: 28px;
    border-bottom: 3px solid red;
    display: inline;
    margin: 7px 0 7px 0;
}
.contactForm form input, .contactForm form textarea{
    font-size: 17px;
    padding: 10px;
    margin: 10px 0 10px 0;
    font-weight: 600;
}

Step4: media query


@media only screen and (max-width:500px) {
    .contactForm {width: 100%;}
    body{padding: 10px;}
}

All CSS code in one


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

body {
    height: 100vh;
    background-image: linear-gradient(45deg, rgb(229, 255, 0), rgb(255, 81, 0));
    display: flex;
    justify-content: center;
    align-items: center;
}
.contactForm{
    background-color: white;
    padding: 20px;
    width: 400px;
    border-radius: 30px;
    box-shadow:rgb(51 51 51) 0px 0px 26px -8px;
    margin: 20px;
}
.contactForm form{
    display: flex;
    flex-direction: column;
}
.contactForm form h3{
    font-size: 28px;
    border-bottom: 3px solid red;
    display: inline;
    margin: 7px 0 7px 0;
}
.contactForm form input, .contactForm form textarea{
    font-size: 17px;
    padding: 10px;
    margin: 10px 0 10px 0;
    font-weight: 600;
}

@media only screen and (max-width:500px) {
    .contactForm {width: 100%;}
    body{padding: 10px;}
}

Fluratech