Skip to main content
  • Customer Experience
    Customer Experience
  • Employee Experience
    Employee Experience
  • Brand Experience
    Brand Experience
  • Product Experience
    Product Experience
  • Core XM
    Core XM
  • Design XM
    Design XM

Add JavaScript

What's on This Page:

Was this helpful?


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The feedback you submit here is used only to help improve this page.

That’s great! Thank you for your feedback!

Thank you for your feedback!

Warning: Custom coding features are provided as-is and may require programming knowledge to implement. Our support team does not offer assistance or consultation on custom coding. You can always try asking our community of dedicated users instead. If you’d like to know more about our custom coding services, please contact your Qualtrics Account Executive.

About Adding JavaScript

JavaScript is a programming language that enables you to accomplish more advanced functionality in your survey than would otherwise be available. For example, you can change the size of a question text box, create a custom question type, and much more.

Qtip: Learn the basics of JavaScript through a series of simple and free tutorials at codecademy.com.

Accessing the JavaScript Editor

  1. Click the question you’d like to add JavaScript to.
    selecting a question and then clicking Javascript
  2. In the Question behavior section, select JavaScript.
  3. Place your JavaScript in the box, below one of the pieces of /*Place Your JavaScript Here…*/ text. The opening and closing tags are already provided (do not delete them).
    Qtip: You can place your code in one of three places: OnLoad, OnReady, and OnUnload. Choose the one that most fits your needs.

    Edit Question Javascript window with Javascript in the field

  4. Click Save.
  5. Note the </> symbol next to the question; this icon indicates that the question has custom JavaScript on it.
    the javascript icon in the top right corner of the question
    To preview the changes you have made, click Preview on the main bar.clicking the preview button at the top of the survey editor
  6. To remove your JavaScript, open the editor, click Clear, and then click Save.
    on the edit javascript widow, the clear button is on the lower -left, whereas cancel and save are on the lower-right
Qtip: There are several special functions from the Qualtrics code library that can be used in your custom JavaScript. Documentation on these functions is found on our JavaScript API.

Tips & Guidelines for Using JavaScript in Qualtrics

  1. Qualtrics surveys are hosted on a survey engine called JavaScript Form Engine (JFE). While JFE is a single page application, it reloads the header, footer, and theme on each page of your survey.
  2. While loading a survey page, JFE calls three functions that accept callbacks. The callbacks will be executed at the following times:
    • addOnload() – Executed when the page is loaded.
    • addOnReady() – Executed when the page is fully displayed.
    • addOnUnload() – Executed when a page is unloaded (when the page is left).

      Qtip: Qualtrics does not allow the document.write() functionality.

  3. jQuery is pre-loaded in surveys but should be referenced with the literal jQuery rather than $.
  4. If you change functionality outside of a specific question (such as hijacking the keyboard for answering questions), you will need to remove that function on page submit by using the callback passed to the addOnUnload() function.
  5. As with any implementation of JavaScript, we recommend abstaining from global variable creation as it can collide with existing functionality on the page.
    • If you want to import JavaScript libraries, you can include a reference to them in the survey header within <script> tags. Remember that even once you have referenced the library in your header, you must apply Javascript directly to applicable questions for that code to be pulled into the survey.
  6. JavaScript is stripped from the question HTML. Use the JavaScript editor instead of the question HTML, as referenced in the Accessing the JavaScript Editor section above.
  7. Page Transitions can cause issues when selecting elements on load since they are also affecting page elements. If you run into difficulties, you can disable page transitions in the Look & Feel section of the Survey tab.

 

FAQs