Create method only working once when opening form inside of modal

Hi @zacharyjrich , Thanks for your message

Could you point me to the page where this is happening?

Best Regards

We don’t currently have a deployed link to where the issue is occurring since we reverted to version 8.7.7 to fix the issue, although that just happens to be the last version we had in our code base that worked as expected. The plugin had not been updated in a while but we noticed the breaking change when testing plugin updates on 6-27-22. Hope that helps, thanks!

hi @zacharyjrich Could you share what is thecustom code you are executing on your popup ? Which page builder are you using?

Best regards

We are not using a page builder. Here is the custom JS for the modal. Thanks!

/* global hbspt */
const modalDataAttr = 'data-modal';
const modalSelector = '.at-modal';
const modalContentSelector = '.modal-content-inner';
const modalCloseSelector = '.modal-background, .modal-close';
const activeClass = 'is-active';
const clippedClass = 'is-clipped';

document.addEventListener( 'DOMContentLoaded', () => {
    const ctas = document.querySelectorAll( '[' + modalDataAttr + ']' );
    const modal = document.querySelector( modalSelector );

    // If there are buttons for opening the modal
    if ( ctas.length && modal ) {
        const modalContent = modal.querySelector( modalContentSelector );

        // Get html DOM element to disable scrolling when the modal is open
        const html = document.querySelector( 'html' );

        const openModal = ( e ) => {
            e.preventDefault();
            const cta = e.currentTarget;
            const modalData = JSON.parse( atob( cta.getAttribute( modalDataAttr ) ) );

            switch ( modalData.type ) {
            case 'url':
                // Render modal content by loading an iframe
                modalContent.innerHTML = '
                    <figure class="image is-16by9">
                        <iframe
                            class="has-ratio"
                            src="${ modalData.url }"
                            frameborder="0"
                            allowfullscreen />
                    </figure>';
                break;
            case 'form':
                // Render HubSpot form via JS.
                // Advanced options: https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options
                hbspt.forms.create( {
                    portalId: modalData.portalId,
                    formId: modalData.id,
                    target: modalContentSelector,
                } );

                break;
            }

            // Add custom modal class.
            if ( modalData.class ) {
                modal.classList.add( ...modalData.class.split( ' ' ) );
            }

            // Add display classes
            modal.classList.add( activeClass );
            html.classList.add( clippedClass, activeClass );
        };

        const closeModal = () => {
            // Remove display classes
            modal.className = modal.getAttribute( modalDataAttr + '-default-classes' );
            html.classList.remove( clippedClass, activeClass );

            // Empty the modal content
            modalContent.innerHTML = '';
        };

        // Add listeners for each of the CTAs in the page
        ctas.forEach( ( cta ) => {
            cta.addEventListener( 'click', openModal );
        } );

        // Add listeners for closing the modal when clicking on the background or the close button
        modal.querySelectorAll( modalCloseSelector ).forEach( ( el ) => {
            el.addEventListener( 'click', closeModal );
        } );
    }
} );

Could you point me to the page where this is currently working?

Best regards

I am not able to share a link on this platform for confidentiality purposes. Would it make sense to contact Hubspot through your website support?

You can send us an email at wordpress-support-groups@hubspot.com

Best regards

Hi @zacharyjrich

The new script will require a unique dynamic identifier. I have adapted your code to the following

case 'form':
   // Render HubSpot form via JS.
   // Advanced options: https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options
   
   const containerId = "hs_form_" + Date.now(); // This will create an unique selector every time
   const container = document.createElement('div'); // create a container 
   container.id = containerId; // assign the dynamic id
   document.querySelector(modalContentSelector).appendChild(container); // append to the modal container

    hbspt.forms.create( {
       portalId: modalData.portalId,
       formId: modalData.id,
       target: "#" + containerId, // use the generated ID as target selector
    });
    break;
}

Let me know if you have any further questions

Thanks so much for all of your help finding a solution. Cheers!