→ Anonymous
→ Dual-Panel Contact Us Page with Map Inte...

Dual-Panel Contact Us Page with Map Integration

This Example is contributed by Anonymous, on 24-Mar-2025. It is responsive.

Contact Form Map Integration Geolocation Business Information

<div class="contact-container">
  <div class="contact-info">
    <h2>Contact Us</h2>
    <p>We'd love to hear from you. Fill out the form below or use our contact information.</p>
    
    <form id="contactForm">
      <div class="form-group">
        <label for="name">Full Name</label>
        <input type="text" id="name" name="name" required>
      </div>
      
      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" id="email" name="email" required>
      </div>
      
      <div class="form-group">
        <label for="phone">Phone Number</label>
        <input type="tel" id="phone" name="phone">
      </div>
      
      <div class="form-group">
        <label for="subject">Subject</label>
        <input type="text" id="subject" name="subject" required>
      </div>
      
      <div class="form-group">
        <label for="message">Message</label>
        <textarea id="message" name="message" rows="5" required></textarea>
      </div>
      
      <button type="submit" class="submit-btn">Send Message</button>
    </form>
    
    <div class="contact-details">
      <div class="detail-item">
        <div class="icon">📍</div>
        <div>
          <h3>Address</h3>
          <p>123 Business Avenue, Suite 200<br>New York, NY 10001</p>
        </div>
      </div>
      
      <div class="detail-item">
        <div class="icon">📱</div>
        <div>
          <h3>Phone</h3>
          <p>+1 (555) 123-4567</p>
        </div>
      </div>
      
      <div class="detail-item">
        <div class="icon">✉️</div>
        <div>
          <h3>Email</h3>
          <p>info@yourcompany.com</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="map-container">
    <div id="map"></div>
  </div>
</div>

Related Examples