→ Anonymous
→ Contact Information and Inquiry Form

Contact Information and Inquiry Form

This Example is contributed by Anonymous, on 23-Apr-2025. It is responsive.

Form Validation Contact Form Split-layout Business Info

<div class="contact-container">
  <div class="contact-info">
    <h2>Contact Information</h2>
    <div class="info-item">
      <span class="icon"><i class="fas fa-map-marker-alt"></i></span>
      <div>
        <h3>Our Location</h3>
        <p>123 Business Avenue, Suite 456<br>New York, NY 10001</p>
      </div>
    </div>
    <div class="info-item">
      <span class="icon"><i class="fas fa-phone-alt"></i></span>
      <div>
        <h3>Phone Number</h3>
        <p>+1 (555) 123-4567</p>
      </div>
    </div>
    <div class="info-item">
      <span class="icon"><i class="fas fa-envelope"></i></span>
      <div>
        <h3>Email Address</h3>
        <p>info@yourcompany.com</p>
      </div>
    </div>
    <div class="info-item">
      <span class="icon"><i class="fas fa-clock"></i></span>
      <div>
        <h3>Business Hours</h3>
        <p>Monday - Friday: 9am - 5pm<br>Weekend: Closed</p>
      </div>
    </div>
    <div class="social-media">
      <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
      <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
      <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
      <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
    </div>
  </div>
  
  <div class="contact-form">
    <h2>Send Us a Message</h2>
    <form id="inquiryForm">
      <div class="form-group">
        <label for="name">Full Name</label>
        <input type="text" id="name" name="name" placeholder="Your name" required>
      </div>
      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" id="email" name="email" placeholder="Your email" required>
      </div>
      <div class="form-group">
        <label for="phone">Phone Number</label>
        <input type="tel" id="phone" name="phone" placeholder="Your phone number">
      </div>
      <div class="form-group">
        <label for="subject">Subject</label>
        <input type="text" id="subject" name="subject" placeholder="Message subject" required>
      </div>
      <div class="form-group">
        <label for="message">Your Message</label>
        <textarea id="message" name="message" rows="5" placeholder="How can we help you?" required></textarea>
      </div>
      <div class="form-group">
        <button type="submit" class="submit-btn">Send Message</button>
      </div>
    </form>
  </div>
</div>

Related Examples