วิธีสร้างส่วนติดต่อ (Contact Section) แบบ Responsive

ส่วนติดต่อ (Contact Section) เป็นองค์ประกอบจำเป็นของทุกเว็บไซต์ ตัวอย่างนี้แสดงการสร้างฟอร์มติดต่อที่ปรับตัวตามขนาดหน้าจอได้ดี มีรูปภาพด้านซ้ายและฟอร์มด้านขวาบนเดสก์ท็อป และซ้อนกันแนวตั้งบนมือถือ

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <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: 300px; height: 300px; }
    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://i.picsum.photos/id/8/400/400.jpg"/>
      </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>

โครงสร้างหลัก

• .contactForm - คอนเทนเนอร์หลัก พื้นหลังสีเทาอ่อน มุมโค้งมน จำกัดความกว้างสูงสุด 1000px
• .contactSection - ใช้ Clearfix เพื่อจัดการ float ของคอลัมน์ลูก
• .contactCol - คอลัมน์แต่ละอัน (35% ความกว้าง) หนึ่งสำหรับรูปภาพ อีกหนึ่งสำหรับฟอร์ม
• @media (max-width: 600px) - ทำให้คอลัมน์และปุ่ม Submit กว้างเต็ม 100% บนมือถือ

คำอธิบายฟอร์ม

• ใช้ input[type="text"], textarea สำหรับรับข้อมูล
• placeholder ให้ตัวอย่างข้อมูลที่ควรกรอก
• resize: vertical ให้ผู้ใช้ปรับความสูงของ textarea ได้เฉพาะแนวตั้ง
• ปุ่ม Submit มีสีม่วง และเปลี่ยนเป็นสีเขียวเมื่อ hover