Hello everyone, you can learn how to create a Responsive Contact Us Form using HTML, CSS in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Responsive Contact Us Form
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!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">
<link rel="stylesheet" href="style.css">
<title>Responsive Contact us Form - Coding Power</title>
</head>
<body>
<div class="container">
<h1>Contact us</h1>
<form action="#">
<div class="row">
<div class="field">
<input type="text" required>
<label>First Name</label>
</div>
<div class="field">
<input type="text" required>
<label>Last Name</label>
</div>
</div>
<div class="row">
<div class="field">
<input type="email" required>
<label>Email</label>
</div>
<div class="field">
<input type="number" required>
<label>Phone no</label>
</div>
</div>
<div class="row">
<div class="field message">
<input type="text" required>
<label>Message</label>
</div>
</div>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #0ead69;
}
.container{
width: 65%;
background: white;
border-radius: 10px;
padding: 15px 30px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.container h1{
text-align: center;
font-weight: 600;
margin-bottom: 30px;
}
.container form .row{
display: flex;
}
.container form .row .field{
width: 100%;
position: relative;
margin: 0 30px 30px 0;
}
.container form .row .field input{
display: block;
width: 100%;
height: 40px;
border: none;
border-bottom: 2px solid gray;
outline: none;
font-size: 16px;
}
.container form .row .message input{
height: 60px;
}
.container form .row .field input:focus{
border-color:#390099 ;
}
.container form .row .field label{
position: absolute;
bottom: 10px;
left: 0;
pointer-events: none;
font-size: 16px;
transition: 0.3s;
}
.container form .row .field input:focus ~ label,
.container form .row .field input:valid ~ label{
transform: translateY(-23px);
color: #390099;
}
.container form input[type=submit]{
padding: 7px 20px;
outline: none;
border-radius: 15px;
background: #0ead69;
border: none;
color: white;
cursor: pointer;
font-size: 18px;
}
@media (max-width:1024px){
.container{
width: 80%;
}
}
@media (max-width:768px){
.container{
width: 90%;
}
}
@media (max-width:650px){
.container{
width: 95%;
}
.container form .row{
display: block;
}
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
