This project - Contact Us Form is going to help "How to make simple responsive page?" This project is beginner friendly. So, for the beginners this project is definitely going to help you and it going to provide an idea of how to implement tags in html. This is Fully Responsive Website. The final project looks like:
We are going to start with HTML part and after that we are going to implement CSS part so let's start:
First implement head section and link CSS file in head tag. We are making CSS file saperately not adding CSS in html using style tag.
<!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>Form Contact Us</title>
<link rel="stylesheet" href="contact_us.css">
</head>
</html>
Now we are going to declare body tag. After that, in body tag add div tag with class as container. We know that div tag is a block-level element.
<body>
<div class="container">
</div>
</body>
Now make form which is the main part. So, the basic idea of this form is take feedback from people. Therefore, we need to add First Name, Last Name, Gmail and last Message.
So, the first thing is to add heading to form. Add input type text, give it id and placeholder and name it to First Name. This is going to similar for all the input as per requirement. At last, use textarea tag and name it Type Message, also adding two button one for reset and other for submit or send.
<body>
<div class="container">
<form>
<h1>Contact Us Form</h1>
<input type="text" id="first_name" placeholder="First Name" required>
<input type="text" id="last_name" placeholder="Last Name" required>
<input type="email" id="email" placeholder="xyz@gmail.com" required>
<input type="number" id="phone_number" placeholder="Phone Number" required>
<h4>Type Your Message...</h4>
<textarea id="required" required></textarea>
<input type="button" value="Send" class="button">
<input type="reset" value="Reset" class="button">
</form>
</div>
</body>
In this way we have completed our 40% work.
Let's start with CSS part:
Firstly, we are going to give margin, padding and box-sizing to all the tags. I will recommend you do this part whenever you start with any project. After that you can add any property as per need. Like here I have given font similar to all the text.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
Now we are going to style body tag.
body{
background: url(game.jpg) no-repeat;
background-size:fill;
height: 100vh;
background-position: 20%;
justify-content: center;
align-items: center;
transition: all 1s;
}
Similarly style div tag: Here give display property as flex to div tag as it's important to declare.
.container{
display: flex;
padding: 15% 15% 15% 15%;
justify-content: center;
}
Do it same for form:
.container form{
width:660px;
height: 400px;
display: flex;
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
border-radius: 15px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
flex-wrap: wrap;
justify-content: center;
}
.container form h1{
color: #fff;
font-weight: 500;
margin-top: 20px;
padding-left: 10px;
width: 500px;
text-align: center;
}
.container form input{
width: 290px;
height: 40px;
padding-left: 10px;
border: none;
outline: none;
font-size: 15px;
margin-bottom: 10px;
background: none;
border-bottom: 2px solid #fff;
color: black;
}
input::placeholder{
font-size: large;
color:#fff;
}
h4{
color: white;
font-weight: bold;
width: 600px;
margin-top: 20px;
}
#first_name, #last_name, #email, #phone_number{
margin-left: 20px;
color: white;
}
.container form textarea{
background: none;
border: none;
border-bottom: 2px solid #fff;
color: white;
resize: none;
font-weight: 200;
font-size: 15px;
padding: 10px;
outline:none;
min-width: 600px;
max-height: 600px;
min-height: 80px;
max-height: 80px;
}
textarea::-webkit-scrollbar{
width: 1em;
}
textarea::-webkit-scrollbar-thumb{
background-color: rgba(194,194,194,0.713);
}
.button{
margin-left: 5px;
border: none !important;
background-color: white !important;
border-radius: 5px;
cursor: pointer;
}
.button:hover{
background-color: whitesmoke !important;
}
Finally, we are going to add Media Querry for responsiveness.
Let's target first big screen:
@media only screen and (max-width: 1024px) and (min-width: 768px) {
.container {
padding: 25% 15% 15% 15%;
}
.container form{
width:500px;
height: 350px;
}
#first_name, #last_name, #email, #phone_number{
margin-left: 10px;
}
.container form h1{
font-size: 3ch;
}
.container form input{
width: 200px;
height: 30px;
padding-left: 10px;
}
.container form textarea{
font-weight: 200;
padding: 5px;
min-width: 400px;
max-height: 50px;
}
h4{
font-size: 13px;
width: 400px;
margin-top: -10px;
}
}
Now we are going to target tablet device:
@media only screen and (min-width: 500px) and (max-width: 768px) {
body{
background: url(game.jpg) repeat;
background-position: 30%;
}
.container {
padding: 25% 15% 15% 15%;
}
.container form{
width:400px;
height: 500px;
text-align: center;
}
#first_name, #last_name, #email, #phone_number{
margin-left: 10px;
}
.container form h1{
font-size: 3ch;
}
.container form input{
width: 300px;
height: 30px;
padding-left: 10px;
}
.container form textarea{
font-weight: 200;
font-size: 15px;
padding: 5px;
min-width: 300px;
max-height: 50px;
}
h4{
font-size: 2ch;
width: 300px;
margin-top: -10px;
}
}
Now targeting mobile device:
@media only screen and (min-width: 300px) and (max-width: 500px) {
body{
background: url(game.jpg) repeat;
background-position: 35%;
}
.container {
padding: 30% 15% 15% 15%;
}
.container form{
width:270px;
height: 500px;
text-align: center;
}
#first_name, #last_name, #email, #phone_number{
margin-left: 10px;
}
.container form h1{
font-size: 2ch;
}
.container form input{
width: 230px;
height: 30px;
padding-left: 10px;
}
.container form textarea{
font-weight: 200;
font-size: 10px;
padding: 5px;
min-width: 230px;
max-height: 50px;
}
h4{
font-size: 1.5ch;
width: 300px;
margin-top: -10px;
}
}
Final Code
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>Form Contact Us</title>
<link rel="stylesheet" href="contact_us.css">
</head>
<body>
<div class="container">
<form>
<h1>Contact Us Form</h1>
<input type="text" id="first_name" placeholder="First Name" required>
<input type="text" id="last_name" placeholder="Last Name" required>
<input type="email" id="email" placeholder="xyz@gmail.com" required>
<input type="number" id="phone_number" placeholder="Phone Number" required>
<h4>Type Your Message...</h4>
<textarea id="required" required></textarea>
<input type="button" value="Send" class="button">
<input type="reset" value="Reset" class="button">
</form>
</div>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body{
background: url(game.jpg) no-repeat;
background-size:fill;
height: 100vh;
background-position: 20%;
justify-content: center;
align-items: center;
transition: all 1s;
}
.container{
display: flex;
padding: 15% 15% 15% 15%;
justify-content: center;
}
.container form{
width:660px;
height: 400px;
display: flex;
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
border-radius: 15px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
flex-wrap: wrap;
justify-content: center;
}
.container form h1{
color: #fff;
font-weight: 500;
margin-top: 20px;
padding-left: 10px;
width: 500px;
text-align: center;
}
.container form input{
width: 290px;
height: 40px;
padding-left: 10px;
border: none;
outline: none;
font-size: 15px;
margin-bottom: 10px;
background: none;
border-bottom: 2px solid #fff;
color: black;
}
input::placeholder{
font-size: large;
color:#fff;
}
h4{
color: white;
font-weight: bold;
width: 600px;
margin-top: 20px;
}
#first_name, #last_name, #email, #phone_number{
margin-left: 20px;
color: white;
}
.container form textarea{
background: none;
border: none;
border-bottom: 2px solid #fff;
color: white;
resize: none;
font-weight: 200;
font-size: 15px;
padding: 10px;
outline:none;
min-width: 600px;
max-height: 600px;
min-height: 80px;
max-height: 80px;
}
textarea::-webkit-scrollbar{
width: 1em;
}
textarea::-webkit-scrollbar-thumb{
background-color: rgba(194,194,194,0.713);
}
.button{
margin-left: 5px;
border: none !important;
background-color: white !important;
border-radius: 5px;
cursor: pointer;
}
.button:hover{
background-color: whitesmoke !important;
}
@media only screen and (max-width: 1024px) and (min-width: 768px) {
.container {
padding: 25% 15% 15% 15%;
}
.container form{
width:500px;
height: 350px;
}
#first_name, #last_name, #email, #phone_number{
margin-left: 10px;
}
.container form h1{
font-size: 3ch;
}
.container form input{
width: 200px;
height: 30px;
padding-left: 10px;
}
.container form textarea{
font-weight: 200;
padding: 5px;
min-width: 400px;
max-height: 50px;
}
h4{
font-size: 13px;
width: 400px;
margin-top: -10px;
}
}
@media only screen and (min-width: 500px) and (max-width: 768px) {
body{
background: url(game.jpg) repeat;
background-position: 30%;
}
.container {
padding: 25% 15% 15% 15%;
}
.container form{
width:400px;
height: 500px;
text-align: center;
}
#first_name, #last_name, #email, #phone_number{
margin-left: 10px;
}
.container form h1{
font-size: 3ch;
}
.container form input{
width: 300px;
height: 30px;
padding-left: 10px;
}
.container form textarea{
font-weight: 200;
font-size: 15px;
padding: 5px;
min-width: 300px;
max-height: 50px;
}
h4{
font-size: 2ch;
width: 300px;
margin-top: -10px;
}
}
@media only screen and (min-width: 300px) and (max-width: 500px) {
body{
background: url(game.jpg) repeat;
background-position: 35%;
}
.container {
padding: 30% 15% 15% 15%;
}
.container form{
width:270px;
height: 500px;
text-align: center;
}
#first_name, #last_name, #email, #phone_number{
margin-left: 10px;
}
.container form h1{
font-size: 2ch;
}
.container form input{
width: 230px;
height: 30px;
padding-left: 10px;
}
.container form textarea{
font-weight: 200;
font-size: 10px;
padding: 5px;
min-width: 230px;
max-height: 50px;
}
h4{
font-size: 1.5ch;
width: 300px;
margin-top: -10px;
}
}
If you have any problem with this project, please comment down I will definitely reply to you. Thanks For Watching.