.jpg)
Contact Form Image
Today we are going to give you the desine of a contact form with source code.
If you want to create a Responsive Contact Form then you have come to the right post.
You can easily create a contact for. With the help of Hutmal and Kaas, that too in a simple way. Do you know the language of HTML css, even if you do not know, you can make it, we will help you, that too with the source code, stay with us and keep teaching.
First you have to create a HTML file whose full name will be index.html and then a css file whose full name will be style.css. You have been given the source code below, you can paste it in your code editor.
Keep in mind that paste the code of HTML in index.html itself and paste the code of css in style.css.
This is html file index.html
<!DOCTYPE html>
<html>
<head>
<title>Contact us</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
</head>
<body>
<div class="container">
<div class="contact-box">
<div class="left"></div>
<div class="right">
<h2>Contact Us</h2>
<input type="text" class="field" placeholder="Your Name">
<input type="text" class="field" placeholder="Your Email">
<input type="text" class="field" placeholder="Phone">
<textarea placeholder="Message" class="field"></textarea>
<button class="btn">Send</button>
</div>
</div>
</div>
<style>
</style>
</body>
</html>
And this is css file style.css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
}
body{
height: 100vh;
width: 100%;
color: #dbdbdb;
}
.container{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 2px 10px;
}
.container:after{
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: ur("your img name") no-repeat center;
background-size: cover;
filter: blur(30px);
z-index: -1;
}
.contact-box{
max-width: 850px;
display: flow-root;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
align-items: center;
text-align: center;
background: url(/);
box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.19);
}
.right{
padding: 25px 40px;
}
h2{
position: relative;
padding: 0 0 10px;
margin-bottom: 10px;
}
h2:after{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
height: 4px;
width: 50px;
border-radius: 5px;
background-color: #2099df;
}
textarea{
min-height: 150px;
}
.field{
width: 100%;
border: 2px solid rgba(0, 0, 0, 0);
outline: none;
background-color: rgba(255, 255, 255, 0.6);
padding: 0.5rem 1rem;
font-size: 1.1rem;
margin-bottom: 22px;
transition: .3s;
}
.field:hover{
background-color: rgba(87, 79, 79, 0.1);
}
.btn{
width: 100%;
padding: 0.5rem 1rem;
background-color: #ffffff;
color: rgb(12, 1, 1);
font-size: 1.1rem;
border-radius: 5px;
outline: none;
cursor: pointer;
transition: .4s;
}
.btn:hover{
background-color: #3427ae;
}
.field:focus{
border: 2px solid rgba(30,85,250,0.47);
background-color: #fff;
}
@media screen and (max-width: 880px){
.contact-box{
grid-template-columns: 1fr;
}
.left{
height: 200px;
}
}
.jpg)
