A responsive contact us page is an essential part of any website. It allows users to easily get in touch with the company or organization and ask questions or provide feedback. In this article, we will discuss the importance of a responsive contact us page and how to design one using HTML and CSS.
First and foremost, it is important to ensure that your contact us page is fully responsive. This means that it should be easily accessible and easy to use on any device, including smartphones and tablets. A responsive design ensures that your website is accessible to a wider audience, which can help to increase traffic and improve your search engine ranking. There are a few key elements that should be included on a contact us page.
These include a contact form, an email address, a phone number, and social media links. The contact form should be easy to fill out and submit, with clear instructions and labels for each field. It is also a good idea to include a map or directions to your physical location, if applicable. Designing a responsive contact us page using HTML and CSS requires a bit of coding knowledge. However, there are many resources available online that can help you to learn the basics. Once you have a solid understanding of HTML and CSS, you can use these languages to create a custom contact us page that meets the specific needs and style of your website.
Video Tutorial of Responsive Contact Us Page Design Using HTML CSS
The demo tutorial for creating a responsive contact us page design using HTML and CSS is available for your reference. If you find it boring, you can download or copy the code provided. To create this contact us page, you will need to create two files – one HTML file and one CSS file. Once you have these files, paste the provided code into them. Specifically, create an HTML document named “index.html” and paste the code into it. Remember to give the file an “.html” extension.
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>Get in Touch</title>
<!-- S-Tech04 -->
</head>
<body>
<div class="container">
<h2 class="title">Get In Touch</h2>
<form action="#">
<div class="input-field username">
<input type="text" id="username" name="username" placeholder="Username">
</div>
<div class="input-field subject">
<input type="text" id="subject" name="subject" placeholder="Subject">
</div>
<div class="input-field">
<input type="email" id="email" name="email" placeholder="Email">
</div>
<div class="input-field">
<textarea name="message" class="massage" placeholder="Type message here"></textarea>
</div>
<button type="submit" class="btn">SEND MESSAGE</button>
</form>
</div>
</body>
</html>
Next, create a CSS file named “style.css” and paste the provided code into it. Remember to give the file a “.css” extension.
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
background: #11141b;
}
.container
{
position: relative;
padding: 0 200px;
width: 100%;
height: 100%;
}
.container .title
{
position: relative;
width: 100%;
text-align: center;
font-size: 40px;
font-weight: 700;
text-transform: capitalize;
line-height: 1.3;
color: #fff;
padding-bottom: 20px;
}
.container .title::before
{
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
max-width: 300px;
margin: 0 auto;
background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgb(165,165,165),rgba(0,0,0,0));
}
.container form
{
margin-top: 60px;
margin-left: -15px;
margin-right: -15px;
display: flex;
flex-wrap: wrap;
}
.container form input,
.container form textarea
{
width: 100%;
padding: 15px 0;
color: #fff;
background: transparent;
border: none;
border-bottom: 1px solid #353535;
outline: none;
font-size: 14px;
font-weight: 400;
}
form .input-field
{
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 25px;
}
form input::placeholder,
form textarea::placeholder
{
font-size: 15px;
font-weight: 400;
}
form .input-field.username
{
flex: 0 0 50%;
max-width: 50%;
padding-right: 15px;
}
form .input-field.subject
{
flex: 0 0 50%;
max-width: 50%;
padding-left: 15px;
}
form .input-field textarea
{
height: 120px;
resize: vertical;
}
form .btn
{
position: relative;
display: inline-block;
padding: 15px;
font-size: 14px;
letter-spacing: 1px;
color: #fff;
background: transparent;
border: none;
outline: none;
cursor: pointer;
text-transform: uppercase;
}
form .btn::before
{
content: '';
position: absolute;
width: 50%;
height: 100%;
background: rgba(255,255,255,0.07);
top: 0;
left: 0;
transition: all 500ms ease;
}
form .btn:hover::before
{
width: 100%;
}
@media(max-width: 1125px){
.container
{
padding: 0 100px;
}
}
@media(max-width: 945px){
.container
{
padding: 0 50px;
}
form .input-field.username,
form .input-field.subject
{
flex: 0 0 100%;
max-width: 100%;
padding: 0;
}
}
With these steps, you have successfully created a responsive contact us page design using HTML and CSS. If you encounter any errors or issues, you can download the source code files by clicking on the provided download button. The files are available for free and will be downloaded as a .zip file. Extract the files once they are downloaded and use them to troubleshoot any issues you may have.
