Embed Qualtrics survey

Unauthenticated Qualtrics surveys from NDSU's Qualtrics instance can be embedded into web pages. Before you begin, double-check that it makes sense to embed the Qualtrics "form" in your CMS page rather than link to the survey. Multi-page surveys often do not make sense within the context of a department webpage, whereas a survey that just looks like a form is suited to being embedded within a department page. Need help getting started using Qualtrics?

Note: Surveys that require NDSU authentication can not be embedded into any web page. You must link to the survey in that case.

You can embed a default survey as-is, but modifying the survey to use a plain white theme and adding a snippet of script will make the survey appear as though it is part of the page. Here's how:

  1. Log in to Qualtrics
  2. Edit the survey you plan to embed
  3. Click Look & Feel
  4. Click Theme North Dakota State University tab
  5. Click the Blank theme box
  6. Layout WARNING - If you select the Flat Layout you must also choose the Style > Question Spacing Comfortable option.
  7. Click the General tab
  8. Click the edit link under the Header field
  9. Click the Source WYSIWYG button
  10. Paste in the JavaScript code snippet without modification
  11. Click Save twice to get back to the main survey edit page
  12. Click the Distributions tab
  13. Click the +Distribute Survey button
  14. Click the Get a single reusable link button
  15. Copy the provided link (looks like
     https://ndstate.co1.qualtrics.com/jfe/form/FORM_ID )
  16. Log in to CMS
  17. Create a new Qualtrics content element (Form > Qualtrics)
  18. Paste the link address from step #13 into the Form URL field
  19. Add a Form Title, which is used to help describe the form to the visitor. This is not visible in the page, only to accessibility tools.
    For example, "Contact department" or "Order software" may describe the purpose of a form used to submit a question to the department or to submit a software order request, respectively. Be concise
  20. Save and close; publish as usual

Code snippet

Copy the following code in its entirety, without modification where prompted in step 8 (above). If you don't include it in your Qualtrics survey, the survey frame will not be able to automatically scale to the size of the survey and visitors may need to scroll to see all of the survey fields.


<script>Qualtrics.SurveyEngine.addOnload(function(){try{top.document.domain,self.document.domain}catch(d){var n="",e=document.referrer.split("/")[2];if("workspaces.ndsu.edu"==e?n="https://workspaces.ndsu.edu":"www.ndsu.edu"==e&&(n="https://www.ndsu.edu"),""!=n)setInterval(function(){window.top.postMessage(document.body.scrollHeight,n)},500)}}),Qualtrics.SurveyEngine.addOnReady(function(){}),Qualtrics.SurveyEngine.addOnUnload(function(){"undefined"!=typeof i&&clearInterval(i)});</script>

Suggested survey look and feel if embedding the survey

To create a survey that looks most like it's "part of the page," the following survey settings can be configured in Look and Feel.

  • In the General tab
    • In Header  > edit add header text so anyone that ends up visiting the survey directly has some context. For example, a simple "CMS feature request" text if the form is about requesting CMS features, is helpful.

    • Next Button Text set to Next rather than an arrow (accessibility). Similarly, previous button text can be "Back."

  • In the Style tab
    • Primary Color set to #063 .

    • Font > set to Helvetica .

    • Foreground Contrast > set to Medium (accessibility).

    • Question Spacing > set to Comfortable (necessary if using the Flat Layout).

    • Question Text > set to 16px.

    • Answer Text > set to 16px.
Top of page