Contact Form 7 File Upload Complete Details With Examples

[admin]

Contact Form 7 file upload complete details, including some optional plugins.

It describes how to avoid file upload issues, troubleshoot files not uploading, and fix common problems that prevent uploads from working properly.

 

Contact Form 7 file upload enables visitors to attach files to your forms professionally. Uploaded files can be delivered as email attachments or stored on your server using the Contact Form 7 Database (CFDB7) 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.

 

 

 

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

By default, Contact Form 7 allows the following file types for uploads:

• Images: .jpg, .jpeg, .png, .gif
• Documents: .pdf, .doc, .docx, .odt
• Presentations: .ppt, .pptx
• Audio: .mp3, .m4a, .ogg, .wav
• Video: .mp4, .mov, .avi, .mpg, .wmv

You can further restrict or expand the allowed file types by configuring the file form tag to match your requirements.

 

How do I fix the “You are not allowed to upload files of this type” error in Contact Form 7?

To fix this error, specify the allowed file types using either file extensions or MIME types in the filetypes option of the file upload field.

The MIME types you specify must be supported by WordPress through wp_get_mime_types(), or you can use wildcard MIME types such as image/*, audio/*, or video/* to allow an entire category of files.

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

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

How to Attach Files to Contact Form 7 Emails?

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.

 

 

What is the file upload size limit in Contact Form 7?

By default, Contact Form 7 limits file uploads to 1 MB (1,048,576 bytes).

You can change the maximum upload size using the limit: option in the file upload field. The limit can be specified in bytes, KB, or MB. For example:

• limit:512kb
• limit:2mb
• limit:1048576

If a user uploads a file larger than the configured limit, Contact Form 7 displays the error message:

“The uploaded file is too large”.

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

 

Image Upload Dimension Validation

You can validate image dimensions, such as width and height, in Contact Form 7 by using the wpcf7_validate_file filter.

This allows you to reject images that do not meet your required dimensions before the form is submitted.

 

[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.

PHP

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; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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 folder is writable. For Linux and Mac OS, we can change folder permissions with the following command.

sudo chmod 755 wp-content/uploads/wpcf7_uploads

1	sudo chmod 755 wp-content/uploads/wpcf7_uploads

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

Second step:

How do I fix the “The uploaded file is too large.” error in Contact Form 7?

If you see the error “The uploaded file is too large.”, check your PHP maximum upload file size.

In WordPress, go to Media → Add New and look for “Maximum upload file size: X MB”. This value must be greater than or equal to the file size limit configured in your Contact Form 7 file upload field (using the limit: option). If the PHP upload limit is smaller, file uploads will fail even if Contact Form 7 allows a larger size.

 

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

Add or update the upload_max_filesize, post_max_size, and memory_limit directives in your php.ini file as shown below.

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

1 2 3 4 5

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

1 2 3 4 5 6 7 8 9

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' );

1 2 3

@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 a column-based database add-on or CFDB7 plugin to save submissions to the MySQL database.

 

Where do Contact Form 7 Submissions go?

By default, Contact Form 7 sends form submissions by email and does not store them in the WordPress database.

If you need to save submissions, you can capture the form data using Contact Form 7 action hooks, but this requires advanced PHP programming knowledge.

Alternatively, you can use a database plugin such as CFDB7 or a column-based database add-on to store form submissions in your WordPress database.

 

Get uploaded files by code

Save uploaded files using a custom plugin or your theme’s functions.php file.

You can access uploaded files through the wpcf7_before_send_mail action hook and the WPCF7_Submission class. WPCF7_Submission is a singleton class, which means only one instance is available during a form submission. You can retrieve that instance using the get_instance() method and access the uploaded files.

See the example code below.

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

1 2 3 4 5 6

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 the move_uploaded_file  PHP function before sending mail. This file will automatically be deleted 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 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]

 

• This topic was modified 4 years, 11 months ago by admin.
• This topic was modified 4 years, 7 months ago by admin.
• This topic was modified 4 years, 2 months ago by admin.
• This topic was modified 3 years, 11 months ago by admin.
• This topic was modified 3 years, 1 month ago by admin.
• This topic was modified 3 years, 1 month ago by admin.
• This topic was modified 2 years, 5 months ago by admin.
• This topic was modified 1 year, 7 months ago by admin.
• This topic was modified 1 year, 3 months ago by admin.
• This topic was modified 1 year, 3 months ago by admin.
• This topic was modified 1 year, 3 months ago by admin.
• This topic was modified 1 year, 3 months ago by admin.
• This topic was modified 1 year, 2 months ago by admin.
• This topic was modified 6 days, 21 hours ago by admin.
• This topic was modified 6 days, 20 hours ago by admin.
• This topic was modified 6 days, 20 hours ago by admin.
• This topic was modified 6 days, 20 hours ago by admin.

[Author]

Posts