USP Pro makes it possible to add any type of field to any form. This tutorial explains how to add an HTML input field that opens the user’s camera, so they can take a photo or video. Then after they can upload the photo or video when the form is submitted. Estimated time to completion: about 10 minutes or less, given your familiarity with creating USP Pro Forms.

Step 1

Create a form that submit posts.

Step 2

Next, to add a direct-from-camera files field, you can just use the [usp_files] shortcode, like so:

[usp_files multiple="false" method="select" required="true" custom="accept='image/*' capture='environment'"]

Add that to the form and it will enable capable devices to upload direct from camera. Note that you can customize all of the shortcode attributes as needed, check out the USP Pro Shortcode Reference for all the options.

If your form already has a [usp_files] field (only one can be added per form), you can add additional files fields using custom fields. Already familiar with adding custom fields? Check out the copy/paste custom field recipes.

Notes

Understand that for the direct-from-camera inputs to work, they must be supported by the mobile device. Most modern devices do support, but not all. Also, if photo/video permissions are not already granted, the browser/device may prompt the user before opening the camera. Just fyi.

More information about HTML File(s) input

In general, the HTML type="file" <input> accepts the following attributes:

  • accept — Determines the type of accepted media. Use accept="image/*" for images, or accept="video/*" for video, or accept="image/*,video/*" for both.
  • capture — Makes the magic happen. Tells the browser to open the device’s camera instead of the usual browser File(s) field.
  • user — Determines which camera to open. Use environment to open the main (back-facing) camera, or user to open the self-portrait (front-facing) camera.