Hello friend, In this blog we will discuss how to create a responsive and attractive contact us page using html and css. This contact us page code is very easy to understand.
If you regular visitor of my website then you know that we will provide a very simple and easy code. The most important part of this blog is ,this contact us page is fully responsive. Earlier I have shared one article on Responsive navigation bar using html and css and now we create a contact us page.
There are many contacts us page templates available in internet but most of them are made with bootstrap and some are paid. But this contact us page template are free. You can see the html and css code of this contact us page given below.
Creating an attractive page may seem to be difficult for who don't know about html and css, then they will not be able to make the attractive and responsive contact us page.
What is Contact us page
A contact us page is the most important and valuable page for any website because with the help of contact us page we can contact and send the message to the owner of the site and people who are responsible for it. You can easily contact to owner if you have any queries or give any suggestions etc.
The mainly contact us page contains four input fields where user need to fill name, email, contact number and message.
Also learn this :
- Responsive navigation bar using html and css
- Responsive registration page using html and css
- Responsive about us page using html and css
Responsive contact us page using html and css [ Source Code ]
Let's start
In this responsive contact us page we will take two section.
One section contains basic details of user or visitors -
- User name
- User email id
- Contact number of user
- Message that user want to send
Another Section content basic information of owner
- Address of admin or owner
- Email id (admin)
- Contact number
- Website
To create a contact us page we need to create a two files , one is an html file for creating a structure of contact us page and another is css file for designing a structure of contact us page. After creating a these two file copy this code and paste in these file.
How to create this contact us form or page
Create two file index.html and style.css
index.html
First create a html file with the name index.html and copy this given code and paste on it. Remember the name of this file with the .html extension. HTML is used to design a structure of our web page.
<html><head>
<title>Contact us page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="container"><br><br>
<h2>Send us a message </h2><br>
<input type="text" placeholder="Name" ><br>
<input type="text" placeholder="Email" ><br>
<input type="text" placeholder="Contact " ><br>
<textarea placeholder="Message"></textarea ><br>
<input type="submit" value="Send Message">
</div>
<div class="contact">
<div class="details">
<br><br>
<h2>Contact us </h2><br>
<p>We are open for any suggestions or just <br>to have a chat </p>
<br>
<i class="fa-solid fa-location-dot"></i>
<span><b>Address</b>: 198 west 21th street, India </span><br>
<i class="fa-solid fa-phone"></i>
<span><b>Phone</b>:1234567890</span><br>
<i class="fa-solid fa-envelope-open"></i>
<span><b>Email</b>: abc@gmail.com </span><br>
<i class="fa-solid fa-globe"></i>
<span><b>Website</b>: www.mcawaala.com</span><br>
</div>
</div>
</div>
</body>
</html>
Style.css
Another file is css file with the name style.css and copy this code and paste on it. Remember this css file with the .css extension. You know that css is most important in web page because it style a our web page and make a attractive.
*{margin:0;
border:none;
}
.main{
display :flex;
width:90%;
height:500px;
margin:20px auto;
align-items :center;
justify-content :center;
box-shadow :1px 1px 10px 1px black;
}
.container
{
background:#9141bf;
width:40%;
height :400px;
padding:5px;
text-align :center;
box-shadow :1px 1px 10px 1px black;
}
.container h2{
color:white;
}
input[type=text]{
border:none;
text-decoration :none ;
width:90%;
padding :5px;
margin-top :10px;
height:30px;
color:solid white;
}
textarea {
width:92%;
height:80px;
margin-top :10px;
color:black;
}
input[type=submit]
{
width:150px;
height:30px;
background: #f803fc ;
color:white;
margin-top :10px;
border-radius :20px;
}
.contact {
background:white;
color:black;
width:40%;
height :400px;
display :;
padding:5px;
box-shadow :1px 1px 10px 1px black;
}
.contact h2{
text-decoration :underline #9141bf;
text-align :center;
}
.details {
display :block;
justify-content :space-between;
}
.details p{
text-align :center;
}
i{
border-radius :50%;
width:30px;
height :30px;
margin:18px 10px 0 10px;
text-align :center;
box-shadow :0px 0px 20px 10px rgba(0,0,0,0.05) ;
}
.fa-solid{
line-height :27px;
}
span{
margin-top:25px;
}
@media (max-width:947px)
{
.main{
display :block;
height:810px;
}
.container {
width :97%;
}
.contact {
width:97%;
}
}
Note - html file and css file must be same folder if you change the path of any file you must also change the path in source code. If you don't change tha path then you face some issues.
Thank you for visiting my website and reading our blog. If you face any problem during creating this responsive contact us page using html and css, then contact us or comment we try to solve your problem as soon as possible.
You can also visit my website for responsive registration page, responsive about us page and responsive navigation bar. You can also follow us in instagram, youtube etc. We provides a many web pages, project and portfolio. If you want any college project then you message me we provides this project.
Popular post on this website.
- Responsive navigation bar using html and css
- Responsive registration page using html and css
- Responsive about us page using html and css
- Attractive 3d button using html and css
- Subscribe button code using html and css
comment 0 comments
more_vert