Chat with offline contact form - this is focused on Fluent Forms

gistfile1.txt

add_action('wp_footer', function () {
    ?>
    <style>
        /* Chat bubble styling */
        .custom-chat-bubble {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #2563eb;
            color: #fff;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex !important;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            z-index: 9999;
            transition: background 0.3s;
        }
        .custom-chat-bubble:hover { background: #1e40af; }

        /* Chat window styling */
        .custom-chat-window {
            position: fixed;
            bottom: 90px;
            right: 20px;
            width: 350px;
            max-width: 95%;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
            display: none; /* hidden by default */
            flex-direction: column;
            overflow: hidden;
            z-index: 10000;
        }
        .custom-chat-window.active { display: flex; }

        /* Chat header */
        .custom-chat-header {
            background: #2563eb;
            color: #fff;
            padding: 12px 16px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .custom-chat-header span { cursor: pointer; font-size: 20px; }

        /* Chat body */
        .custom-chat-body {
            padding: 15px;
            font-size: 14px;
            color: #333;
            max-height: 450px;
            overflow-y: auto;
        }
        .custom-chat-body p { margin-bottom: 10px; }
    </style>

    <!-- Chat bubble -->
    <div class="custom-chat-bubble" id="customChatToggle">💬</div>

    <!-- Chat window -->
    <div class="custom-chat-window" id="customChatWindow">
        <div class="custom-chat-header">
            Legg igjen en melding
            <span id="customChatClose">&times;</span> <!-- Close button -->
        </div>
        <div class="custom-chat-body">
            <!-- Intro text above form -->
            <p id="chatIntro">
                Takk for at du tar kontakt!<br>
                Legg igjen din kontaktinformasjon her, og jeg tar kontakt når jeg har ledig tid.
            </p>
            <!-- Form container -->
            <div id="formContainer">
                <?php echo do_shortcode('[fluentform id="1"]'); ?>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const toggle = document.getElementById("customChatToggle"); // Bubble to open chat
            const windowBox = document.getElementById("customChatWindow"); // Chat window
            const close = document.getElementById("customChatClose"); // X button
            const chatIntro = document.getElementById("chatIntro"); // Intro text <p>
            const formContainer = document.getElementById("formContainer"); // Form container
            const formShortcode = formContainer.innerHTML; // Save original form HTML

            // Toggle chat window on bubble click
            toggle.addEventListener("click", () => windowBox.classList.toggle("active"));

            // Close chat window
            close.addEventListener("click", () => {
                windowBox.classList.remove("active");

                // Reset the form by restoring original HTML
                formContainer.innerHTML = formShortcode;

                // Show the intro text again
                chatIntro.style.display = "block";

                // Re-add submit listener for new form instance
                const newForm = formContainer.querySelector("form");
                if (newForm) {
                    newForm.addEventListener("submit", () => {
                        // Hide intro text immediately on submission
                        chatIntro.style.display = "none";
                    });
                }
            });

            // Initial submit listener for first form instance
            const form = formContainer.querySelector("form");
            if (form) {
                form.addEventListener("submit", () => {
                    // Hide intro text when the user submits
                    chatIntro.style.display = "none";
                });
            }
        });
    </script>
    <?php
});

If you switch to another plugin (like Contact Form 7, WPForms, Formidable, etc.):
You’d just need to swap out the event listener and adjust how the form is reset.
Example with Contact Form 7:

document.addEventListener("wpcf7mailsent", function(e) {
// hide intro, reset bubble, etc.
});

Example with WPForms:

jQuery(document).on("wpformsAjaxSubmitSuccess", function(e, formId) {
// same reset behavior
});

Everything else — chat bubble design, intro text logic, animations — will work the same with any form plugin.

Here’s a generic version of your chat bubble code that works with multiple popular WordPress form plugins. I’ve added comments so you can switch the integration by simply commenting/uncommenting the right event listener.

`add_action('wp_footer', function () {
?>
<style>
/* Chat bubble styles */
.custom-chat-bubble {
position: fixed;
bottom: 20px;
right: 20px;
background: #2563eb;
color: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
z-index: 9999;
transition: background 0.3s;
}
.custom-chat-bubble:hover { background: #1e40af; }

    /* Chat window styles */
    .custom-chat-window {
        position: fixed;
        bottom: 90px;
        right: 20px;
        width: 350px;
        max-width: 95%;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        display: none;
        flex-direction: column;
        overflow: hidden;
        z-index: 10000;
    }
    .custom-chat-window.active { display: flex; }

    .custom-chat-header {
        background: #2563eb;
        color: #fff;
        padding: 12px 16px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .custom-chat-header span { cursor: pointer; font-size: 20px; }

    .custom-chat-body {
        padding: 15px;
        font-size: 14px;
        color: #333;
        max-height: 450px;
        overflow-y: auto;
    }
    .custom-chat-body p { margin-bottom: 10px; }
</style>

<!-- Chat Bubble -->
<div class="custom-chat-bubble" id="customChatToggle">💬</div>

<!-- Chat Window -->
<div class="custom-chat-window" id="customChatWindow">
    <div class="custom-chat-header">
        Legg igjen en melding
        <span id="customChatClose">&times;</span>
    </div>
    <div class="custom-chat-body">
        <p id="chatIntro">
            Takk for at du tar kontakt!<br>
            Legg igjen din kontaktinformasjon her, og jeg tar kontakt når jeg har ledig tid.
        </p>
        <?php echo do_shortcode('[fluentform id="1"]'); ?>
        <!-- Swap shortcode if using CF7, WPForms, Formidable, etc. -->
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const toggle = document.getElementById("customChatToggle");
        const windowBox = document.getElementById("customChatWindow");
        const close = document.getElementById("customChatClose");
        const chatIntro = document.getElementById("chatIntro");
        const form = document.querySelector("#customChatWindow form");

        // Open/close handlers
        toggle.addEventListener("click", () => {
            windowBox.classList.toggle("active");
            if (!windowBox.classList.contains("active") && form) {
                // Reset form + restore intro on close
                form.reset();
                if (chatIntro) chatIntro.style.display = "block";
            }
        });
        close.addEventListener("click", () => {
            windowBox.classList.remove("active");
            if (form) form.reset();
            if (chatIntro) chatIntro.style.display = "block";
        });

        // --- FORM SUBMISSION LISTENERS ---

        // ✅ Fluent Forms
        document.addEventListener("fluentformsubmission", function () {
            if (chatIntro) chatIntro.style.display = "none"; // hide intro on submit
        });

        // ✅ Contact Form 7
        // document.addEventListener("wpcf7mailsent", function () {
        //     if (chatIntro) chatIntro.style.display = "none";
        // });

        // ✅ WPForms
        // jQuery(document).on("wpformsAjaxSubmitSuccess", function() {
        //     if (chatIntro) chatIntro.style.display = "none";
        // });

        // ✅ Formidable Forms
        // jQuery(document).on("frmFormComplete", function() {
        //     if (chatIntro) chatIntro.style.display = "none";
        // });

    });
</script>
<?php

});
`