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.