ContactForm7 Multiple Files Uploading Feature

Multiple files uploading with Contact Form 7

How to make “Upload/Attach multiple files” feature with Contact Form 7 WordPress plugin. You can see a working example here:

1. First of all, predefine set of file-upload inputs in plugin’s admin section:

<p class="hide_this">[file file-01]</p>
  <p class="hide_this">[file file-02]<a class="del_file" href="#">Delete</a></p>
  <p class="hide_this">[file file-03]<a class="del_file" href="#">Delete</a></p>
  <p class="hide_this">[file file-04]<a class="del_file" href="#">Delete</a></p>
  <p class="hide_this">[file file-05]<a class="del_file" href="#">Delete</a></p>
  <a href="#" class="add_file">Add Another file</a>

Set 5 (you can do more if you wish) inputs and links to “add” and “delete”. I also added some markup. You can see this step below:

2. Also, don’t forget to put the code [file-01][file-02][file-03][file-04][file-05] into “File attachments” field.

You can see this step below:

3. Then add some functionality with jQuery.

<script type="text/javascript">

    //hide all inputs except the first one

    //functionality for add-file link
    $('a.add_file').on('click', function(e){
      //show by click the first one from hidden inputs

    //functionality for del-file link
    $('a.del_file').on('click', function(e){
      //var init
      var input_parent = $(this).parent();
      var input_wrap = input_parent.find('span');
      //reset field value
      //hide by click


ContactForm7 Multiple Files Uploading Feature
Article Name
ContactForm7 Multiple Files Uploading Feature
Multiple files uploading with Contact Form 7 - How to make "Upload/Attach multiple files" feature with Contact Form 7 Wordpress plugin.
Publisher Name
Publisher Logo

I believe in synergy skills for creating quicker, more efficient experiences in technology and workflows I am a Photo Restoration artist & SEO consultant specialising in small business and start-ups.

Leave a Comment

    • dani
    • December 16, 2019

    Hi, Can you please mentioned the location where can I paste that script. Looking forward to hearing from you soon!

    • Hi Dani

      Anywhere on the page where the form is located.I usually add just below the form

    • Alex
    • March 2, 2019

    Very simple. Thanks for good solution!

    • Blix
    • December 11, 2018

    Don’t worry. I fixed it by changing the classes and duplicating the script with the new classes edited it. Cheers. This script is really helpful. I’ve no idea why CF7 doesn’t have better support for multiple file uploads.

    • Blix
    • December 11, 2018

    Hi there. I’ve just set this up, which is great, but I have two different forms side by side. On the right one, there is only an ‘add another file’ link and no ‘browse’ button. When I click ‘add another file’ it adds a ‘browse’ button to the left form. I’ve set the limit to 5. So, when 5 have appeared on the left form, 5 begin to appear on the right.
    Any ideas why?

    Thanks in advance