Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Embedded Javascript Form From External Site, Cannot Override The CSS

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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>
    
    #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.

    #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.

    #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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.