→ Marcus Hendricks
→ Contact Form with Map Integration

Contact Form with Map Integration

A comprehensive contact form with integrated map for businesses looking to connect with their customers.

This Example is contributed by Marcus Hendricks, on 30-Mar-2025. It is responsive. similar terms for this example is Form Component

Form Contact Map

Author Marcus Hendricks

Fork Fullscreen

<div class="contact-container">
  <div class="contact-header">
    <h2>Get in Touch</h2>
    <p>We'd love to hear from you. Please fill out the form below or use our contact information.</p>
  </div>
  
  <div class="contact-content">
    <div class="contact-form">
      <form id="contactForm">
        <div class="form-group">
          <label for="name">Full Name</label>
          <input type="text" id="name" required>
        </div>
        
        <div class="form-group">
          <label for="email">Email Address</label>
          <input type="email" id="email" required>
        </div>
        
        <div class="form-group">
          <label for="phone">Phone Number</label>
          <input type="tel" id="phone">
        </div>
        
        <div class="form-group">
          <label for="subject">Subject</label>
          <input type="text" id="subject">
        </div>
        
        <div class="form-group">
          <label for="message">Message</label>
          <textarea id="message" rows="5" required></textarea>
        </div>
        
        <button type="submit" class="submit-btn">Send Message</button>
      </form>
    </div>
    
    <div class="contact-info">
      <div class="info-box">
        <div class="icon"><i class="fas fa-map-marker-alt"></i></div>
        <div class="detail">
          <h3>Our Location</h3>
          <p>123 Business Avenue, Suite 200<br>New York, NY 10001</p>
        </div>
      </div>
      
      <div class="info-box">
        <div class="icon"><i class="fas fa-phone-alt"></i></div>
        <div class="detail">
          <h3>Phone Number</h3>
          <p>+1 (555) 123-4567</p>
        </div>
      </div>
      
      <div class="info-box">
        <div class="icon"><i class="fas fa-envelope"></i></div>
        <div class="detail">
          <h3>Email Address</h3>
          <p>info@yourcompany.com</p>
        </div>
      </div>
      
      <div class="map-container">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215266154907!2d-73.98784492452366!3d40.75008347138465!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9aeb1c6b5%3A0x35b1cfbc89a6097f!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1682358200721!5m2!1sen!2sus" width="100%" height="200" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>
    </div>
  </div>
  
  <div id="formMessage" class="form-message"></div>
</div>

Related Examples