How to Add Popup Enquiry Form in WordPress Without Plugins

Most WordPress users install heavy popup plugins just to show a small enquiry form. The truth is, you don’t need one. With a little HTML, CSS, and JavaScript, you can build a lightweight popup enquiry form that works inside Gutenberg or Elementor. This approach keeps your website fast and avoids unnecessary plugin bloat.

In this guide, I’ll show you step by step how to create a popup enquiry form for something like a KCompany Name. You can use the same method for any service, product, or lead generation form.

Step 1: Add the HTML Popup Structure

First, copy this HTML code and paste it into a Custom HTML block in Gutenberg or Elementor.

<div id="enquiry-popup" class="popup-overlay">
  <div class="popup-content">
    <span id="close-popup" class="popup-close">&times;</span>
    <div class="popup-left">
      <h2>Company Name hedline</h2>
      <p>Get your best travel deals. Fill the form and we will contact you!</p>
      <!-- Contact Form 7 Shortcode -->
[xxx-fffad-ssssssss]
</div> <div class="popup-right"> 
<img src="image-link"> 
</div> </div> </div>

👉 Replace image-link with your own tour or product image. If you’re not using Contact Form 7, you can place a simple <form> inside instead.

👉 Where to place it:

• If you want the popup to appear only on a specific page, paste this into a Custom HTML block inside Gutenberg or Elementor on that page.
• If you want the popup to appear on all pages, add this code in your Footer Widget area (via Widgets or Elementor footer template).

Step 2: Add the CSS in WPCode Snippet (or Theme Customizer)

Go to Appearance > Customize > Additional CSS or use the WPCode Snippet plugin (CSS type) and paste:

.popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.popup-content {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 12px;
  max-width: 900px;
  width: 90%;
  height: 600px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0,0,0,0.2);
  position: relative;
}

.popup-left {
  flex: 1 1 50%;
  padding: 30px;
  background: #fff;
  overflow-y: auto;
}

.popup-left h2 { font-size: 28px; margin-bottom: 15px; color: #4482FF; }
.popup-left p { font-size: 16px; margin-bottom: 20px; color: #1E202A; }

.popup-left .trip-btn {
  width: 100%;
  padding: 12px;
  border-radius: 999px;
  border: none;
  background: #4482FF;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.popup-right { flex: 1 1 50%; }
.popup-right img { width: 100%; height: 100%; object-fit: cover; }

.popup-close {
  position: absolute;
  top: 15px; right: 15px;
  font-size: 24px;
  cursor: pointer;
  background: red;
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
}

/* Responsive */
@media(max-width:1024px){
  .popup-right { display: none; }
  .popup-left { flex: 1 1 100%; height: auto; }
  .popup-content { height: auto; }
}

This CSS handles the layout, background, responsive behavior, and close button styling.

Step 3: Add the JavaScript in WPCode Snippet (or Footer Script)

Now paste this script in a JavaScript snippet or inside your theme’s footer.

document.addEventListener("DOMContentLoaded", function() {
  const popup = document.getElementById("enquiry-popup");
  const closeBtn = document.getElementById("close-popup");

  // Show popup after 5 seconds
  setTimeout(function() {
    popup.style.display = "flex";
  }, 5000);

  // Close on × click
  closeBtn.addEventListener("click", function() {
    popup.style.display = "none";
  });

  // Close when clicking outside content
  window.addEventListener("click", function(e) {
    if(e.target == popup){
      popup.style.display = "none";
    }
  });
});

This script makes the popup appear automatically after 5 seconds. Visitors can close it by clicking the red button or anywhere outside the popup box.

Step 4: Test and Adjust

1. Open your page in a new tab.
2. Wait 5 seconds—the popup should appear.
3. Try resizing your browser to mobile view. The right image column will hide for better usability.
4. If you want the popup to appear on button click instead of auto-load, you can remove the setTimeout part and trigger it with JavaScript on button press.

Why This Method Works Better

• No extra plugins → Faster loading speed.
• Full control → You can style or position it however you like.
• Reusable → Use the same snippet on multiple pages.
• Form integration → Works with Contact Form 7, WPForms, or even a custom HTML form.

Conclusion

That’s it. You’ve created a popup enquiry form in WordPress without relying on bulky plugins. The process is simple:

• Add HTML in Gutenberg/Elementor
• Add CSS in snippets or Customizer
• Add JavaScript in snippets or footer

Now you have a clean, lightweight popup that works for travel packages, product enquiries, or any service you want to promote.