Forms are an easy way to collect information from website visitors, and file uploads allow users to add even more useful or important information. Some of the data which you can collect from file upload forms include:
- user-submitted images and videos
- content in the form of blog posts
- resume files
In this post, I'll show you how to create a resume upload form for a WordPress website. Users will be able to upload resume files in PDF format. By the end of this tutorial, we should have something like this.
I'll also show you how to add these uploaded files to Dropbox.
Drag and Drop File Uploader Add-on for Contact Form 7
The Drop Uploader add-on for Contact Form 7 is a powerful plugin that allows you to add an upload area of any format to a form. You can also add several uploading areas to one form. It even allows you to copy these uploaded files to your preferred server or to Dropbox, which provides another backup for your data.
Other features include:
- ability to restrict specific file extensions
- unlimited file upload ensures you can upload files of any size
- ability to drag and drop or browse during upload
- styling customization including colors, browse buttons, and icons
- receive uploaded files as links, mail attachments, or both
- receive attachments as zip files
- store files in Dropbox
- delete old files at a specific time
The plugin is translation ready and supports English, Spanish, French, Italian, German, Russian, and Ukrainian.
Create Your Resume Upload Form
To get started creating an upload form, first purchase and download the Drop Uploader for CF7 plugin. You can find your installable WordPress files in the download section of your account.
Once you download the WordPress files, log in to your WordPress site, and install the plugin. Go to Plugins > Add New and upload the WordPress zip file you got from CodeCanyon. After uploading, click Install Now, wait a few seconds, and then click Activate. You can now start using the plugin.
Go to Settings > CF7 Drop Uploader Settings and customize the Drop Uploader Style and other options such as layout and file storage.
CF7 Drop Uploader offers three ways of storing files:
- Attachment: if you enable this option, all files will be archived in zip files.
- Link: this option allows you to store uploaded files as links. It also allows you to delete the files at a specified time.
- Dropbox: this option allows you to integrate and add your files to Dropbox. All you need is the Dropbox token, which you can obtain from your Dropbox account. You can also generate shareable links and link them to files or folder.
Create Your First File Upload Form
Install Contact Form 7 from the official WordPress plugins directory. Once done, you can now start creating your forms. Click Contact > Add New in your WordPress Dashboard menu. Contact Form 7 comes pre-configured with a ready-to-use template as shown below
Click on Drop Uploader, and you should see a popup like the one below.
Mark the field type as a required field, set the Files count limit, and input Accepted file types as PDF format. Select the HTML Link checkbox if you wish to send links in HTML. Once you are done, click on Insert Tag, and all the changes are applied to the form. Rearrange the fields as you would want them to appear in your form. You can also add a message by clicking on the Drop Uploader Message tab.
The form template also contains additional fields such as checkboxes, date, and radio buttons, which you can use to make any form.
Next, go to the Mail tab and add the uploader shortcode—in my case, [dropuploader-313]—to the message body and save the changes.
You can also receive the uploaded files as mail attachments by pasting the shortcode id of the uploader to the File Attachments section.
Embed Your Resume Upload Form in a Page
The final step is to embed the upload form to a WordPress page. To add the upload form, click the Add shortcode option and paste the shortcode of the contact form.
Receive Uploaded Files in Dropbox
In this section, we’ll cover how you can integrate Dropbox with your contact forms and send copies to Dropbox.
The first thing is to head to Dropbox Developers and log in to your Dropbox account. Click on Create apps, select the Dropbox API option, choose the type of access you need for the API, and create a name for your app. Finally, click the Create app button. You will be redirected to the page which contains all the app’s information. Scroll to the OAuth 2 section and click on the Generate token button.
Once the token has been generated, copy and paste it to the Dropbox token section on your WordPress site.
To ensure your files will be stored in Dropbox, edit the form by enabling the receiving files option. Go to the Drop Uploader tab and activate the Dropbox setting.
Save your form settings. In addition to receiving files as links in the message body, you will also receive files via Dropbox. To confirm if your file submissions have been saved to your Dropbox account, simply log in to your Dropbox account and check under Apps.
This post has covered everything you need to get started with creating upload forms and storing your information. CF7 Drop Uploader will cater to every need, whether it's for big or small files. If you are looking for a way to quickly create upload forms that automatically send your file uploads to your Dropbox, this is an easy way to manage files and ensure safekeeping for your files. Take advantage of this awesome plugin and easily create file uploads.
- WordPress20 Best WordPress Login Forms on CodeCanyonDaniel Strongin
- WordPress PluginsBest WordPress Form Builder Plugins for 2019Franc Lucas
- WordPressCreating WordPress Forms That Get Filled InRachel McCollin
- WordPressUse a Drag-and-Drop Form Builder for WordPressAshraff Hathibelagal
- WordPressHow to Pick a WordPress Form Builder PluginFranc Lucas
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post