HTML free Contact us form templates
Posted on March 30, 2021, 8 p.m. by Bishal ( 9336)
Hi Everyone, Code With Bishal is back with a new project. So grab your PC and open your favourite Code Editor and start coding with me. In this blog, we will make a contact form using HTML and CSS only. Contact form is a great way for getting comments, feedback, service request, and to increase interaction with your visitor. Continue reading this blog to take a demo of the contact form. All the downloadable resources are attached to this blog, You can easily download these with the help of the buttons below.
What the is responsive contact us form?
Our awesome, responsive contact us form gives visitors an easy way to send messages right from the website.
How can I use this contact us form?
You can easily copy the code from our website and can simply paste it anywhere.
Do I need to know how to code?
No, you don't need to know how to code you can simply copy code from here and paste it wherever you want your contact form. Also, you can try it on our website using the "TRY IT NOW" option.
Is it safe to use the contact form?
Yes, it's completely safe to use the contact us form.
What are the advantages of contact us form?
Contact us form is a very good way for getting comments, feedback, service request, and to increase interaction with your visitor.
Overview of the Blog :
In this blog, you can learn, how to make contact us form using HTML and CSS By Code With Bishal. Just Copy The Code From Here And Paste It Into Your Website. To Preview scroll the page to the beginning. If you are having any problem viewing the code just refresh the page. contact us form is a lightweight and easy-to-use HTML code that creates a contact us form for you. In this blog, there are fifth sections on the webpage, in the first section, you can get a preview of the blog, in the second section there are few FAQs and an overview of the blog, in the third section there are few more coding blogs you might like, in the fourth section you can Try our contact us form using the "TRY IT NOW" button, after that, you can copy the code and paste it [that's the fifth section].
Some ScreenShots
Demo
Step by step guide for creating a contact us form using HTML:
-
Create a file with the name
index.html -
Open
index.html -
Add the Broiler plate of HTML
Broiler Plate of HTML with Bootstrap CDN linked:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<title>Contact Us form - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
-
Now inside the body, we will add the
formelements, which will help us in building the UI. In the later part of this blog, we will design the contact form.
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="Name" autocomplete="off" id="Name" placeholder="Name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" name="email" autocomplete="off" id="email" placeholder="E-mail">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control textarea" rows="3" name="Message" id="Message" placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn form-btn">Send a message</button>
</div>
</div>
</form>
-
Create a file
style.css -
Link External CSS file with your HTML file
Here is how can you link:
Add these code in the <head> </head> of your HTML document:
<link href="style.css" rel="stylesheet">
Now add some CSS code to the style.css file:
.textarea{
min-height:220px;
resize:none;
}
.form-btn{
background: red;
color:#fff;
}
.form-btn:hover{
background: tomato;
color:#fff;
}
Source Code
1) HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<title>Contact Us form - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="Name" autocomplete="off" id="Name" placeholder="Name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" name="email" autocomplete="off" id="email" placeholder="E-mail">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control textarea" rows="3" name="Message" id="Message" placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn form-btn">Send a message</button>
</div>
</div>
</form>
</body>
</html>
2) CSS Code:
.textarea{
min-height:220px;
resize:none;
}
.form-btn{
background: red;
color:#fff;
}
.form-btn:hover{
background: tomato;
color:#fff;
}