Hello everyone! Today we’re learning about custom code! By the end of this video you will know where to find the JavaScript editor, where to add your custom CSS, and how to preview your code changes.
FAQ for Custom Code
Important: Does Qualtrics support custom code?
Please note that our support team does not offer any assistance or consultation on custom coding. The best way to get help on custom coding is by asking a question on the Experience Community.
Where can I find custom code examples?
The Experience Community has many posts with custom CSS and JavaScript code examples that you can use in your surveys.
Adding Custom CSS
Where do I add custom CSS to my survey?
- Open your survey and go to the Look and Feel tab.
- Head over to the Style section.
- Scroll down and click Edit on the Custom CSS box.
How do I add custom CSS code?
- Go to the Experience Community post that contains the custom CSS code you want to use.
- Copy the code.
- Paste it into the Custom CSS editor.
- Click Save, then Apply.
Will I see the changes in the Look & Feel preview?
No, you will not see changes in the Look & Feel preview. To see your custom CSS in action, go to the Survey Builder and click Preview. The changes (such as a gradient background) will appear in the live preview.
Embedding Custom HTML (Scrollable PDF Example)
How do I embed a scrollable PDF into a question?
- Create a new Text/Graphic question in Survey Builder.
- Click into the question text.
- Select the HTML View button (looks like
<>). - Go to the Experience Community post with the scrollable PDF code.
- Copy the code and paste it into the HTML view.
- Make any edits you want (e.g., change width from 1200 to 100%, insert your PDF URL).
- Click Save.
How do I preview the embedded PDF?
Click Preview in the Survey Builder. You'll see an iframe that allows respondents to scroll through the entire PDF file.
Adding JavaScript (Dropdown in Form Field Example)
How do I add JavaScript to a question?
- Add a new Form Field question.
- Select the question.
- Go to the Question Behavior section on the left.
- Select the JavaScript option.
- Copy and paste the code from the Experience Community post.
- Click Save.
How do I preview JavaScript changes?
Click Preview to see your changes. For example, you might see a form field transformed into a dropdown menu with customizable options (defined in the JavaScript code).
Testing Your Custom Code
How do I verify that custom code is working correctly?
Always preview your survey after adding custom code to ensure:
- CSS styling appears as expected
- Embedded HTML elements (like PDFs) display and function properly
- JavaScript modifications work correctly
