Hello friend, today you will learn in this blog that with the help of html and CSS you will learn to create a contact us form. We have previously designed many forms with the help of html and CSS, such as registration form and login form, you have come time to create Contact Us form design which you will learn to create in this blog.
Contact Us Form : You will know what a contact form is used for. Contact Us form allows visitors of a website to contact the owner of the site or those people. You must have visited many websites on the Internet and on most websites, Contact Us The form is used. Use of Contact Form is basically a set of questions to be filled by the visitor on the website. After being filled, it is sent to your email, which you can also see below this blog.
You can see in this image that we have shared the design by contact form. This contact Us form was designed by coding html and CSS only which you are going to learn in this blog. You may have seen many Contact Us forms designed, but that form is designed either by JavaScript or Jquery, which means that you will have to design it using html and CSS.
Contact Us Form Design Using HTML AND CSS Source Codes
First of all we know html code of Contact Us Form, we took a div whose class name is wrapper, took h2 tag inside this div, this tag is called heading tag. Under this tag we took form tag which took four div inside The class name of the first three is input-group and the class name of fourth is named button-group.
Inside the first div of the class input-group, we have taken two divs whose class name is input-box, inside these two divs, we have taken a label tag inside which the test is written, below the label tag is the input tag which is type text and class name name. It has been kept and this form has been required. Required means that when the input of the form is left field, then it alerts, so we use the required inside the input and took an i tag under this input. Here i is used for the font icon which is placed on the left side of the input field.
A similar tag has been written inside the other two input-group classes. Now inside the class button-group, we took a div whose name was named button-box and inside this class a button tag was taken whose type is submit and this button Inside I have taken the tag which has been done for the font icon and the text of the send message has been written outside this icon.
Now know about the css of this for, like always, the first thing is to zero the margin and padding to the page and to give the box-size the border-box that the html tag takes its own space o The space runs out. There is no problem in styling further, after this, the background color and font-family is given to the body. Here, the background color and font-family default of the entire page is changed.
And after that the class wrapper has been steeled by giving width height and color according to the form and the input inside this class has also been designed by styling the form which you see in the image above this form. You can also use it in your website and blog, if you know JavaScript and python well then you can use this form
When you click in the input field of this form, there is a color focus on the border of the input of the form and with this input field there is a color focus of the icon which you feel like a professional to see.
You are having difficulties in understanding the design of this form, which you can understand by watching this Contact Us Form video, which we have given below the tutorial video of this, which you can click and watch and understand today.
Video Tutorial of Contact Us Form Design Using HTML AND CSS
I hope that you have understood by watching this contact form tutorial. And we would have also known about the code of this form which we have written in the form of this Contact us. If you are in this in the beginning or you know html and CSS then you must have understood this form easily.
If you want to get the source code of this form, then you can get it easily. We have given the source code of this form in two files, one is in html and the other is given in CSS code file by scrolling both these files below. Let's copy and paste this files into your file, which is easier to understand.
HTML CODE FILE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="contactform.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<h2>
Contact Us</h2>
<form action="#" method="POST">
<div class="input-group">
<div class="input-box">
<label>First Name</label>
<input type="text" placeholder="Ravi" required class="name">
<i class="fa fa-user"></i>
</div>
<div class="input-box">
<label>Last Name</label>
<input type="text" placeholder="Web" required class="name">
<i class="fa fa-user"></i>
</div>
</div>
<div class="input-group">
<div class="input-box">
<label>Email</label>
<input type="email" placeholder="info1234@gmail.com" required class="name">
<i class="fa fa-envelope"></i>
</div>
<div class="input-box">
<label>Mobile No</label>
<input type="tel" placeholder="Phone No." required class="name">
<i class="fa fa-phone"></i>
</div>
</div>
<div class="input-group">
<div class="input-box comm">
<label>Comments or Message</label>
<textarea cols="46" rows="3" placeholder="Write Your Message here" class="name"></textare>
<i class="fa fa-comment"></i>
</div>
</div>
<div class="button-group">
<div class="button-box">
<button type="submit"><i class="fa fa-paper-plane"></i> Send Message</button>
</div>
</div>
</form>
</div>
</body>
</html>
CSS CODE FILE :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #E4E8F0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
}
.wrapper{
width: 500px;
max-width: 100%;
padding: 25px;
border-radius: 5px;
margin: 100px auto 0;
position: relative;
background: #fff;
box-shadow: 2px 2px 10px #00000080;
border-top: 10px solid #1ab188;
}
.wrapper h2{
font-size: 24px;
line-height: 24px;
padding: 15px;
margin-bottom: 40px;
text-align: center;
border: 1px dotted #333;
}
.input-group{
margin-bottom: 12px;
width: 100%;
position: relative;
display: flex;
flex-direction: row;
padding: 10px 0;
}
.input-box{
width: 100%;
margin-right: 12px;
position: relative;
}
.input-box label{
position: absolute;
bottom: 43px;
}
.input-box:last-child{
margin-right: 0;
}
.name{
padding: 10px 10px 10px 40px;
width: 100%;
border: 1px solid #00000033;
outline: none;
letter-spacing: 1px;
transition: 0.3s;
border-radius: 3px;
color: #333;
box-shadow: inset 0 1px 1px 0 #0000001a;
}
.name:focus{
-webkit-box-shadow:0 0 2px 1px #1ab18880;
-moz-box-shadow:0 0 2px 1px #1ab18880;
box-shadow:0 0 2px 1px #1ab18880;
border: 1px solid #1ab188;
}
.name:focus::-webkit-input-placeholder{
color: #333;
}
.input-group i{
height: 36px;
width: 34px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 1px;
left: 1px;
color: #13232fe6;
border-radius: 2px 0 0 2px;
transition: 0.3s;
font-size: 18px;
pointer-events: none;
border-right: 1px solid #cccccc;
border-bottom: none;
}
.name:focus + i{
color: #1ab188;
border-right: 1px solid #1ab188;
}
textarea{
height: 125px;
}
.comm i{
border: 1px solid #cccccc;
}
.comm label{
bottom: 133px;
}
button{
background: #1ab188;
border: 1px solid rgba(0,0,0,0.2);
color: #fff;
outline: none;
padding: 0 10px;
height: 50px;
cursor: pointer;
border-radius: 3px;
box-shadow: inset 0 1px 1px 0 rgba(255,255,255,0.6);
letter-spacing: 1px;
transition: 0.5s;
width: 100%;
font-size: 18px;
}
button:hover, button:focus{
background-color: #179677;
}
Post a Comment