Using WUSTL Box to Collect File Uploads for a Form

Having a file upload field on your Formidable form creates a vulnerability through which spammers can upload files into your media library, causing an influx of form submissions, and, in extreme cases, making it difficult for you to access your site’s dashboard.

As an alternative to having users upload files directly to your Formidable form, you can ask users to submit supporting documents via WUSTL Box or email. The method you choose depends on the type and number of files you plan to collect and your personal workflow preferences.

---

WUSTL Box is a university-supported, brand-aligned, secure platform for file sharing to which all WashU employees have access. But you can also use it to securely collect supporting documents from your non-WashU users.

Follow the instructions below to use WUSTL Box to collect file uploads or see our guide (linked below) for collecting supporting documents through email.

---

Jump to a section below:

• Set up WUSTL Box for file uploads
• Add upload instructions to your Formidable Form
• Option 1: Upload files before submitting the form
• Option 2: Upload files after submitting the form

---

Set up WUSTL Box for file uploads

Create a WUSTL Box folder

Log into WUSTL Box with your WUSTL Key.

1. In the top right corner of your WUSTL Box homepage, click New+ and then Folder.
2. Give your folder a name to correspond with your form.
3. You may invite additional people to your folder and assign them a permission level now or you can add collaborators later. Read below for more information on folder collaborators.
4. Click Create.

We recommend creating a separate folder for each form that requires file uploads so that you can easily keep track of which files belong to which forms. But only use one folder per form, even if the form collects multiple files, so that your users are not switching back and forth between multiple upload locations.

Enable the File Request link

You want users to be able to add their files to this folder, but most likely you don’t want them to be able to view and/or modify other people’s uploads. Rather than providing users with a Share Link, you will give them a File Request link.

1. Click into your newly created WUSTL Box folder, then click the three dots menu in the top right corner of the folder page.
2. Click File Request.
3. In the screen that pops up, make sure Link is enabled is toggled on. This is the link your users will use to access your WUSTL Box folder and upload their supporting documents. Read the sections below to learn where and how to share this link with your users.
4. To the right of the Link toggle, click Settings. A new screen will pop up.
   1. By default, the file request link is public, meaning anyone with this link can upload to your folder. If your users do not have WUSTL Keys – because they are student parents, for example, or members of the broader community – then this is what you want. However, if all of your users are WashU faculty, staff or students, and you want added security for your file collection, you can restrict uploads to WUSTL Key holders by toggling on Require uploaders to log into Box. Users will be prompted to enter their WUSTL Key and password before they can access your folder for upload.
   2. Set a link expiration date if your form has a deadline after which you would no longer like to accept file uploads.

Add collaborators

Just like you add extra admins to your site, we recommend you add collaborators to your WUSTL Box folder so multiple people on your team can access this folder to view and manage file uploads. This is where the Share Link comes into play.

1. On the right side of the folder page is a column called Sharing. Click Invite People in the Collaborators section of this column. Or you can click the large red Share button in the top right corner of the folder page. Both of these actions will initiate the same pop-up screen.
2. Type names into the Invite People field to search for people within WashU. To add external collaborators, enter their email address into this field in full.
3. Click the Invite as Editor dropdown to select permission levels for the people you are inviting. This determines access level to the folder for the people on your team. This permission level does not pertain to your users who will be uploading files to this folder. If you would like different people to have different permission levels, add them separately.
4. Click Send to send your collaborators an email invitation to the folder.

Alternatively, you can toggle on the Share Link, then copy and paste the link directly to your collaborators. There are three levels of availability for the Share Link:

• Invited people only: Only those you added in the Invite Others field can access the folder; this setting gives you a link to make it easier to share access with them. This is the setting we recommend.
• People in your community: Anyone with a WUSTL Key login can access the folder. We do not recommend using this setting.
• People with the link: Anyone with the link, whether WashU-affiliated or not, can access the folder; people you share the link with could go on to share it with others without you knowing. We do not recommend using this setting.

Once you add collaborators, you will see them listed down the right column of the folder page and you can manage their permission levels from there.

Add upload instructions to your Formidable form

Now that your WUSTL Box folder is set up you are ready to start gathering form submissions and file uploads. Most likely by this point you have already created your Formidable form and even added it to a page. If you need more guidance on these processes, see our Forms Builder Guide for full instructions.

There are a few modifications you will need to make to your form build, settings and page content, depending on whether you ask your users to upload their files before or after they complete the form. See the two options below for instructions.

Option 1: Upload files before submitting the form

Use headings

Divide your form page into two sections and use H2 heading to differentiate these sections. This gives your users strong visual cues to follow the process. You may label these sections however you like, for example:

• Step 1: Upload files
  Add the file upload instructions under this heading.
• Step 2: Submit the form
  Embed the form under this heading.

List the files you want users to submit

In the Upload Files section, explain that users must upload their files before proceeding to fill out the form. List out everything you want them to upload, such as CV and writing sample, along with any file requirements. Use this space to tell users how and where you would like them to include identifiers on their files so that you are able to match file uploads to form entries later. (See the sample form for ideas on wording.)

Make a bold call to action

Also in the upload section, below your description of what files are needed, use the Button Block to boldly call your users to upload their files now:

• The button text should be descriptive and action-oriented.
• The button URL will be the File Request link you enabled when setting up your WUSTL Box folder.
  • Just below the URL field, toggle on Open in new tab.

Typically our best practice for accessibility discourages opening a link in a new tab, but in this case it is important to set the button link to open in a new tab so that users do not lose track of the form while uploading their files. Add a note right before the button on the page to let users know it will open in a new tab, and that they should return to this page to complete the form as soon as they are done uploading.

Add a screening question to the form

There are several places throughout the form where you can add reminders and ask users to confirm that they have uploaded the files before clicking Submit. You can also program the form to not allow users to submit the form until they confirm upload. Of course, this is based in the honor system, but it’s a great way to guide your users through the proper process.

Consider using one or other of the following methods.

Confirmation checkbox

1. Add a checkbox field to your form asking users if they have uploaded their files to WUSTL Box yet. This is a screening question. Make this the first question on the form so that no one spends time filling out the form if they haven’t uploaded files yet.
   1. The field label could say something like, “This application requires that you separately upload files to WUSTL Box as described in the instructions under Step 1 above.”
   2. Only add one checkbox option, which could read, “I have uploaded my files to WUSTL Box.”
2. Make this field required so that users cannot submit the form until they check the box affirming that they have uploaded their files.

Conditional logic gatekeeper

1. Add a Yes or No radio button field to your form asking users if they have uploaded their files to WUSTL Box yet. This also serves as a screening question, but functions a little differently than the checkbox because it allows the opportunity to add a reminder and another upload link, as described in the steps below, and as shown in the sample form linked above. As with the checkbox option, this should be the first field on the form so that users are aware of the requirement before they begin filling out the form.
2. Just below the screening question, add an HTML field with a reminder to upload files before proceeding with the form. This is a non-response field. Include the File Request link here so that users can quickly navigate to WUSTL Box if needed. Add conditional logic so that this field only appears if the user answers No to the screening question.
3. Add conditional logic so that the form Submit button doesn’t appear – thus making it impossible to submit the form – unless the user answers Yes to the screening question. Conditional logic for the Submit button can be found under the Styling & Buttons section of the Form Settings.
   1. You may also want to add an HTML non-response field to the bottom of the form, to conditionally appear if the user selects No, that explains why there is no Submit button. See the sample form linked above and select No on the screening question to see how this looks.

---

How to code HTML fields

In every other aspect of the WashU Web Theme, HTML is not required. But in Formidable Forms we must occasionally use light coding to add formatting to plain text fields. If you are not familiar with HTML, don’t worry! Follow these steps to obtain the code you need:

1. Create a draft page on your site and type out the message you want to appear on the form, including bold, italics, links and any other desired formatting. Contain your message in one paragraph block.
2. Hover over the block, click the three dots menu on the right side of the top toolbar and select Edit as HTML.
3. Copy the entirety of the text you see in the block. Do not skip any brackets or symbols, even if they seem strange.
4. Paste everything into the plain text field in Formidable.
5. Check your work! Be sure to test your form, and the conditional logic you have set up, to make sure everything appears as intended.

---

Add reminders to the on-screen and email confirmations

With all of the above steps, you can be fairly certain that for any form submission you receive the user has already uploaded their supporting documents. Nonetheless, another reminder can’t hurt.

For every form, you have the option to show users an on-screen confirmation message and/or send them a confirmation email after they submit the form. Both of these are good places to add a note reminding users to upload their files to WUSTL Box if they have not already done so. Like the HTML form field, both the on-screen confirmation and the email will require light HTML coding. Follow the steps above and always check your work by testing the form before making it public. Complete a couple of test submissions and take a look at all the on-screen and email messages so that you see what your users will see when they submit the form. If anything doesn’t look right, make adjustments and send another test submission. Be patient; it can take several tries to get everything just right.

Option 2: Upload files after submitting the form

An alternative to the above workflow is to allow users to complete and submit the form, and then direct them into WUSTL Box to upload their supporting documents.

In this scenario, you will add the form to the page, with any other desired messaging, just like you would for any other form. However, rather than seeing an on-screen confirmation message, when your users click the form Submit button they will be automatically redirected into the WUSTL Box folder where they can upload their files on the spot.

WUSTL Box is university brand-aligned, just like WashU Sites, so this should be a fairly seamless experience for your users. Nonetheless, being redirected to a different site can be disorienting, and some users might accidentally close the browser without realizing they still had a step to complete.

Follow the steps below to support your users and give them the resources they need to complete this process.

Ask users to upload files after form submission

Even though users won’t be redirected to WUSTL Box until after they submit the form, it is best to let them know from the start that file upload will be required. That way they can gather their supporting documents before they begin the form, and they won’t be surprised when the form submit button takes them into WUSTL Box.

Use an eye-catching element such as a callout box to tell users up front what files they will be expected to upload. Use this space to tell them that files must include their name or other identifiers (so that you are able to match up file uploads with form entries).

Redirect on Submit

Program the form Submit button to redirect to WUSTL Box (see step 4c). The URL you enter here will be the File Request link. As soon as users click Submit, they will be taken straight to their upload location.

Add a reminder to the email confirmation

In case your user accidentally closes the page after being redirected to WUSTL Box, or if they just weren’t yet ready to upload their files, add upload instructions to the confirmation email. This serves as both a double check to make sure they did in fact upload and a reference point for them to access Box again if they still need to upload and/or make any modifications to their files.