3 Steps: How to Create a Custom Popup for JetFormBuilder Messages

The Problem with Standard Form Messages

Have you ever filled out a form, clicked “submit,” and then had to scroll back up the page to see if your submission was successful? This common issue can lead to a less-than-ideal user experience, as success or error messages can be easily missed.

Fortunately, there’s a simple, elegant solution. By using a custom HTML snippet, you can replace the standard inline messages with a modern, eye-catching popup. This ensures users are immediately notified of their form’s status without having to search for a hidden message.

In this guide, we’ll walk you through a simple and powerful solution to create a beautiful, custom popup for your JetFormBuilder success and error messages.

The Code: A Closer Look at Our Solution

The solution is comprised of two main parts: a CSS section for styling the popup and overlay, and a JavaScript section for controlling its behavior.

1. The CSS

The CSS code styles the two main elements: the semi-transparent overlay that blurs the background (#overlay) and the popup message box itself (#messagePopup). This code ensures the popup is centered on the page, looks great on all devices, and has a professional feel.

2. The HTML

The HTML is straightforward, containing two div elements for the overlay and the popup. The div with the ID #popupMessageContent is where your form’s success or error message will be dynamically displayed.

3. The JavaScript

This is where the magic happens. The JavaScript snippet, powered by jQuery, performs the following key functions:

Targets Specific Pages: It first checks if the current page slug is on a predefined list of target pages. This is a crucial feature that prevents the script from running on every page of your site.
Listens for Form Submission: It waits for a JetFormBuilder form to be submitted and then monitors for the success or error message.
Displays the Popup: Once a message is detected, it triggers a function that makes the popup and its content appear with a smooth animation.
Controls the Popup: It provides a closePopup() function, attached to a button, that allows users to easily dismiss the message.

How to Implement the Custom Popup on Your Site

Ready to improve your form’s user experience? Follow these simple steps to add this custom popup to your website.

Step 1: Create an HTML Snippet

First, copy the entire block of code provided below. You will need a snippet plugin or a theme’s custom code editor (like Elementor’s Custom Code feature) to add this to your site.

Go to your WordPress Dashboard.
Navigate to your preferred snippet plugin or theme settings.
Create a new HTML snippet and paste the code.
Save the snippet and make sure it’s active and set to display on the footer of your site.

Step 2: Customize Your Target Pages

Inside the <script> tag, you will find an array named targetPages.

JavaScript

var targetPages = ['contact1', 'contact2'];

You must update this array to include the slugs of the pages where your JetFormBuilder forms are located. Replace 'contact1' and 'contact2' with the slugs of your actual contact or submission pages. For example, if your contact page URL is yoursite.com/get-in-touch/, the slug is 'get-in-touch'. You can add as many slugs as you need.

Step 3: Save and Test

After you have updated the targetPages array, save your snippet. Clear any caching on your site and then visit one of your target pages. Submit your JetFormBuilder form, and you should now see a custom message popup instead of the standard inline text.

The Code to Copy

				
					
/* Overlay Styling */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 100;
    backdrop-filter: blur(5px) brightness(40%);
    display: none;
}
/* Popup Styling */
#messagePopup {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    z-index: 101;
    box-sizing: border-box;
    text-align: center;
    display: none;
    opacity: 0;
    top: 45%;
}
#popupMessageContent {
    margin-bottom: 20px;
}
#messagePopup button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#messagePopup button:hover {
    background-color: #0056b3;
}
@media (max-width: 1024px) {
    #messagePopup {
        width: 80%;
    }
}
@media (max-width: 767px) {
    #messagePopup {
        width: 90%;
    }
}

<div id="overlay"></div>
<div id="messagePopup">
    <div id="popupMessageContent"></div>
    <button>Lukk</button>
</div>


jQuery(document).ready(function($) {
    // Define an array of pages where the script should run
    var targetPages = ['contact1', 'contact2'];
        // Get the current page slug
    var currentSlug = window.location.pathname.split('/').filter(Boolean).pop();
        // Check if the current page's slug is in the targetPages array
    if (targetPages.includes(currentSlug)) {
        function openPopupWithMessage(messageText) {
            $('#popupMessageContent').text(messageText);
            $('#overlay').fadeIn(300);
            $('#messagePopup').css('top', '45%').show().animate({opacity: 1, top: "50%"}, 300);
        }
                window.closePopup = function() {
            $('#messagePopup').animate({opacity: 0, top: "45%"}, 300, function() {
                $(this).hide();
            });
            $('#overlay').fadeOut(300);
        };
                // Function to check and display form messages, triggered by form submission
        function checkAndDisplayFormMessages() {
            let successMessage = $('.jet-form-builder-message--success').text();
            let errorMessage = $('.jet-form-builder-message--error').text();
            if (successMessage || errorMessage) {
                let message = successMessage || errorMessage;
                openPopupWithMessage(message);
                $('.jet-form-builder-message--success, .jet-form-builder-message--error').hide();
            }
        }
                // Attach an event listener to form submission to ensure the popup only shows after submission
        $('form').on('submit', function(event) {
            $(document).ajaxComplete(function() {
                checkAndDisplayFormMessages(); // Check again after any AJAX call completes
            });
        });
    }
});

JetFormBuilder Drag & Drop File Upload: A Game-Changer for Your Forms in 2025

Faqs

Q1: Do I need to use Elementor to use this code?

A: This code is specifically designed for JetFormBuilder, which is a powerful form builder often used with Elementor but can work on any WordPress site.

Q2: What is a snippet plugin?

A: A snippet plugin, like Code Snippets or WPCode, allows you to safely add custom HTML, CSS, or JavaScript code to your WordPress site without editing your theme's files.

Q3: Can I customize the appearance of the popup?

A: Yes, you can easily change the colors, fonts, and other styles by modifying the CSS code within the tags.

Q4: Will this work with other form builders?

A: No, this code is specifically written to target the CSS classes used by JetFormBuilder (.jet-form-builder-message--success and .jet-form-builder-message--error). It will not work with other form builders like Contact Form 7 or Gravity Forms.

Q5: What if I don't want the script to run on a specific page?

A: The script will only run on the pages you explicitly add to the targetPages array. By default, it won't run on any other page, so you don't need to take any extra steps.