→ Elara
→ Simple CSS Modal Contact Form Using Fabf...

Simple CSS Modal Contact Form Using Fabform.io

A lightweight popup contact form modal that integrates with Fabform.io for easy form submissions without server-side code.

This Example is contributed by Elara, on 08-Apr-2025. It is responsive. similar terms for this example are Form Component,popup,dialog

Form Modal Contact FabForm

Author Elara

Fork Fullscreen

<div class="contact-container">
  <button id="openContactModal" class="contact-btn">Contact Us</button>
  
  <div id="contactModal" class="modal">
    <div class="modal-content">
      <span class="close-btn">&times;</span>
      <h2>Get in Touch</h2>
      <form id="contactForm" action="https://fabform.io/f/YOUR_FORM_KEY_HERE" method="post">
        <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="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>
        
        <div class="form-group">
          <button type="submit" class="submit-btn">Send Message</button>
        </div>
      </form>
    </div>
  </div>
</div>

Related Examples

Didn't find component you were looking for?

Search from 500+ components