Referencing an external stylesheet from the Marketo custom form CSS area | Community
Skip to main content
Mariano_Adunse
Mariano_Adunse
Level 2
Aug 21, 2019 3:53 PM UTC
Question

Referencing an external stylesheet from the Marketo custom form CSS area

Hi all, 

As the title (hopefully suggests), I've created a universal/global stylsheet for a selection of forms in our Marketo instance that I would like to reference from multiple forms. 

What would be the best method to achieve this?

So far I've tried a simple @import which doesn't work in custom CSS under the form wizard. Is there another way?

Thanks!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

12 replies

Crystal_Pacheco
Crystal_Pacheco
Level 3
Aug 22, 2019 6:07 PM UTC

The @import css in the form css should've worked. I've done this on multiple occasions. 

1 - Edit form 

2 - Form Settings


3 - Edit custom css


4 - Paste the snippet with your URL to your Marketo form css.

/* Add your custom CSS below */
@import url(https://YourMarketoURL.com/rs/XXX-XXX-XXX/images/form-css-2019.css); /* @import comes first */‍‍


See if the form.css URL resolves this way.

Translate
    Mariano_Adunse
    Mariano_AdunseAuthor
    Level 2
    Aug 23, 2019 11:29 AM UTC

    There has to be something seriously wrong with the way the CSS is being read and interpreted by the browser. I think there must be a request that isn't being run when @import is used as opposed to direct CSS definitions in the stylesheet). 

    I'm using @ import exactly as it should be used and it still isn't working (I've also made sure I've approved the web form just in case before previewing it).

    Translate
    Crystal_Pacheco
    Crystal_Pacheco
    Level 3
    Aug 23, 2019 1:29 PM UTC

    That's odd, you did all the correct steps.

    The next thing to do would be to examine the page with Inspector from Google Chrome and see if there are any console errors.
    Open the form preview in Google Chrome, right click inside the window, select Inspect. 


    Select Console and examine if there are any errors, it could be a CORS error or an http / https error.

    Make sure the file is local to your Marketo instance.

    If there are no errors, you should examine the css file itself.
     
    Here's a css snippet to test the form label to see if its reading the file at all.

    .mktoForm label {
      	color: #757575!important;
    	font-size:20px!important;
    	margin-bottom:0px!important;
    	width:100%!important;
    	font-family:Arial,sans-serif!important;
    	font-weight:bold!important;
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
    Translate
    SanfordWhiteman
    SanfordWhiteman
    Level 10
    Aug 21, 2019 5:54 PM UTC

    Also, please delete your duplicate thread in the other space, it just adds to confusion.

    Translate
    Mariano_Adunse
    Mariano_AdunseAuthor
    Level 2
    Aug 22, 2019 10:40 AM UTC

    Hi, no idea how to delete it but please feel free to (if you're an admin).

    Thanks for your help!

    Translate
    SanfordWhiteman
    SanfordWhiteman
    Level 10
    Aug 21, 2019 5:00 PM UTC

    Insert using JS, following the guidelines here: https://blog.teknkl.com/add-forms-behaviors-inside-rich-text/ 

    Example:

    <script>
    MktoForms2.whenReady(function(form){
      var formEl = form.getFormElem()[0];

      if( formEl.getAttribute("data-inline-behaviors-loaded") == "true" ) {
        return;
      }

      formEl.setAttribute("data-inline-behaviors-loaded", "true");

      var externalCSS = document.createElement("link");
      externalCSS.rel = "stylesheet";
      externalCSS.type = "text/css";
      externalCSS.href = "https://www.example.com/my.css";
      document.head.appendChild(externalCSS);
    });
    </script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
    Translate
      Terms & ConditionsAccessibility statement

      Loading footer...