0

So I am creating a web-to-lead form but I'd like to use the SLDS CSS. I uploaded the SLDS zip to my Org as a public facing static resource. However, when I put it in my HTML page it's not working. (!URLFor) does work but given that this is not an Apex page (once complete) !URLFor won't work for my use case.

Currently I'm using this syntax:

    <link class="user" 
href="https://myOrg.CS33.visual.force.com/resource/150/SLDS/assets/styles/salesforce-lightning-design-system.css" 
rel="stylesheet" type="text/css"/>  

How can I access the SLDS on an external website (cut and paste web-to-lead)? Do I need to host it as a static resource or is it available through the SLDS site? What is the syntax I need to reference it?

here is how I'm attempting to reference it

<apex:page standardStylesheets="false" showHeader="false" cache="false" >

   <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
            <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"/>

            <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/mailtoharshit/CloudCast/master/src/salesforce-lightning-design-system-1.0.0/assets/styles/salesforce-lightning-design-system.min.css">
            <link  href="https://widoa--doalegal--c.cs33.visual.force.com/apexpages/slds/latest/assets/styles/salesforce-lightning-design-system-vf.min.css" rel="stylesheet" type="text/css"/>    

        </head>     
        <body>
            <form action="https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

                <input type="hidden" name="captcha_settings" value='{"keyname":"myVCap","fallback":"true","orgId":"afsaf","ts":""}'/>
                <input type="hidden" name="oid" value="asdfsdf"/>
                <input type="hidden" name="retURL" value="http://www.google.com"/>

                  <div class="slds-form-element">
                    <label class="slds-form-element__label" for="first_name">First Name</label>
                    <div class="slds-form-element__control">
                        <input  id="first_name" maxlength="40" name="first_name" size="20" type="text" class="slds-input" placeholder="enter your first name"/>

                    </div>
                </div>

UPDATE

This the issue was it can't be zipped. I was able to host it as a static resource: <link href="MYORG--c.na21.visual.force.com/resource/1500/SLDS_Min&‌​quot; rel="stylesheet" type="text/css"/>

7
  • Googling around I found a few options 1) vote for this idea success.salesforce.com/ideaView?id=0873A000000LlVWQA0 2) If you trust this source from where the CSS is served from take a look at this git github.com/mailtoharshit/CloudCast
    – Rao
    Commented Oct 9, 2017 at 18:21
  • I tried that git Repo and it still isn't working. Perhaps it's my syntax.
    – tjcinnamon
    Commented Oct 9, 2017 at 18:37
  • do you see any errors in console about the css is not rendering ?
    – Rao
    Commented Oct 9, 2017 at 18:39
  • looks like I didn't close the <link> for the rawgit.com with </link> However, I'm a little confused as to why I can't use this as a static resource. The RAWGit CDN is a 1.0 and I can't trust the source. I wonder if the file needs to be unzipped
    – tjcinnamon
    Commented Oct 9, 2017 at 18:53
  • you could very well download the slds and use it as static resource(or) why take all that pain when you have <apex:slds> prebuilt for you :) lightningdesignsystem.com/platforms/visualforce
    – Rao
    Commented Oct 9, 2017 at 19:05

0

You must log in to answer this question.