HTML and CSS responsive Contact us form template


Posted on December 25, 2020 at 8:00 PM [IST], created by Admin, Website: codewithbishal.com


Preview :


Responsive Contact US Form :

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 Social media icons?

=> 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].


You might like this :

Budget Calculator - using JS (JavaScript) and Bootstrap
How to check if the radio button is checked using JavaScript Password Strength meter using JS
Email Validation using HTML, CSS and JavaScript Social media icons with hover effect(Pure CSS)



Step 1) Add your HTML Code -

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Contact US form - Code With Bishal</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
</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 cwb-btn">Send a message</button>
</div>
</div>
</form>
</body>
</html>

Step 2) Add your CSS Code -

CSS Code

<style>
.contact-form{
margin-top:15px;
}
.contact-form .textarea{
min-height:220px;
resize:none;
}
.cwb-btn{
background: red;
color:#fff;
}
.cwb-btn:hover{
background: tomato;
color:#fff;
}
</style>


Leave a Comment:

Search