→ Jorrit
→ Contact Us Page with Form and Map

Contact Us Page with Form and Map

A complete contact us page featuring a contact form, company information, and an interactive map for easy location finding.

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

Form Contact Map Business

Author Jorrit

Fork Fullscreen

<div class="contact-container">
  <div class="contact-header">
    <h1>Contact Us</h1>
    <p>We'd love to hear from you. Reach out to us with any questions or inquiries.</p>
  </div>

<div class="contact-content">
    <div class="contact-info">
      <h2>Contact Information</h2>
      <div class="info-item">
        <span class="icon"><i class="fas fa-map-marker-alt"></i></span>
        <p>123 Business Avenue, Suite 456<br>New York, NY 10001</p>
      </div>
      <div class="info-item">
        <span class="icon"><i class="fas fa-phone"></i></span>
        <p>+1 (555) 123-4567</p>
      </div>
      <div class="info-item">
        <span class="icon"><i class="fas fa-envelope"></i></span>
        <p>info@yourcompany.com</p>
      </div>
      <div class="info-item">
        <span class="icon"><i class="fas fa-clock"></i></span>
        <p>Monday - Friday: 9:00 AM - 5:00 PM<br>Saturday: 10:00 AM - 2:00 PM<br>Sunday: Closed</p>
      </div>
      
      <div class="social-links">
        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
      </div>
    </div>

<div class="contact-form">
      <h2>Send Us a Message</h2>
      <form id="contactForm">
        <div class="form-group">
          <div class="input-group">
            <input type="text" id="name" name="name" placeholder="Your Name" required>
            <input type="email" id="email" name="email" placeholder="Your Email" required>
          </div>
        </div>
        <div class="form-group">
          <input type="text" id="subject" name="subject" placeholder="Subject" required>
        </div>
        <div class="form-group">
          <textarea id="message" name="message" placeholder="Your Message" rows="5" required></textarea>
        </div>
        <button type="submit" class="submit-btn">Send Message</button>
      </form>
    </div>
  </div>

<div class="map-container">
    <h2>Our Location</h2>
    <div class="map" id="map">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.9663095989797!2d-74.0059413846455!3d40.71277797932946!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a165bedbbab%3A0x2cb2ddf003b5ae01!2sWall%20St%2C%20New%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1600000000000!5m2!1sen!2s" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>
  </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

Related Examples