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>

Updated on: 08-Dec-2023

145 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements