Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a responsive contact section for web pages?
On a contact us page, you must have seen input fields to add your name, email-id, phone number, message, etc. A button is also placed for the user to submit the contact form. With that, some websites also add an image that aligns properly when the web browser is resized i.e., the responsiveness. Let us see how to create a responsive contact section for web pages on a website with CSS.
Set the contact image
Begin with the heading and set an image representing a contact us page −
<div class="contactCol"> <img class="contactImg" src="https://images.pexels.com/photos/326576/pexels-photo-326576.jpeg?auto=compress&cs=tinysrgb&w=600"/> </div>
Position the image
To position the contact image on the left, use the float property −
.contactCol {
float: left;
width: 35%;
margin-top: 6px;
padding: 20px;
}
Set the width and height of the contact image −
.contactImg {
width: 200px;
height: 200px;
}
Set a form for the contact fields
A form for the contact fields is set using the <form> element. A user who needs to contact should fill the first name, last name, email-id, and message fields. A submit button is also set for the users to submit the form using the <button> element −
<div class="contactCol">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name.."/>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name.."/>
<label for="country">Email Id</label>
<label for="subject">Message</label>
<textarea id="subject" name="subject" placeholder="Leave your message" style="height:170px"></textarea>
<input type="submit" value="Submit" />
</form>
</div>
Position the form fields
To position the form on the left, the float property is used −
.contactCol {
float: left;
width: 35%;
margin-top: 6px;
padding: 20px;
}
Set the responsiveness
The responsiveness is set using Media Queries. When the web browser is resized to less than 600px, the layout is changed. The width is set to 100% for the form and the submit button −
@media screen and (max-width: 600px) {
.contactCol, input[type="submit"] {
width: 100%;
margin-top: 0;
}
}
Example
To create a responsive contact section for web pages, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
input[type="text"], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
font-size: 18px;
}
input[type="submit"] {
background-color: rgb(139, 76, 175);
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
font-size: 18px;
}
label {
font-weight: bold;
}
.contactImg {
width: 200px;
height: 200px;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.contactForm {
margin: auto;
border-radius: 5px;
background-color: #d3d3d3;
padding: 10px;
max-width: 1000px;
}
.contactCol {
float: left;
width: 35%;
margin-top: 6px;
padding: 20px;
}
.contactSection:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.contactCol, input[type="submit"] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h1 style="text-align: center;">Responsive Contact Section Example</h1>
<div class="contactForm">
<div style="text-align:center">
<h2>Contact Us</h2>
</div>
<div class="contactSection">
<div class="contactCol">
<img class="contactImg" src="https://images.pexels.com/photos/326576/pexels-photo-326576.jpeg?auto=compress&cs=tinysrgb&w=600"/>
</div>
<div class="contactCol">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name.."/>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name.."/>
<label for="country">Email Id</label>
<label for="subject">Message</label>
<textarea id="subject" name="subject" placeholder="Leave your message" style="height:170px"></textarea>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</div>
</body>
</html>
126 Views
