Referencing an external stylesheet from the Marketo custom form CSS area | Community
Skip to main content
Mariano_Adunse
Mariano_Adunse
Level 2
August 21, 2019
Question

Referencing an external stylesheet from the Marketo custom form CSS area

  • August 21, 2019
  • 3 replies
  • 5907 views

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.

3 replies

SanfordWhiteman
SanfordWhiteman
Level 10
August 21, 2019

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
    SanfordWhiteman
    SanfordWhiteman
    Level 10
    August 21, 2019

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

    Mariano_Adunse
    Mariano_AdunseAuthor
    Level 2
    August 22, 2019

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

    Thanks for your help!

    Crystal_Pacheco
    Crystal_Pacheco
    Level 3
    August 22, 2019

    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.

      Mariano_Adunse
      Mariano_AdunseAuthor
      Level 2
      August 23, 2019

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

      Crystal_Pacheco
      Crystal_Pacheco
      Level 3
      August 23, 2019

      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;
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
      Terms & ConditionsAccessibility statement

      Loading footer...