Hello Readers, today in this video we will create Responsive Contact Us Form In HTML & CSS. Earlier blog I have shared How To Create Responsive Footer Section For Website, now it’s time to make responsive contact us page.
In simple language, contact us form means the medium to contact or connect specific owner of a website. In this form, users have to fill their some personal details like email address, name, phone number, message, and other information as required on the form.
As you can see on the given image of this program [Contact Us Page or Form] on the webpage, There is one image on the right side and the form is on the left side. All the contact forms are like this, designs may different but the main motive is the same. This given image of a contact form is in image form, actually, I have added various animations on that input field and button, and this contact form is fully responsive.
If you want to watch all animation that I have added in this contact us form and all the necessary code of HTML & CSS behind this program, you can watch the full video tutorial of this program [CSS Contact Us Page or Form]
Video Tutorial Contact Us Form In HTML and CSS
As you have seen on the given tutorial of this program [Contact Us Form Design], At first all input fields are in rest condition, when I focus on every field their colorful background appears and the input’s background color turns into white color smoothly. Also, I have shown the responsive part of this contact form, responsive means this form can be fit in every size of screen devices.
If you have basic knowledge of HTML & CSS then you can easily build this program [Contact Us Page Design], Those friends who are feeling difficult to make this contact form design, don’t worry I have provided the full source of this program below.
You Might Like This:
Responsive Contact Us Form [Source Code]
To copy-paste the given code of this program [Contact Form Design], first of all, you need to create two files, one is an HTML file and another is a CSS file, after creating these two files you can easily copy-paste the given codes in your document. You can also download all source code from the given “Download Button” directly.
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="content">
<div class="image-box">
<img src="contact.png" alt="">
</div>
<form action="#">
<div class="topic">Send us a message</div>
<div class="input-box">
<input type="text" required>
<label>Enter your name</label>
</div>
<div class="input-box">
<input type="text" required>
<label>Enter your email</label>
</div>
<div class="message-box">
<label>Enter your message</label>
</div>
<div class="input-box">
<input type="submit" value="Send Message">
</div>
</form>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #fae9fb;
position: relative;
}
body::before{
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: #ba24c2;
clip-path: polygon(86% 0, 100% 0, 100% 100%, 60% 100%);
}
.container{
z-index: 12;
max-width: 1050px;
width: 100%;
background: #fff;
border-radius: 12px;
margin: 0 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
padding: 25px 20px;
}
.content .image-box{
max-width: 55%;
}
.content .image-box img{
width: 100%;
}
.content .topic{
font-size: 22px;
font-weight: 500;
color: #ba24c2;
}
.content form{
width: 40%;
margin-right: 30px;
}
.content .input-box{
height: 50px;
width: 100%;
margin: 16px 0;
position: relative;
}
.content .input-box input{
position: absolute;
height: 100%;
width: 100%;
border-radius: 6px;
font-size: 16px;
outline: none;
padding-left: 16px;
background: #fae9fb;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.content .input-box input:focus,
.content .input-box input:valid{
border-color: #ba24c2;
background-color: #fff;
}
.content .input-box label{
position: absolute;
left: 18px;
top: 50%;
color: #636c72;
font-size: 15px;
pointer-events: none;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.content .input-box input:focus ~ label,
.content .input-box input:valid ~ label{
top: 0;
left: 12px;
display: 14px;
color: #ba24c2;
background: #fff;
}
.content .message-box{
min-height: 100px;
position: relative;
}
.content .message-box textarea{
position: absolute;
height: 100%;
width: 100%;
resize: none;
background: #fae9fb;
border: 2px solid transparent;
border-radius: 6px;
outline: none;
transition all 0.3s ease;
}
.content .message-box textarea:focus{
border-color: #ba24c2;
background-color: #fff;
}
.content .message-box label{
position: absolute;
font-size: 16px;
color: #636c72;
left: 18px;
top: 6px;
pointer-events: none;
transition: all 0.3s ease;
}
.content .message-box textarea:focus ~ label{
left: 12px;
top: -10px;
color: #ba24c2;
font-size: 14px;
background: #fff;
}
.content .input-box input[type="submit"]{
color: #fff;
background: #ba24c2;
padding-left: 0;
font-size: 18px;
font-weight: 500;
cursor: pointer;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.content .input-box input[type="submit"]:hover{
background-color: #d43ddb;
}
@media (max-width:1000px) {
.content .image-box{
max-width: 70%;
}
.content{
padding: 10px 0;
}
}
@media (max-width:900px) {
.content .image-box{
display: none;
}
.content form{
width: 100%;
margin-left: 30px;
}
}
If you face any difficulties while creating your Responsive Contact Us Form or your code is not working as expected, you can download the source code files for this Contact Page for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
