Referencing Custom Javascript and CSS Files

Note: This page applies primarily to the classic form designer.

In addition to writing JavaScript and CSS on the CSS and JavaScript page, you can also include references to other JavaScript and CSS files. Including external JavaScript and CSS files can make it easier to maintain your code.

You can reference any JavaScript or CSS file located in your Forms install directory or hosted on the web.

To add JavaScript or CSS files to your Forms installation directory

  • On the computer hosting the Forms Server, browse to C:\Program Files\Laserfiche\Laserfiche Forms\Forms\js. Put any JavaScript or CSS files you want to use in this directory.

To reference a JavaScript file on the Forms Server from the CSS and JavaScript page

  1. Enter the following code in the JavaScript section of the CSS and JavaScript page:
    2. var script = document.createElement('script');
script.src = "http://FormsServer/Forms/js/scriptname.js";
document.getElementsByTagName('head')[0].appendChild(script);

    Optional: You can also use jQuery's getScript() function. See the jQuery documentation for more information.

    $.getScript('http://FormsServer/Forms/js/scriptname.js');
  2. Replace FormsServer with the name of your Forms Server. Replace scriptname.js with the JavaScript file's name.
  3. Click Save.

Important: Do not use "localhost" as the value for FormsServer. Use the server name or IP address.

Tip: Be sure to put this code inside an appropriate function so it knows when to run. For example, if the code should run when the document loads, you'd include this inside $(document).ready(function() { code goes here...}.

To reference an externally hosted JavaScript file

  1. Enter the following code in the JavaScript section of the CSS and JavaScript page:
    2. $(document).ready(function () {
    $.getScript('ScriptURL/scriptname.js', function() {
        //code goes here
    });
});
  2. Replace ScriptURL/scriptname.js with the URL of the JavaScript file.
  3. Replace code goes here with your code that references the external JavaScript file.

    Note: Placing your code in this function ensures that it will wait for the external script to load before running.

  4. Click Save.

To reference a CSS file

  1. Enter the following code in the JavaScript section of the CSS and JavaScript page:
    2. $(document).ready(function () {
    $('head').append('<link rel="stylesheet" href="FormsServer/Forms/js/CSSFileName.css" type="text/css" />'); 
});
  2. If the CSS file is on the Forms Server, replace FormsServer with the Forms Server URL. Replace CSSFileName.css with the name of the CSS file.
  3. If the CSS file is hosted on a website, replace FormsServer/Forms/js/CSSFileName.css with the URL of the CSS file.
  4. Click Save.