How To Create Responsive Contact Us Page In HTML
Learn How To Create Contact Us Page Using HTML And CSS. Learn How To Make Contact Form Using HTML, CSS. Easy Way To Learn HTML For Beginner.
I Will Create Contact Us Page Just Using HTML And CSS. We Create Contact US Page With One Social Bar, Second A Contact Us Form Where People Fill There Information And Send Us Message And Third Is The Google Map Section where the Location and Route Of The Website Company Showing, Here People Easy Find The Website Company Location. You Will Create This Awesome Contact Us Page By Following This Steps Which I Given Below.
How To Make Contact Us Page In HTML and CSS
- 0.0 - 1.0 min : Intro
- 1.0 - 18.0 min: How To Create Contact Us Page
In This Tutorial, I Will Show How To Create Contact Us Page Form Just Using HTML And CSS. In This Video tutorial, First 60s, I Will Show You What Type Of Contact Form Design I Will Create In This Tutorial. After I Will Make HTML And CSS Files And Put This Files In Our Project Folder. I Make Separate CSS Folder For CSS File And Than I Will Link CSS File With HTML File Using Link Tag. After Linking Files, I Make Contact Us Page Structure Using HTML And This Contact Us Form Using CSS Style Sheet. After Designing I Make This Contact Form Page Responsive For All Devices (Tab, Mobile, Laptop, And PC) By Using Media Query. If You Face Any Problem Contact Me. Hope You Like This Tutorial.
1) Open Any Text Editor Like Notpade++.
2) Create HTML And CSS File, Put In Your Project Folder. I recommended You, You Will Create Separate CSS Folder For CSS File.
3) Link The CSS File With Contact Page HTML File Using "Link" Tag.
4) Copy Contact Us Page HTML Code Which I Given Below.
HTML
<!--doctype html--> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contact Form</title> <!--link-stylesheet-----------> <link rel="stylesheet" type="text/css" href="css/style.css"/> <!--using-fontAwesome------------> <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script> </head> <body> <!--contact-form-container-------------------> <section id="contact"> <!--socail-----------> <div class="social"> <!--icons---------> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-dribbble"></i></a> <a href="#"><i class="fab fa-behance"></i></a> </div> <!--contact-box-------------> <div class="contact-box"> <!--heading----------> <div class="c-heading"> <h1>Get In Touch</h1> <p>Call Or Email Us Regarding Question Or Issues</p> </div> <!--inputs------------------> <div class="c-inputs"> <form> <input type="text" placeholder="Full Name"/> <input type="email" placeholder="Example@gmail.com"/> <textarea name="message" placeholder="Write Message"></textarea> <!--sumbit-btn-----------> <button>SEND</button> </form> </div> </div> <!--map-------------------> <div class="map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1701.5252574812218!2d74.31603229143637!3d31.46779655679461!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391906abd2d8f2db%3A0x2d4bd93a1eb25b41!2sArfa%20Technologies!5e0!3m2!1sen!2s!4v1596774150754!5m2!1sen!2s" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> </div> </section> </body> </html>
5) Copy Contact Us Page CSS Code Which I Given Below.
CSS
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding: 0px;
background-color: #FFFFFF;
}
a{
text-decoration:none;
}
.social a{
padding: 20px;
color:#7b7c7c;
font-size:1.1rem;
}
#contact{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: flex;
align-items: center;
}
.social{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
}
.social a:hover{
color:#000000;
transition: all ease 0.3s;
}
.contact-box{
background-color:#434445;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px 30px;
box-shadow: 2px 0px 30px rgba(0,0,0,0.1);
}
.c-heading h1{
font-family: Roboto;
color: #e7eef3;
font-size: 2.5rem;
font-weight: lighter;
margin: 0px;
padding: 0px;
}
.c-heading p{
font-family: Roboto;
color:#cecece;
font-size: 0.8rem;
font-weight: lighter;
margin: 0px;
padding: 0px;
text-align: center;
}
.c-inputs{
margin: 15px 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.c-inputs input{
width:250px;
height: 45px;
background-color: transparent;
border: none;
border-bottom: 1px solid rgba(251,251,251,0.1);
outline: none;
margin: 10px 0px;
padding: 10px;
box-sizing: border-box;
color: #f4f4f4;
display: flex;
}
.c-inputs textarea{
width:250px !important;
height: 200px !important;
outline: none;
background-color: transparent;
border:1px solid rgba(82,82,82,1);
color: #f4f4f4;
padding: 10px;
font-size: 1.2rem;
box-sizing: border-box;
}
.c-inputs button{
width:200px;
height: 40px;
background-color: #FFFFFF;
border: none;
outline: none;
margin-top: 20px;
border-radius: 10px;
box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
letter-spacing: 1px;
}
.c-inputs input:focus{
border-bottom: 1px solid rgba(252,252,252,1.00);
transition: all ease 0.5s;
}
.c-inputs textarea:focus{
border: none;
border-bottom: 1px solid rgba(255,255,255,1.00);
transition: all ease 0.5s;
background-color: rgba(0,0,0,0.1);
}
.c-inputs button:active{
transform: scale(1.02);
}
.map{
filter: grayscale(0.2);
box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
border: 2px solid #FFFFFF;
}
@media(max-width:1100px){
.map{
display: none;
}
}
@media(max-width:450px){
.social{
display: none;
}
.contact-box{
width: 100%;
height: 100vh;
box-sizing: border-box;
}
#contact{
position: static;
transform: translate(0,0);
width:100%;
height: 100vh;
box-sizing: border-box;
}
.c-heading h1{
font-size: 2.2rem;
text-align: center;
}
}
6) After Doing All Steps Open HTML File And Enjoy This Contact Us Page Design. If You Have Any Problem Check My Youtube Tutorial Which I Given Below.
The Download Links Will Be Shown in 30 Seconds
Comments