Contact Form 7 Multiple File Upload Functionality Quick and Easy

Updated March 5th, 2019
Share this post:
Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on pinterest
Share on pocket
Share on email
Share on print

This tutorial is all about learning to take advantage of the Contact Form 7 multiple file upload functionality in your forms. By default the plugin only allows single uploads, which can be very limiting. Using what I show you below you’ll be able to allow your visitors upload multiple files at once.

You can either watch the detailed video tutorial below or scroll below that to read the image/text version of the tutorial.

More Contact Form 7 Tutorials you may want to check out after this one:

The first step is to add a new plugin. Type “CF7 Multifile Upload” into the search bar in the “Add New” section of the “Plugins” tab and the plugin we want will be the only one available.

This plugin has a message at the bottom saying it is untested in the current version of WordPress. Even if it was showing up as compatible with the current version of WordPress, it’s a good idea to backup our website just in case. You never know and it’s always better to be cautious.

Here’s a link to my manual backup tutorial on YouTube in case you need it. You can also create a backup in a semi-automatic way using the Duplicator plugin, here’s a tutorial for that one.

Next, click “Install Now” and then Activate to get the plugin running. Now we can go into any pre-existing or new Contact Form 7 form to find a new button in the editor called “Multifile”.

Click in the editor where you want to the file upload element to appear. Then click on the Multifile button.

The multifile dialog box will appear (see below):

In the name field, the name you enter will only be seen by you and it’s good to create a descriptive name.

The file size can be determined by using a byte converter to change megabytes into an amount of bytes. There are many byte converters available. The one I commonly use is this one.

The acceptable file types need to be separated with a pipe character | (shift + ). The remaining fields are not required, so you can skip through them to click on the “Insert Tag” button.

Now you’ll see a shortcode added to the form editor. Now Save your form.

Next, open the “Mail” tab to add the shortcode for the new multi-file upload into the “File Attachments” field. At the top of the Mail tab you should see the shortcode for the field you just created. Copy it.

Now scroll down until you find the File Attachments field. It is near the bottom of the Mail tab page.

Once you find it, paste the shortcode in there. That will make sure the file is attached to the email that is sent to you after the form is submitted.

After copying this shortcode into the “File Attachments” field, save the form again.

Testing The Mutliple File Upload Functionality

Either open an existing page with the form or create a new page for the form.

If you’re creating a new page paste the shortcode into the Text tab and then click on “Publish”.

Open the page with the form in a browser and quickly fill it out.

Make sure that you add multiple allowed files for the multiple file upload functionality.

Once you’ve completed the form hit “Send”.

If all went well you should receive an email with the form data including the attachment. The attachments will probably arrive in a zip file that you can download and unzip. Below is a sample email.

That takes us to the end of the multiple file upload tutorial for Contact Form 7. For customizing your WordPress site further, make sure you subscribe to my WordPress Tutorials – WPLearningLab channel and click on the bell notification not to miss any of the useful WordPress tutorials.

More Contact Form 7 Tutorials you may want to check out after this one:

Share this post:
Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on pinterest
Share on pocket
Share on email
Share on print
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Responses

Your email address will not be published.

  1. Your work is great inspiration for me. I like it! Thanks for sharing, very helpful.

  2. hello,
    I have a probem when i use CF7 Multiple File Upload in form, the issu is that i don’t have a notification inspite of that the email is sent and received, there is just an icon turnd around meaning that the email is still sending. when i disable the multifile tag the form work perfect and i send and receive the email with the notification “thank you, your email is sent”.
    thanks for help.

    1. Hi Bens,

      It sounds like a plugin conflict since it works fine when you deactivate the plugin. Make sure that all your plugins, theme and core files are up-to-date. Do that and let me know if it works better. If not, we’ll try something else.

  3. Hello,
    All works fine but ZIP is not visible for downloading. Mail showing with the ZIP file like xxxx.zip. But I cannot see that particular ZIP file is attached to download.

    1. Hi Stephen,

      If I understand correctly the email is showing that the zip file is attached, but the it can’t be downloaded. Is that correct?

  4. Great little video, thank you 🙂

    I have an issue where my client wants to be able to locate different images which are not in the same folder, but your way only allows from the same folder. Is there a way to attach several files from various locations?

    As a test, I created six multifiles in CF7 which all are visible on the page, but it won’t send unless six files are individually selected; I cannot choose just one and send the email form (it keeps spinning), and it’s the same with five… it only works on six. When it does arrive at my inbox, I get a zip file of 6 images. Great! …but it’s not always going to be 6 files attached 🙂

    So, in all, how can I attach different files from different folders on the hard drive, but so it isn’t forcing 6?

    Many thanks 🙂

    CF7 FORM…
    Image 1 [multifile multifile-01 limit:10485760 filetypes:jpg|jpeg|png|gif|pdf|doc|docx|csv]
    Image 2 [multifile multifile-02 limit:10485760 filetypes:jpg|jpeg|png|gif|pdf|doc|docx|csv]
    Image 3 [multifile multifile-03 limit:10485760 filetypes:jpg|jpeg|png|gif|pdf|doc|docx|csv]
    Image 4 [multifile multifile-04 limit:10485760 filetypes:jpg|jpeg|png|gif|pdf|doc|docx|csv]
    Image 5 [multifile multifile-05 limit:10485760 filetypes:jpg|jpeg|png|gif|pdf|doc|docx|csv]
    Image 6 [multifile multifile-06 limit:10485760 filetypes:jpg|jpeg|png|gif|pdf|doc|docx|csv]

    CF7 MAIL…
    Image 1 [multifile-01]
    Image 2 [multifile-02]
    Image 3 [multifile-03]
    Image 4 [multifile-04]
    Image 5 [multifile-05]
    Image 6 [multifile-06]

    INCOMING EMAIL…
    Image 1 5be5d601cd684.zip (your way of selecting multiple images from the same folder includes multiple images in the zip file upon arrival)
    Image 2 [multifile-02]
    Image 3 [multifile-03]
    Image 4 [multifile-04]
    Image 5 [multifile-05]
    Image 6 [multifile-06]

    …another email test sends all 6 six individually (not zipped), but again, it’s either 6 or nothing at all.

    1. Hi Ravi,

      There are a lot of plugins struggling with WP5 compatibility right now. Let’s hope this one pulls through and is compatible soon.

    1. Hi Saul,

      Is the zip file arriving in your inbox and you just can’t download it? Or is the file not attached to the email? Or where are you trying to download it from?

        1. Hi Ramkirat,

          Double check to make sure that you have correct shortcode for the downloads in the “attachments” field of the Mail tab in the contact form 7 editor.

          I hope that helps 🙂 Let me know if you have any further questions.

WPLearningLab

Warning: Use of undefined constant WPBF_CHILD_THEME_URI - assumed 'WPBF_CHILD_THEME_URI' (this will throw an Error in a future version of PHP) in /home/customer/www/wplearninglab.com/public_html/wp-content/themes/buddyboss-theme-child/functions.php on line 108

Warning: Use of undefined constant WPBF_CHILD_VERSION - assumed 'WPBF_CHILD_VERSION' (this will throw an Error in a future version of PHP) in /home/customer/www/wplearninglab.com/public_html/wp-content/themes/buddyboss-theme-child/functions.php on line 108