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.

1 Answer 1


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() {

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.