Contact Form 7 File Upload Complete Details With Examples

This topic has 0 replies, 1 voice, and was last updated 7 months ago by admin.

Viewing 0 reply threads

Author

Posts

May 15, 2025 at 5:43 am #189

Keymaster

Contact form 7 file upload complete details with some other optional plugins also. It describes, how to avoid not working issues not uploading issues etc.

Contact Form 7 file upload in a professional way. You can enable the file attachment feature on your form. You will receive the attached file by email or you can store it in your server also by Contact Form 7 Database plugin.

Simplify Your Email Testing Process – Especially for CF7 Attachments!

Tired of the hassle and uncertainty when testing emails in development?

With MailMug.net, you can easily test emails and CF7 attachments using our sandbox SMTP server.
No more spamming real inboxes or guessing if your Contact Form 7 files were sent correctly.

Contact Form 7 File Upload (cf7 file upload) Shortcode Generator

Sample Shortcode (file upload example)

[file* your-image]

File Tag Options


OPTION	EXAMPLES	DESCRIPTION
id:(id)	`id:some-id`	`id` attribute form file input tag.
class:(class)	`class:some-class-here`	`class:` the attribute value of the `input` element. One or more classes are possible, like `[file your-file class:col-md-2 class:m01 class:pt-1]`.
filetypes:(filetypes)	`filetypes:gif\|jpg\|jpeg\|png` OR `image/*\|txt\|application/pdf`	Add acceptable file types after `filetypes:` Multiple file types are separated with the (pipe) ‘\|’ character. You can specify file types using their extensions or MIME types.
limit:(num)	`limit:2043576` `limit:3024kb` `limit:3mb`	Maximum upload file size. (i.e., like this: `[file your-file limit:1.5mb]`)

Acceptable File Types

Contact form 7 default acceptable file types are jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv.

You can specify file types using their extensions or MIME types.

The MIME type specified in the filetypes Option must either be one of the types defined by WordPress in wp_get_mime_types(), or a wildcard MIME type like image/* that uses an asterisk in the subtype.

Example 1: [file* your-viode filetypes:video/*]

Example 2: [file* your-viode filetypes:image/*] (Upload image files only)

Attach File to Mail

Go to WP-admin > contact form 7 ( created form) > mail > file attachments, add your file input tag as in the image.

You can add more input fields one by one, like [your-image][your-image2], like that. Mostly, the developer forgot to add a file attachment tag to the file attachment section. So Contact Form 7 file attachment not sending or not receiving attachments is a common problem.

File Upload Validation

File type and size validations are built. jpg, png,jpeg, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv are default file extensions. Customize is possible just add filetypes: in the shortcode.

Example: [file your-file filetypes:png|jpeg]

File type not allowed message will get ( you are not allowed to upload files of this type ) If we upload gif, zip or any other file type (in this example).

File upload size limit

1048576 bytes (1 MB) is the default file size limit. Customize file size with limit: option. The default number is in bytes, but we can add by Mb or Kb. We can see an error message, “The file is too big” if we upload a file bigger than the limit.

Example : [file your-file limit:2Mb]

Image Upload Dimension Validation

CF7 image upload width and size validation code. Add filter for ‘wpcf7_validate_file‘ .

[file* your-image filetypes:gif|jpg|jpeg|png]

Add the following code in your theme functions.php file or custom plugin file.

Here, the minimum width and height are 300px.

add_filter( 'wpcf7_validate_file*', 'custom_cf7_file_validation_filter', 7, 2 );
add_filter( 'wpcf7_validate_file', 'custom_cf7_file_validation_filter', 7, 2 );

function custom_cf7_file_validation_filter( $result, $tag ) {
     //Change your-image (input field name)
    if ( 'your-image' == $tag->name ) {
		$name    = $tag->name;
		$file    = isset( $_FILES[$name] ) ? $_FILES[$name] : null;
		$minimum = array('width' => '300', 'height' => '300');
		list($width, $height)     = getimagesize( $file['tmp_name'] );

		if ($width < $minimum['width']) {
            $result->invalidate( $tag, "Image dimension are to small. Minimum width is {$minimum['width']}px. Uploaded image width is $width px");
        } elseif ($height <  $minimum['height']) {
            $result->invalidate( $tag, "Image dimension are to small. Minimum height is {$minimum['height']}px. Uploaded image height is $height px");
        }        
    }

    return $result;
}

add_filter( 'wpcf7_validate_file*', 'custom_cf7_file_validation_filter', 7, 2 );

add_filter( 'wpcf7_validate_file', 'custom_cf7_file_validation_filter', 7, 2 );

function custom_cf7_file_validation_filter( $result, $tag ) {

//Change your-image (input field name)

if ( 'your-image' == $tag->name ) {

$name = $tag->name;

$file = isset( $_FILES[$name] ) ? $_FILES[$name] : null;

$minimum = array('width' => '300', 'height' => '300');

list($width, $height) = getimagesize( $file['tmp_name'] );

if ($width < $minimum['width']) {

$result->invalidate( $tag, "Image dimension are to small. Minimum width is {$minimum['width']}px. Uploaded image width is $width px");

} elseif ($height < $minimum['height']) {

$result->invalidate( $tag, "Image dimension are to small. Minimum height is {$minimum['height']}px. Uploaded image height is $height px");

}

return $result;

}

The Contact Form 7 file upload is not working?

Have you got an error message, “There was an unknown error uploading the file”?

We can fix it by following the steps.

First step:

Check wp-content/uploads/wpcf7_uploads folder is writable (755 – 777 ) or not. It should writable folder.

Make sure your wpcf7_uploads is writable. For Linux and Mac OS, we can change folder permissions by the following command.

sudo chmod 755 wp-content/uploads/wpcf7_uploads

1	sudo chmod 755 wp-content/uploads/wpcf7_uploads

Please try with 777 if it is not working. But 777 is not a good practice.

Second step:

If you see the error “heck, the PHP maximum upload file size. We can check the maximum file upload size in wp-admin > Media > Add New We can see “Maximum upload file size: (num) MB”. The maximum upload file size should be greater than your upload file size (Contact Form 7 file shortcode size).

Method 1: Change the maximum upload size with a php.ini file

Add or change the upload_max_filesize, post_max_size, and memory_limit as bellow in the php.ini file.

upload_max_filesize = 20M 
post_max_size = 21M  
memory_limit = 15
max_execution_time = 300
max_input_time = 300

upload_max_filesize = 20M

post_max_size = 21M

memory_limit = 15

max_execution_time = 300

max_input_time = 300

Now you can upload a maximum 20Mb file. You can change this value according to your needs.

Method 2: Change the maximum file upload size with an .htaccess file

Add the following lines of code to your root .htaccess file. You can add the last part of your .htaccess file.

php_value upload_max_filesize 64M

php_value post_max_size 128M

php_value memory_limit 256M

php_value max_execution_time 300

php_value max_input_time 300

php_value upload_max_filesize 64M

php_value post_max_size 128M

php_value memory_limit 256M

php_value max_execution_time 300

php_value max_input_time 300

Method 3: Change maximum file upload size with wp-config.php or the selected theme functions.php file

Add the following line of code in the wp-config.php or theme functions.php file.

@ini_set( 'upload_max_size' , '64M' );
@ini_set( 'post_max_size', '64M');
@ini_set( 'max_execution_time', '300' );

@ini_set( 'upload_max_size' , '64M' );

@ini_set( 'post_max_size', '64M');

@ini_set( 'max_execution_time', '300' );

File Upload Path

By default wp-content/uploads/wpcf7_uploads is a temporary upload file path. Files will be deleted immediately after a few seconds. You can change the temporary folder name byWPCF7_UPLOADS_TMP_DIR constant in wp-config.php.

define( 'WPCF7_UPLOADS_TMP_DIR', '/your/file/path' );

1	define( 'WPCF7_UPLOADS_TMP_DIR', '/your/file/path' );

How to save the attached file to the server (Develop CRM)?

Install the column-based database addon. You can save submissions to the external or internal database. It will automatically create new tables for each CF7 form and separate MySQL columns for each input field.

Does Contact Form 7 save data and files to the database?

We can’t save submission data without additional extensions. We can use column-based database addon or CFDB7 plugin to save submissions to the MySQL database.

Where do Contact Form 7 Submissions go?

We can catch post data by action hook. But it needs advanced knowledge in programming. We can use column-based database addon or the CFDB7 plugin to save data.

Get uploaded files by code

Save uploaded files by custom plugin or theme functions.php file. We can catch uploaded files by wpcf7_before_send_mail action hook and WPCF7_Submission class instance. WPCF7_Submission class is a singleton class. It means it instantiates only once. We can access it like an object by function. Check the following example code.

add_action('wpcf7_before_send_mail', 'save_application_form' );

function save_application_form($wpcf7) {
    $submission = WPCF7_Submission::get_instance();
    $files = $submission->uploaded_files();
}

add_action('wpcf7_before_send_mail', 'save_application_form' );

function save_application_form($wpcf7) {

$submission = WPCF7_Submission::get_instance();

$files = $submission->uploaded_files();

}

We can copy or move the uploaded file using by move_uploaded_file PHP function before sending mail. This file will automatically delete after the sent mail.

Customize file upload validation error messages

Go to Contact Form 7 form > messages tab. Then set the custom message in the input field.

Multiple File Upload

CF7 default plugin does not allow for uploading of multiple files. But some other paid plugins are available.

Drag and drop files upload input

Upload multiple files with drag and drop and a preview option. [More Details]

How to change the CF7 file input placeholder text?

Sorry… You can’t change the file input placeholder text from the Contact Form 7 form.

Install the drag-and-drop plugin.

Note:- Please share your contact form 7 bugs or anything related CF7 plugin. We can solve it. Feel free to PM [email protected]

Author

Posts