JetFormBuilder: Confirmation popup on form submission

gistfile1.txt

UPDATED: 23.08.2024

Description:
Copy the following JS code and create a JS snippet using your snippet plugins. 
Paste the code into the plugin and save it.

I have appended the submit button with a class name called submit_confirm.
The advantage of this class is that it will only affect the form that holds the submit_confirm class and not any other forms,
in case you have many forms. 

Remember to add the submit_confirm class to your respective submit buttons which need to work as pop ups.

This script integrates with JetFormBuilder to add a user-friendly confirmation popup when a 
form is submitted. Users are prompted with "Yes" or "No" options to confirm or cancel the submission. 
The form will only be submitted if "Yes" is selected. The script includes all necessary CSS within the 
JavaScript for easy customization.


______________________________________________-


document.addEventListener('DOMContentLoaded', function() {
    const submitButton = document.querySelector('.jet-form-builder__action-button');

    if (submitButton && submitButton.classList.contains('submit_confirm')) {
        submitButton.addEventListener('click', function(event) {
            event.preventDefault();  // Prevent the form from submitting immediately

            // Inject CSS styles for the popup
            const style = document.createElement('style');
            style.innerHTML = `
                .confirmation-popup-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.5);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 1000;
                }

                .confirmation-popup-content {
                    background: white;
                    padding: 20px;
                    border-radius: 8px;
                    text-align: center;
                }

                .confirmation-popup-content p {
                    margin-bottom: 20px;
                }

                .confirmation-popup-button {
                    padding: 10px 20px;
                    margin: 0 5px;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 14px;
                }

                .confirmation-popup-button.yes {
                    background: #4CAF50;
                    color: white;
                }

                .confirmation-popup-button.no {
                    background: #f44336;
                    color: white;
                }

                .confirmation-popup-button.yes:hover {
                    background: #45a049;
                }

                .confirmation-popup-button.no:hover {
                    background: #e53935;
                }
            `;
            document.head.appendChild(style);

            // Create the confirmation popup
            const confirmationPopup = document.createElement('div');
            confirmationPopup.className = 'confirmation-popup-overlay';

            const popupContent = document.createElement('div');
            popupContent.className = 'confirmation-popup-content';

            const message = document.createElement('p');
            message.textContent = 'Do you want to send it?';

            const yesButton = document.createElement('button');
            yesButton.textContent = 'Yes';
            yesButton.className = 'confirmation-popup-button yes';

            const noButton = document.createElement('button');
            noButton.textContent = 'No';
            noButton.className = 'confirmation-popup-button no';

            popupContent.appendChild(message);
            popupContent.appendChild(yesButton);
            popupContent.appendChild(noButton);
            confirmationPopup.appendChild(popupContent);
            document.body.appendChild(confirmationPopup);

            // Handle Yes button click
            yesButton.addEventListener('click', function() {
                document.body.removeChild(confirmationPopup);  // Remove the popup
                submitButton.closest('form').submit();  // Proceed with form submission
            });

            // Handle No button click
            noButton.addEventListener('click', function() {
                document.body.removeChild(confirmationPopup);  // Just remove the popup, do nothing else
            });
        });
    }
});

Awsome

Thank you, so useful!