HOME / BLOG /

Tutorial: Embedding UT Box "Widgets" into Qualtrics Forms

The University offers a range of tools for accomplishing tasks through the web.  In today's blog post we are going to briefly describe how Qualtrics and UT Box can be used together to accomplish file uploading with form submission.

Qualtrics is a web-form service that allows researchers and others to create simple or complex web forms to collect user input, often in the form of surveys.  The input is stored and can be emailed to the form owners upon completion.  However, one drawback using Qualtrics is that our University license does not allow users to upload/submit files with their forms or surveys.  

UT Box is a free cloud-storage and filesharing service available to UT Austin faculty, staff, and students for business and academic purposes (check out this CNS IT Blog post from September 19, 2016).  One neat feature of Box is that you can create an upload widget that allows users to directly upload files into a folder in your Box account without allowing them to see the contents of the Box folder.

In today's post, I am going to show you how to insert one of these widgets into your Qualtrics form. 

  1. Login to your UT Box Account.
  2. Create a new folder by clicking the "+ New" button.
  3. Once the folder is created, it will appear in the list of folders you have access to, while on the right-hand side of the file list there will be the options "Share" and "...".
  4. Click "...", mouse over "Sharing", and click "Upload Embed Widget".
  5. This takes you to an overlay that allows you to change some options.  Once you are pleased with the settings, look for a text box that says, "Copy and paste this code into your Website".  Copy that code to your clipboard and paste it into a plain text file, keeping it handy.
  6. Unfortunately, qualtrics does not allow the javascript functionality that UT Box assumes is available.  However, there is a workaround --- but it can be a little tricky!

    1. Take your copied code (for example):

    2. In the script tag, take the URL in quotes that is the value of the src attribute ... this URL is basically defining the location of the javascript file that is to be used.  In our example, the URL starts on the first line and continues on the second line:
      https://app.box.com/embed/upload.js?token=lo11ahi0vnth6fa3e7noozjez6zgpi6p&folder_id=27595349822&w=385&h=385&i=&d=1&t=Submit%20file%20to%20William%20Parker&r=1

    3. Navigate your web browser to that URL and you will see something like this:
    4. This javascript file uses the document.write function to write an iframe element into the page.  Qualtrics does allow us to embed iframes into forms and surveys, so the best course of action here is to directly use the iframe that this javascript file is trying to insert.  To copy the iframe code, you need to view the page source of the script you just loaded in your browser.  (This can be accomplished on most browsers by right-clicking a blank spot on the page and clicking "View Source".  

    5. Continuing with our example, you will see something like this embedded in the page source:

      document.write('<iframe src="https://app.box.com/dropbox/lo11ahi0vnth6fa3e7noozjez6zgpi6p/27595349822?i=&d=1&w=385&h=385&t=Submit%20file%20to%20William%20Parker&r=1" height="385" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none;"></iframe>');

    6. Now take the portion inside the parentheses and single quotes of the document.write method.  In this case, it is:

      <iframe src="https://app.box.com/dropbox/lo11ahi0vnth6fa3e7noozjez6zgpi6p/27595349822?i=&d=1&w=385&h=385&t=Submit%20file%20to%20William%20Parker&r=1" height="385" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none;"></iframe>

    7. Note that this code block is an HTML tag and close tag that together define an iframe. You can tell it is because the HTML tag (everything within the first angle brackets) starts with  'iframe', while the closing tag is </iframe>. Save this entire code block somewhere handy.

  7. So now that we have the iframe that we need in step 6, in step 7, we will insert it into our Qualtrics form.  Login to Qualtrics and navigate to the form where you wish to insert the iframe — which, as you remember, will let users directly upload files into a folder in your Box account.  
  8. Create a new question in your survey wherever you would like it to appear and set the question type to: "Descriptive Text".
  9. Click on the existing text, and then click on "HTML View" (the tab looks grayed out, but it is clickable):
  10. Paste the iframe tags you got in step 6g into the HTML View:
  11. Click out of the box and you will see in the preview that your upload widget appears.  If you do "Preview Survey", you will see that you are now able to submit a file.

Some notes about this:  

  1. In its current setup, form and survey users are not required to submit files.  They can continue through the survey without doing so.  However, some custom javascript validation rules might be able to force validation.  
  2. Users must click "Upload" in the box widget before clicking next; otherwise, the file will not be uploaded.  It is advisable that you add instructions before the upload widget on its use so that user understand what is required of them.

That's it!  Using this trick, you can now allow file uploading in your Qualtrics forms (and you don't even need to know how to code to do it).

Written by Ryan Parker, Software Developer/Analyst
Questions or comments? The best and easiest way to contact us is via the CNS Help Desk form.

See also: Box, General, Web Site