How to Upload Files from Contact Form 7 to Dropbox

Upload files from Contact Form 7 to Dropbox

Or how best to spend a bank holiday weekend.

The website was due to launch on Tuesday after bank holiday and late Friday evening the request came in to upload files from Contact Form 7 to Dropbox. After a bit of a rummage on Google, I came across the plugin Contact Form 7 Dropbox

I was a bit put off by the statement: “This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.” However, it did seem to offer exactly what I was looking for, so I decided to give it a try.

After installing the plugin and heading over to my contact forms, the following additional tab appeared:

CF7 Dropbox config form

So lets talk a bit about each field:

Access Token

To gain access to your Dropbox account, you need to create a Dropbox App via https://www.dropbox.com/developers/apps. Click on the link and log in to Dropbox if you are not already logged in. The click the button “Create App”:

Create App in Dropbox

Then select the following options:

  1. Choose an API: Dropbox Legacy API
  2. Choose the type of access you need: App Folder – Access to a single folder created spefically for your app.
  3. Name your app: This will need to be a unique name.

Finally, click “Create App”

None of the documentation I could find was recent, so it was not clear that you must select Legacy API for option 1, but believe me, you do.

Dropbox App Config

Once the app is created, you will be presented with the following screen. To acquire the Access Token, click on the button labelled “Generate” under “Generate access token”.

Generate Dropbox Access Token

Copy the resultant access token into the Access Token field of the Dropbox Settings tab of the Contact Form.

File Input IDs

These correspond to the ID attributes of the File Input tags within your contact form. For example: [file upload-file id:upload-file-id]. The File Input ID is upload-file-id.

If there are multiple file tags in your contact form, then give each of them a unique ID and include the IDs in this field separated by commas.

Dropbox Folder

If you leave this field blank then the uploaded files will appear in the folder Apps/ where is the name given to your Dropbox App in step 3 of the App Configuration. If you wish to create a sub-folder within Apps/ then you enter the name if the sub-folder in this field.

After you have completed the setup, files entered into your contact form will automatically be sent to your Dropbox account in the folder Apps/.

I hope this post helps you complete the integration quicker than it took me!

Leave a Reply

Your email address will not be published. Required fields are marked *