Cognito-forms – Disable embedded form style sheet

cognito-forms

I have an embedded Cognito form on my website using code similar to:

 div class="cognito"><script >src="https://services.cognitoforms.com/s/***"></script><script>// <![CDATA[
Cognito.load("forms", { id: "1" });
// ]]></script></div>

Is there a way to disable the style that is loaded on the page?

I appreciate being able to theme my forms, but I prefer to just use my site's defaults, and not have to override everything in my site's style sheet.

I expect there is something like:

Cognito.load("forms", { id: "1", stylesheet: "disabled" });

but I cannot find any documentation for all the available JavaScript configuration flags.

Best Answer

So I found a solution, I use a JavaScript "MutationObserver" to tell me when the form is loaded, and then I use jQuery to remove the style#theme block that loads with the form.

<div class="cognito"><script src="https://services.cognitoforms.com/s/***"></script><script>// <![CDATA[
function formLoaded() {
$("style#theme").remove();
}

    var target = document.getElementsByClassName("cognito")[0];
    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            if (Cognito.config.isReady){
                observer.disconnect(); // stop observing
                formLoaded();
            };
        });
    });

    var config = { attributes: true, childList: true };


    observer.observe(target, config);
Cognito.load("forms", { id: "1" });
// ]]></script></div>
Related Topic