Upload files after form submission? Use the Box Upload Embed Widget

Notice: Box will no longer be used by MSU starting March 2022. We will provide an alternative option as soon as we have one.

If you need your form to accept file submissions, you have found the right piece of documentation!

While it might look like a long list of steps, this is not that difficult. You can do it! We have just made each step granular enough so it's easier to follow.

The CMS's Form Builder itself will not accept submissions (security issues, technical issues...) However, you can use a folder in your UIT-provided Box account and create an Upload Embed Widget which will appear after the form has been submitted, so your visitor can upload their file.

After you implement this, the visitor will fill out the text portion of your form, submit that data, and then be forwarded to another page to upload their file (could be an image, PDF, Word doc, Excel sheet, etc.) We suggest prompting them to use the same email address in the upload submission as they did in the form.

Steps for adding a Box Upload Embed Widget to your form's flow

  1. Create and publish a page (you can leave blank for now). This will be your Upload Page.
  2. On your form asset (after it has been created) change the "Success Message" to "URL Redirect"
    1. E.g. If my Upload Page link looks like "/sitesection/upload.html" and my website homepage is, my new link would be "/usp/sitesection/upload.html".
    2. In the "URL" field, use the navigate button (navigate.PNG) to find your Upload Page. Click to highlight the page and then click the "Choose File" button.
    3. Add your website directory name (the part of your site name in the URL) onto the beginning of the link that the Choose File pop-up has spit out, with a beginning slash.
    4. Save and re-publish your form asset.
  3. Open your Box account in your web browser (we recommend Google Chrome.)
    1. If you don't have a folder set aside already, create one dedicated to receive these uploads.
    2. While viewing the folder in Box, hover your mouse over its entry and click the "...", then mouse-down to "File Request". (See Figure 1 below.)file-request.PNG
    3. A pop-up window will appear with your options. Edit your Title, Instructions, and decide if you will allow users to add descriptions. We highly recommend selecting "Require Email Address for Uploads" and informing the user to provide the same email address as their prior textual submission so you can keep the entries straight later.
    4. Click the "Preview" link to see how the uploader looks.
    5. When you're ready, click the "Copy upload embed widget" button which copies the code for you.
  4. Back in the CMS, navigate to Assets.
    1. Create a new source code asset.
    2. Set your Name and Access settings for this asset
    3. Paste the code from Box into the "Asset Content" box below
    4. In the "Asset Content" window, click the magnifying glass icon to open the "Find and Replace" dialogue
    5. In the "Find" box, add "&". (No quotes)
    6. In the "Replace" box, type "&" (No quotes. Can you tell we're replacing all of the ampersands for their ASCII code counterparts?)
    7. Click the "Replace All" button.Assets___OU_Campus.png
    8. If there are any other attributes that are not assigned a value, they should ="true" like this:
      1. Code before they equal true
        1. ... width="500" height="400" frameborder="0" allowfullscreen webkitallowfullscreen msallowfullscreen></iframe>
      2. Code once you have added ="true"
        1. ... width="500" height="400" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" msallowfullscreen="true"></iframe>
    9. At the bottom, click "Create" then Publish this asset.
  5. Within the CMS, navigate to the page you created as your Upload Page.
    1. Edit the content region you wish to add the Upload Embed Widget.
    2. Add the asset you created containing the Widget.
    3. Publish! Done!
  6. Check your published page to make sure it displays and test the uploader yourself to make sure it is uploading to the correct folder.
  7. Grab a glass/cup of your favorite hot beverage, because you're done
Was this article helpful? 0 out of 0 found this helpful

Have more questions? Submit a Support Ticket