Contact Form 7 Drag and Drop Field

The Drag & Drop Upload field for Contact Form 7 allows users to upload one or more files using a modern drag-and-drop interface or a standard file browser.

This field is generated using the CF7 form-tag generator and outputs a shortcode that can be inserted directly into your form.

Adding the Drag & Drop Upload Field

1. Go to Contact → Contact Forms
2. Edit an existing form or create a new one
3. Click the DragDrop Upload button in the form editor toolbar
4. Configure the field options
5. Click Insert Tag to add the field to your form

Field Settings

Button Label

Defines the text shown on the upload button.

• Note: CF7 does not support spaces in field attribute values
• Use underscores (_) instead
• Example: Browse_Files

Acceptable File Types

Specifies which file types are allowed for upload.

• Format: Pipe-separated list
• File extensions only
• Example: jpg|jpeg|png|gif|bmp|webp|tif|tiff
• Security Tip: Always restrict file types to prevent unsafe uploads.

File Size Limit (MB)

Sets the maximum allowed file size per upload.

• Unit: Megabytes (MB)
• Example: 2048
• Note: This value must not exceed your server’s upload limits.

Multiple Files?

Allows users to upload more than one file.

• Checked: Multiple files allowed
• Unchecked: Single file only

Maximum Files

Defines how many files a user can upload.

• Applies only when Multiple Files is enabled
• Example: 5

Generated Form Tag

After clicking Insert Tag, CF7 generates a shortcode similar to:

[easy_dragdrop_upload easy_dragdrop_upload-827 buttonlabel:Browse_Files filetype:jpg|jpeg|png]

Insert this tag directly into your form markup.

Using Uploaded Files in Emails

To include uploaded files in email notifications:

1. Go to the Mail tab of the form
2. Insert the corresponding mail-tag:

[easy_dragdrop_upload-827]

This will output uploaded file links or references in the email body.

Behavior Notes

• Files are uploaded temporarily during form submission
• Uploaded files are not stored permanently unless media saving is enabled globally
• Validation is performed for:
  • File type
  • File size
  • File count
• Uploads respect both CF7 and server-side limits