I have a website and I’m using a Zendesk script to embed their form to capture customer data and send to their application.
This embedded form has its own stylesheet and I’ve been trying to override their css with mine.
This is their script that’s responsible to embed the form:
<script type="text/javascript" src="https://leads-capturer.futuresimple.com/embed.js?token=ca98908sdgfgds9834234jlkjsdb">
This script places a form within an <iframe> and all nodes inside this <iframe> cannot be customized/changed.
I tried JS to set an inline style to form elements inside the <iframe>. Tried create a new stylesheet to override their original stylesheet but nothing seems to work.
Even something as simple as this code below, fails (#iframe-main-container is a child from <iframe>):
<script> let p = document.querySelector('#iframe-main-container'); p.style.background = 'red'; </script>
If I change the code above and target <iframe>, it works.
My first question would be, is it possible to override an existing CSS rule from an embedded widget?
If this is possible, am I doing something wrong to change its looks?