Cambiar los colores de los iframes de Hubspot

 Son muchos los servicios que usan iframes para cargar contenido desde oro sitio. Un ejemplo sería Hubspot que tiene una versión gratuita hasta los 2000 contactos pero que no deja cambiar los colores de los campos del formulario.

Esto se puede solucionar vía javascript inyectando css directamente al iframe. Vamos a ver las formas que hay para hacerlo:

Con Jquery:

setTimeout(function(){

var head = jQuery("#hs-form-iframe-0").contents().find("head");
var css = '<style type="text/css">' +
'.hs-button {' +
          'border-color: #ffffff !important;' +
'background-color: #ffffff !important;'+
'color:#007396 !important;}'+
          '.hubspot-link__container{display:none;} label{color:#ffffff;} a{color:#ffffff !important;}</style>';

jQuery(head).append(css);

}, 1100);
});

Con Vanilla JS

<pre>

setTimeout(function(){

   let myiFrame = document.getElementById("hs-form-iframe-0");

   let doc = myiFrame.contentDocument;

   doc.body.innerHTML = doc.body.innerHTML + '<style>.hs-button {border-color: #ffffff !important; background-color: #ffffff !important; color:#007396 !important;} .hubspot-link__container{display:none;} label{color:#ffffff;} a{color:#ffffff !important;}</style>';

   }, 1100);

});

}</pre>

También se puede enlazar un fichero css:

<pre>window.onload = function() {

  let link = document.createElement("link");

  link.href = "style.css";      /**** your CSS file ****/ 

  link.rel = "stylesheet"; 

  link.type = "text/css"; 

  frames[0].document.head.appendChild(link); /**** 0 is an index of your iframe ****/ 

}</pre>

Cambiando el nombre del ID del iframe podéis atacar cualquier iframe ya sea el de un chat o cualquier otro servicioo que tengáis enveustra página web.

Otra forma actualizada para 2026:

// Función principal que espera a que el DOM esté listo
function iniciarObservador() {
    // Observa cambios en todo el cuerpo de la página
    const observador = new MutationObserver(function(mutaciones) {
        // Busca el iframe por su ID en cada cambio
        const myiFrame = document.getElementById('hs-form-iframe-0');
        
        // Si el iframe YA EXISTE en el DOM
        if (myiFrame) {
            console.log('✅ Iframe de HubSpot encontrado. Aplicando estilos...');
            
            // 1. Aplicar estilos al iframe (altura del contenedor, no 620px fijo)
            myiFrame.style.height = '100%'; // Así se adapta a su contenedor
            myiFrame.style.width = '100%';
            myiFrame.style.border = 'none';

            // 2. Intentar inyectar estilos DENTRO del iframe (su contenido)
            try {
                // Esperar un momento a que el contenido interno del iframe se cargue
                setTimeout(() => {
                    try {
                        const iframeDoc = myiFrame.contentDocument || myiFrame.contentWindow.document;
                        if (iframeDoc && iframeDoc.body) {
                            // Inyectar CSS personalizado dentro del iframe
                            const estilos = `
                                
                            `;
                            iframeDoc.body.insertAdjacentHTML('beforeend', estilos);
                            console.log('✅ Estilos inyectados dentro del iframe.');
                        } else {
                            console.warn('⚠️ No se pudo acceder al documento del iframe.');
                        }
                    } catch (errorInner) {
                        console.error('❌ Error al inyectar estilos en el iframe:', errorInner);
                    }
                }, 500); // Pequeño retraso para asegurar que el DOM interno del iframe exista
                
            } catch (error) {
                console.error('❌ Error al acceder al iframe:', error);
            }

            // 3. Una vez aplicado, desconectamos el observador para no seguir escuchando
            observador.disconnect();
            console.log('🛑 Observador detenido.');
        }
    });

    // Configurar el observador para que observe cambios en hijos y sub-árbol
    observador.observe(document.body, {
        childList: true,    // Observa cuando se añaden o quitan hijos directos
        subtree: true       // Observa en todo el árbol de nodos descendientes
    });
    
    console.log('👀 Observador iniciado. Esperando al iframe de HubSpot...');
}

// Iniciar todo cuando el DOM esté listo
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', iniciarObservador);
} else {
    iniciarObservador();
}