→ Amelia Chen
→ Contact Us Section with Newsletter Signu...

Contact Us Section with Newsletter Signup

This Example is contributed by Amelia Chen, on 12-Feb-2025. It is responsive.

Contact Form Newsletter Signup Social Proof

<section class="pre-footer-contact">
 <div class="container">
 <h2>Get in Touch</h2>
 <p class="tagline">We'd love to hear from you.  Contact us or sign up for our newsletter.</p>

<div class="contact-form-wrapper">
 <h3>Contact Us</h3>
 <form>
 <div class="form-group">
 <label for="name">Name:</label>
 <input type="text" id="name" name="name" required>
 </div>
 <div class="form-group">
 <label for="email">Email:</label>
 <input type="email" id="email" name="email" required>
 </div>
 <div class="form-group">
 <label for="message">Message:</label>
 <textarea id="message" name="message" required></textarea>
 </div>
 <button type="submit" class="btn btn-primary">Send Message</button>
 </form>
 </div>
 <div class="newsletter-form-wrapper">
 <h3>Subscribe to Our Newsletter</h3>
 <form>
 <div class="form-group">
 <label for="newsletter-email">Email:</label>
 <input type="email" id="newsletter-email" name="newsletter-email" required>
 </div>
 <button type="submit" class="btn btn-secondary">Subscribe</button>
 </form>

<div class="social-proof">
 <p>Trusted by 10,000+ happy customers!</p>
 <div class="social-icons">
 <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>
 </div>

</div>
</section>

Related Examples