<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Contact Us</title>
  <style>
    /* Reset some default styles */
    *, *::before, *::after {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f5f5f5;
      color: #333;
      line-height: 1.6;
    }
    h1 {
      text-align: center;
      margin-bottom: 1rem;
      color: #222;
    }
    .container {
      max-width: 1200px;
      margin: 2rem auto;
      padding: 1rem;
      background: white;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      border-radius: 8px;
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
    }

    /* Two column layout */
    .left, .right {
      flex: 1 1 450px; /* grow, shrink, basis */
      min-width: 300px;
    }

    /* Map styling */
    .map {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      height: 400px;
    }
    .map iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* Form styles */
    form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 1rem;
    }
    label {
      font-weight: 600;
      margin-bottom: 0.25rem;
      display: block;
    }
    select, input[type="text"], input[type="email"], textarea {
      width: 100%;
      padding: 0.5rem;
      font-size: 1rem;
      border: 1.5px solid #ccc;
      border-radius: 5px;
      transition: border-color 0.3s ease;
      font-family: inherit;
    }
    select:focus, input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
      outline: none;
      border-color: #007BFF;
    }
    textarea {
      min-height: 120px;
      resize: vertical;
    }
    button {
      cursor: pointer;
      background-color: #007BFF;
      color: white;
      border: none;
      padding: 0.75rem;
      font-size: 1.1rem;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #0056b3;
    }

    /* Responsive adjustments */
    @media (max-width: 900px) {
      .container {
        flex-direction: column;
      }
      .left, .right {
        min-width: 100%;
      }
      .map {
        height: 300px;
      }
    }
  </style>
</head>
<body>
  <main>
    <h1>Contact Us</h1>
    <div class="container">
      <section class="left">
        <div class="map" aria-label="Google Map showing our location">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.086696314843!2d-122.41941508468114!3d37.77492977975957!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085809c5a994215%3A0x6f8a29d15e9f35f6!2sSan%20Francisco!5e0!3m2!1sen!2sus!4v1692926395209!5m2!1sen!2sus"
            allowfullscreen=""
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            title="Google Map"
          ></iframe>
        </div>
      </section>
      <section class="right">
        <form id="contactForm" novalidate>
          <label for="title">Title</label>
          <select id="title" name="title" required>
            <option value="" disabled selected>Select a title</option>
            <option value="General Inquiry">General Inquiry</option>
            <option value="Support">Support</option>
            <option value="Feedback">Feedback</option>
            <option value="Others">Others</option>
          </select>

          <label for="content">Content</label>
          <textarea id="content" name="content" placeholder="Write your message here..." required></textarea>

          <label for="name">Name</label>
          <input type="text" id="name" name="name" placeholder="Your full name" required />

          <label for="contactNumber">Contact Number</label>
          <input type="text" id="contactNumber" name="contactNumber" placeholder="e.g. <PRESIDIO_ANONYMIZED_PHONE_NUMBER>" pattern="^\+?[0-9\-\s]{7,15}$" />

          <label for="email">Email</label>
          <input type="email" id="email" name="email" placeholder="your.email@example.com" required />

          <button type="submit">Send Message</button>
        </form>
      </section>
    </div>
  </main>

  <script>
    const form = document.getElementById('contactForm');

    form.addEventListener('submit', function(event) {
      event.preventDefault();

      // Basic validation
      const title = form.title.value;
      const content = form.content.value.trim();
      const name = form.name.value.trim();
      const contactNumber = form.contactNumber.value.trim();
      const email = form.email.value.trim();

      if (!title) {
        alert('Please select a title.');
        form.title.focus();
        return;
      }
      if (!content) {
        alert('Content is required.');
        form.content.focus();
        return;
      }
      if (!name) {
        alert('Please enter your name.');
        form.name.focus();
        return;
      }
      if (!email) {
        alert('Please enter your email.');
        form.email.focus();
        return;
      }
      // Basic email format check - additional can be added
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailPattern.test(email)) {
        alert('Please enter a valid email address.');
        form.email.focus();
        return;
      }
      // Contact number is optional, but if entered, validate pattern
      if (contactNumber) {
        const contactPattern = /^\+?[0-9\-\s]{7,15}$/;
        if (!contactPattern.test(contactNumber)) {
          alert('Please enter a valid contact number or leave it empty.');
          form.contactNumber.focus();
          return;
        }
      }

      // Normally here you'd send the data via AJAX or form submit
      alert('Thank you for contacting us, ' + name + '! Your message has been received.');
      form.reset();
    });
  </script>
</body>
</html>

Above code for contact page
please update to traditional chinese.
To avoid any conflict with other styling, please add the new-contact-page prefix to all element class and id