USP Pro enables you to create post-submission forms that enable users to submit just about type of file. For this tutorial, we cover how to set up a basic post-submission form that enables users to submit video files. Just a few steps until done!
Step 0: Prepare
Before building our video-upload form, it is important to verify that video files may be uploaded to your server. One way to do this is to visit the WP Media Library and try uploading a few test video files, in whatever format and size that you expect users will be submitting.
If you are able to upload video files via the Media Library, you’re all set for the next step. Otherwise, if you are not able to upload video (and/or other types of files), check out this troubleshooting guide should give you some ideas for how to resolve any issue.
Step 1: Make a form
Once you are sure that your site is equipped to handle video uploads, the next step is to make a basic post-submit form. Here is a video tutorial that shows how to do this in general. To your form, you can add any fields you want, but it is recommended to just start with the basic minimal configuration until you are comfortable with how things work.
For example, here is a basic USP Form that you can use to get started:
[usp_title]
[usp_content]Add those two lines to a new USP Form and click the “Publish” button. Then take a look at the form on the front-end by clicking the “Preview” button. You should see your form with two fields: the post title and the post content. Perfect for this tutorial, you can always add more fields later on as needed. Again, if you need help creating a new form, check out this tutorial.
Step 2: Add the files field
Now that you have a basic form set up and ready to go, it is time to add the File(s) field. There are numerous ways to do this, but for forms with just one File(s) field, the is the recommended way to go:
[usp_files required="true" types="mp4,mpg"]When added to your USP Form, this shortcode will display a File(s) field that accepts video files of either .mp4 or .mpg format. To accept other types of files, simply edit the types attribute accordingly.
You can customize the appearance/functionality of the File(s) field by using different shortcode attributes. Here is a list of attributes for the files shortcode for your information. There you can find attributes to customize any of the following things:
- label text
- required or optional
- minimim number of files
- maximum number of files
- allowed file types
..and much more! Definitely worth checking out ;)
Step 3: Save & test
If you followed each step carefully, you should now have a form that contains the following fields:
- Post Title
- Post Content
- File(s)
Visit the form on the front-end of your site by clicking the “Preview” button. Then locate the video files that you tested with in Step 0, above. Now you can use the same files (which you know may be uploaded), and try submitting a few test posts.
Remember! Each uploaded video file is:
- Added to the WP Media Library
- The URL of the file is attached to the submitted post as a Custom Field
So you can visit the Media Library and/or view the Custom Fields meta box to verify that your video files are uploaded properly.
Displaying the video files on the front-end
Now that you have a form that enables users to submit their own video files, you may be wondering how to actually display the files on the frontend, along with each submitted post. Most WordPress themes do not automatically display attached videos. But no worries, there are many ways to display video content:
- Template tags
- Custom shortcodes
- Helper plugin addon
For most users, the easiest way to display video files is to use the free Helper addon. Check out that linked article for complete information, video tutorial, and download. Everything you need to display video on the front-end!