Responsive Contact Us Form
Responsive Contact Us Form using HTML and CSS
Details: Responsive Contact Us Form
Designing websites can be a fun and challenging task for many people. People use web design to sell products and services or to promote their businesses. In addition to basic design tools, web designers need to understand the coding language HTML. This is used to make websites interact with computer hardware such as web browsers and social media platforms such as Twitter. Another crucial aspect of web design is CSS, which is used to style and modify the look of your website using HTML code. Finally, all websites need contact information that users can use to communicate with the website’s owner. By incorporating these elements into their designs, web designers can create unique and effective websites for their customers.
A contact form allows website visitors to contact the website owner or people responsible for its maintenance. A contact form with fields for the visitor’s name, subject, and message can be sent. There is a linear gradient background on the site page and a contact us form. Each input field has a focus animation, and it is responsive to any device, adjusting its width to mobile or tablet view.
To replicate this tutorial, create an HTML and a CSS file, copy and paste the codes below in each file. Or directly download the source code at the end of the article.
HTML Code: Responsive Contact Us Form
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Contact Us Form | HTMLCODE</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="text">Responsive Contact Us Form</div>
<form action="#">
<div class="form-row">
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label for="">First Name</label>
</div>
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label for="">Last Name</label>
</div>
</div>
<div class="form-row">
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label for="">Email Address</label>
</div>
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label for="">Website Name</label>
</div>
</div>
<div class="form-row">
<div class="input-data textarea">
<textarea rows="8" cols="80" required></textarea>
<div class="underline"></div>
<label for="">Write your message</label>
</div>
</div>
<div class="form-row submit-btn">
<div class="input-data">
<div class="inner"></div>
<input type="submit" value="submit">
</div>
</div>
</form>
</div>
</body>
</html>
On the off chance that you know JavaScript, you can add some JavaScript codes and take this contact form to a higher level. What's more, if you know backend language like PHP/MySQL, you can associate this structure with the data set. Assuming you like this responsive contact form and need to get the source code then you can undoubtedly get it below or can download it at the end of this article. You can utilize these structures to show abilities, projects, and some more.
Tooltip contentCSS CODE: Responsive Contact Us Form
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 40px;
background: linear-gradient(115deg, #e28743 10%, #1587b9 90%);
}
.container{
max-width: 800px;
background: #fff;
width: 800px;
padding: 25px 40px 10px 40px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.container .text{
text-align: center;
font-size: 35px;
font-weight: 600;
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container form{
padding: 30px 0 0 0;
}
.container form .form-row{
display: flex;
margin: 32px 0;
}
form .form-row .input-data{
width: 100%;
height: 40px;
margin: 0 20px;
position: relative;
}
form .form-row .textarea{
height: 70px;
}
.input-data input,
.textarea textarea{
display: block;
width: 100%;
height: 100%;
border: none;
font-size: 17px;
border-bottom: 2px solid rgba(0,0,0, 0.12);
}
.input-data input:focus ~ label, .textarea textarea:focus ~ label,
.input-data input:valid ~ label, .textarea textarea:valid ~ label{
transform: translateY(-20px);
font-size: 14px;
color: #3498db;
}
.textarea textarea{
resize: none;
padding-top: 10px;
}
.input-data label{
position: absolute;
pointer-events: none;
bottom: 10px;
font-size: 16px;
transition: all 0.3s ease;
}
.textarea label{
width: 100%;
bottom: 40px;
background: #fff;
}
.input-data .underline{
position: absolute;
bottom: 0;
height: 2px;
width: 100%;
}
.input-data .underline:before{
position: absolute;
content: "";
height: 2px;
width: 100%;
background: #3498db;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before,
.textarea textarea:focus ~ .underline:before,
.textarea textarea:valid ~ .underline:before{
transform: scale(1);
}
.submit-btn .input-data{
overflow: hidden;
height: 45px!important;
width: 25%!important;
}
.submit-btn .input-data .inner{
height: 100%;
width: 300%;
position: absolute;
left: -100%;
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
transition: all 0.4s;
}
.submit-btn .input-data:hover .inner{
left: 0;
}
.submit-btn .input-data input{
background: none;
border: none;
color: #fff;
font-size: 17px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
position: relative;
z-index: 2;
}
@media (max-width: 700px) {
.container .text{
font-size: 30px;
}
.container form{
padding: 10px 0 0 0;
}
.container form .form-row{
display: block;
}
form .form-row .input-data{
margin: 35px 0!important;
}
.submit-btn .input-data{
width: 40%!important;
}
}
Recommended: Responsive Accordion Menu using HTML and CSS
1 thought on “Responsive Contact Us Form using HTML and CSS”
We are excited to announce the release of New SEO Backlink service.
“SEO Campaigns” Real Results 1# On GOOGLE
SEO Campaigns come with fantastic features, as we will submit your website on the top worldwide websites with the most powerful domain authority.
Choose Your Campaign Package Based on Your Needs
https://www.fiverr.com/hrobey/do-manual-high-quality-dofollow-backlinks-seo-pyramid
Here is Few Results What Our customer achieved.
https://prnt.sc/YciiDJBzGOvo
https://prnt.sc/n2kXitVcSCp0
https://prnt.sc/i3s7v3ZXlfci
SEO backlinks Package start from $25 and 100% customer satisfaction guaranteed.
If your Need more details Contact through the fiverr.
https://www.fiverr.com/hrobey