Post-Load Form Injection | Add hook for form rediscovery

[krebil]

Description:

When forms are injected onto the page after the initial load, there isn't a straightforward method to apply the Umbraco Forms script to these forms. This issue arises commonly when using libraries like HTMX or Hotwire/Turbo that fetches HTML and injects it into the DOM.

Impact:

Newly added forms lack full validation functionality. Conditional logic field within these forms wont work.

My ramblings:

If we had an event we could trigger after a form has been added, that could be very helpful.

I have previously overcome this by resetting the forms script's src attribute to retrigger discovery. I tried hooking into the script in other ways but ran into issues with duplicate event listeners.

window.addEventListener("htmx:afterSettle", (event) => {
    document.querySelectorAll("[src*=UmbracoForms][src*=App_Plugins]").forEach((el) => {
        let url = new URL(el.src)
        el.src = "";
        el.src = url.origin + url.pathname;
    })
})