Embedded Javascript Form From External Site, Cannot Override The CSS - CSS-Tricks

This topic is empty.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
November 9, 2013 at 9:26 am #155538
Tom Houy
Participant
I have a form from an external vendor that I am embedding into a web page via javascript. I would like to override the CSS being pulled in along with it since it is interfering with my existing CSS. I’ve tried saving the external CSS files in the paths below, modifying them, then updating the paths in the code to point to the modified CSS files hosted on my own server. However for some reason, it appears to be loading the CSS from the vendor’s site anyhow.

Any ideas why this might not be working? Is it possible for me to force the javascript code below to use my own CSS files somehow? The site isn’t live yet, so I’ve X’ed out the vendors domain for now. Below is an example of how the form is embedded.
```
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<script type="text/javascript" src="https://forms.xxxxxxx.com/MXForms/Scripts/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="https://forms.xxxxxxx.com/MXForms/Scripts/jquery.validate.min.js"></script> 
<script type="text/javascript" src="https://forms.xxxxxxx.com/MXForms/Scripts/jquery.validate.unobtrusive.min.js"></script> 
<script type="text/javascript"> 
var mx_var = 
{ 
server: "https://forms.xxxxxxx.com", 
target: "#my-form", application_root: 
"/MXForms/", source_id: "CD1", lead_source: 
"emailcampaign", 
rates_styles: ["https://forms.xxxxxxx.com/MXForms/Content/Site.css", 
"https://forms.xxxxxxx.com/MXForms/Content/Rates.css"] 
}; 
</script> 
<script src="https://forms.xxxxxxx.com/MXForms/Scripts/common_single_auto-form.js" type="text/javascript"></script> </head> 
<body> 
<div class="header"> 
<h1>Heading</h1> 
</div> 
<div id="my-form"> 
<img src="https://forms.xxxxxxx.com/mxforms/images/loading.gif" alt="Loading Form" /> 
</div> 
<div class="footer">Footer</div> 
</body> 
</html>
```
November 9, 2013 at 9:31 am #155539

Tom Houy
Participant

One additional thing, if I load the form into a static page, then embed that page into my site via an iframe, that solves the CSS conflicts. In addition, I can “trump” the CSS being loaded from the vendor with my own CSS specific to that page using “!important”, however I would rather not have to rely on an iframe, and I would prefer to not use their CSS at all.

November 9, 2013 at 3:02 pm #155562

__
Participant

server: "https://forms.xxxxxxx.com"

I assume you’re trying to obfuscate the actual domain name. It is better to use “example.com” (which was specifically reserved for the purpose of example URLs), rather than “xxxxxxx.com” (which is a for-sale domain that contains links to p0rn sites).

rates_styles: ["http://forms.xxxxxxx.com/MXForms/Content/Site.css", "http://forms.xxxxxxx.com/MXForms/Content/Rates.css"]

Looks like the script is using these URLs to load the stylesheets. You might try changing those URLs to point at your local (modified) stylesheets. Couldn’t offer anything more without actually seeing the script.

November 10, 2013 at 7:26 am #155624

Tom Houy
Participant

Good grief, yes I was just trying to blank out the domain name, lol.

I did try replacing the paths as you mentioned, as well as the “server” URL, but for some reason it keeps loading from the original domain.
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The forum ‘JavaScript’ is closed to new topics and replies.