Table of Contents
Introduction: Contact Us Page using HTML CSS
Crafting an engaging and functional ‘Contact Us’ page is vital for any website. Are you eager to learn how to create Contact Us Page using HTML CSS? This step-by-step guide will walk you through the process, empowering you to build a dynamic ‘Contact Us’ section that resonates with your audience.
In this beginner-friendly exploration, we’ll delve into the essential components necessary to construct a standout ‘Contact Us’ page. By following these straightforward instructions, you’ll be equipped to design and implement your own contact section seamlessly integrated into your website.
Get ready to embark on a journey where you’ll discover how to fashion an interactive ‘Contact Us’ page, enhancing your website’s user experience. No prior coding expertise is required—just your enthusiasm to learn and a desire to create a compelling web presence.
Steps to Create a Contact Us Page using HTML CSS:
Here are 3 Easy Steps to Create a Contact Us Page using HTML CSS –
Step 1: Prepare Your Workspace
Begin by creating a designated folder for your project. Inside this folder, generate two crucial files: index.html for your HTML structure and style.css for the styling of your ‘Contact Us’ page.
Step 2: HTML Structure
In your index.html file, input the provided HTML code. This code entails fundamental HTML elements ranging from forms to input fields. The inclusion of the “required” attribute in the input fields facilitates basic form validation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title>Contact us Page</title>
<script src="https://kit.fontawesome.com/c32adfdcda.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="main-section">
<div class="main-section-header">
<div class="main-container">
<h2>Contact Us</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.</p>
</div>
</div>
<div class="main-container">
<div class="main-row">
<div class="contact-info-section">
<div class="contact-info-item">
<div class="contact-info-icon">
<i class="fas fa-home"></i>
</div>
<div class="contact-info-content">
<h4>Address</h4>
<p>234-house New dehli,<br /> india </p>
</div>
</div>
<div class="contact-info-item">
<div class="contact-info-icon">
<i class="fas fa-phone"></i>
</div>
<div class="contact-info-content">
<h4>Phone</h4>
<p>9999XXXXXX</p>
</div>
</div>
<div class="contact-info-item">
<div class="contact-info-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-info-content">
<h4>Email</h4>
<p>thecodingkite@gmail.com</p>
</div>
</div>
</div>
<div class="contact-form-section">
<form action="" id="contact-form">
<h2>Send Message</h2>
<div class="input-container">
<input type="text" required="true" name="">
<span>Full Name</span>
</div>
<div class="input-container">
<input type="email" required="true" name="">
<span>Email</span>
</div>
<div class="input-container">
<textarea required="true" name=""></textarea>
<span>Type your Message...</span>
</div>
<div class="input-container">
<input type="submit" value="Send" name="">
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>Step 3: CSS Styling
Add the supplied CSS code to your style.css file. These CSS instructions encompass diverse properties that render the aesthetic finesse of your ‘Contact Us’ page. Adjustments such as background effects and form stylings are meticulously detailed to achieve an appealing layout.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
min-height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url(https://images.unsplash.com/photo-1702422578814-c27bea0b9cbf?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size: cover;
background-position: center;
position: relative;
}
body::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
.main-section {
position: relative;
z-index: 3;
padding-top: 50px;
padding-bottom: 50px;
}
.main-container {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
.main-section-header {
margin-bottom: 50px;
text-align: center;
}
.main-section-header h2 {
color: #FFF;
font-weight: bold;
font-size: 3em;
margin-bottom: 20px;
}
.main-section-header p {
color: #FFF;
}
.main-row {
display: flex;
flwx-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.contact-info-section {
width: 50%;
}
.contact-info-item {
display: flex;
margin-bottom: 30px;
}
.contact-info-icon {
height: 70px;
width: 70px;
background-color: #fff;
text-align: center;
border-radius: 50%;
}
.contact-info-icon i {
font-size: 30px;
line-height: 70px;
}
.contact-info-content {
margin-left: 20px;
}
.contact-info-content h4 {
color: #12d400;
font-size: 1.4em;
margin-bottom: 5px;
}
.contact-info-content p {
color: #FFF;
font-size: 1em;
}
.contact-form-section {
background-color: #fff;
padding: 40px;
width: 45%;
padding-bottom: 20px;
padding-top: 20px;
}
.contact-form-section h2 {
font-weight: bold;
font-size: 2em;
margin-bottom: 10px;
color: #333;
}
.input-container {
position: relative;
width: 100%;
margin-top: 10px;
}
.input-container input,
.input-container textarea {
width: 100%;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
border: none;
border-bottom: 2px solid #333;
outline: none;
resize: none;
}
.input-container span {
position: absolute;
left: 0;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
pointer-events: none;
transition: 0.5s;
color: #666;
}
.input-container input:focus~span,
.input-container textarea:focus~span {
color: #e91e63;
font-size: 12px;
transform: translateY(-20px);
}
.input-container input[type="submit"] {
width: 100%;
background: #12d400;
color: #FFF;
border: none;
cursor: pointer;
padding: 10px;
font-size: 18px;
border: 1px solid #12d400;
transition: 0.5s;
}
.input-container input[type="submit"]:hover {
background: #FFF;
color: #12d400;
}
@media (max-width: 991px) {
.main-section {
padding-top: 50px;
padding-bottom: 50px;
}
.main-row {
flex-direction: column;
}
.contact-info-section {
margin-bottom: 40px;
width: 100%;
}
.contact-form-section {
width: 100%;
}
}Conclusion and Parting Thoughts:
In wrapping up, we’ve traversed through the sequential setup of your project, establishment of the HTML framework, and the infusion of CSS styles to shape a captivating ‘Contact Us’ page. By following these outlined steps, you’re now equipped to fashion your own rendition of an engaging ‘Contact Us’ section.
Remember, personalization is key! Feel free to experiment and infuse your unique touch to make your ‘Contact Us’ page resonate with your website’s aesthetic. To further hone your HTML and CSS skills, consider exploring additional web components and designs available on this platform.
Creating a Contact Us page using HTML CSS doesn’t just end here—it’s a springboard for you to embark on more intricate and personalized web projects. Embrace this foundation and let your creativity flourish in crafting immersive and interactive web experiences.
For your benefit, the total source code of this instructional exercise is accessible for download by clicking the Download Code button. Moreover, experience a live exhibit of these Contact Us Page using HTML CSS by getting to the View Live button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in HTML & CSS, we recommend recreating other useful website elements such as Card Design, Registration Forms, Navigation, Login Forms, etc.
