Attach Files to a Form with Contact Form 7 in WordPress

by

Subscribe to my channel:  

Sometimes we want to create a form in which the visitor of our website can add an attachment. thanks to the plugin Contact Form 7 this task is simple. It's simple but we have to take into account a couple of details that can drive you crazy if you don't take them into account.

Once the plugin is installed and activated, the “Contact” item will appear in the side menu of the WordPress administration area, as seen on the following screen:

menu-contact-form-7

If we click on Add new we can create a new form and in it we will create our field so that the visitor can attach a file, now we will see how:

form-contact-form-7

In the menu on the right we click on "Generate label" and within the menu that appears we click on "File upload".

At this time we will see the following screen:

upload-files-contact-for

On this screen we have to buy the following code from the right to the left: [file file-803]. This will make the field appear to attach the file but there is another very important step so that when the user sends the form we receive the attached file. and it is copy [file-803] in the following place:

attach-file-contact-fo

This is one of the steps that I did not do and it drove me crazy because the attached file did not arrive.

If we want to add the form to a page, we have to copy the code that it gives us in a post or page:

code-form

Now I create a page and paste that code and the result is as follows:

result-contact-form-7

Another thing to keep in mind is that the contact form 7 plugin is limited to 1mega files by default. If we want to upload it, we have to indicate it in the corresponding field:

limit-size-files-for

As you see in the previous image I have put "5000000" in the "File size limit (bytes)" field. What I am doing is limiting the size of the attached file to 5Megas. When I do this, the code I have to use appears:

[file file-647 limit:5000000]

I hope it has been useful to you 😉

38 comments on “Attach Files to a Form with Contact Form 7 in WordPress”

  1. Hello! I have read your article but I still have problems and I have not found anywhere, let's see if you know the solution.

    The way I see it I do everything I have to do but when I receive the email instead of having an attachment it sends it to me as plain and clear text, a set of strange characters is seen. Do you know why it can happen?

    Thank you very much.

    • Hello, thank you very much for your comment 😉
      I have tried it on several websites and it works for me on all of them. The problem I had is the one I mentioned in the article about filling in the attached file field.
      If you give me the address I can take a look at it.
      All the best
      Oscar

      • Hello again. Thank you for responding quickly.

        The website is yawork.es, and I have the impression that it is a strange error because neither in English nor in Spanish have I found anyone that has happened to it (or I have not known how to search).

        Thank you again.

    • Hello,
      I had misplaced your last message 😉
      At first glance I don't see anything unusual.
      The only thing I can think of is that you have not filled in the attached file field with [file file-xxx]
      But I guess you have.
      Without entering the admin area I can't think of anything else, sorry.
      regards
      Oscar

  3. Thank you very much, it has been wonderful. I take this opportunity for a consultation. I want the email field to have to be entered twice to avoid mistakes, do you know if it is possible with this plugin?

    regards

    • Hello Pau, when you are generating a tag to add the attachment you can put the allowed files in the “Valid file format (optional)” field.
      The default extensions are «jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. »
      I hope it works for you 😉
      Oscar

  7. Hello Oscar.

    I have created a contact form to which I have added the upload of files and it works perfectly.

    What I want to try now is to change the style of the "Select File" button. I want to place it to the right of the box and have its color match the theme.

    Any help would be greatly appreciated.

    thank you and hug

  8. Good morning Oscar, it's a pleasure to greet you. I saw your video of Contact Form 7 and it clarified many doubts in the handling of this plugin, but I have a query. My page is a page for musicians and well, I would like to know how to make the plugin attach .zip files to that the artists can send all their information, and two if it could not be done, how can it be done so that the user can send different attachments in a single email, greetings

    • Hello Omar,
      Thank you for your comment 😉
      In this tutorial I precisely say how to add files.
      Regarding adding several, you could do it by adding several file upload fields.
      All the best
      oscar

  10. Hello! Thanks for your tutorial!

    I have followed all the steps, but I have not found a solution to receive the attachments within the email, from what I have investigated, it seems that they are saved within the server, but 1, I cannot find the path where the files are being saved and 2 I would like the files to arrive directly attached to the email.

    I would be very grateful if you know the solution to this problem. Greetings! 🙂

    • Hello Andrea,
      If you follow all the steps and your server allows it, it sends you the files attached to the email, I have it working that way. On some occasion I have seen that a colleague did not work for him due to server limitations.
      regards
      Oscar

  11. Hi Oscar, excellent article!

    I would like to know if it is possible to use the plugin only for Word Press. I would like to create a survey in Google Forms and at the end include a segment for respondents to upload a file.

    Does this tool work for Google Forms?

    Do you know any other?

    Thank you!
    Maia

    • Hello Maia,
      Thank you very much for your words 😉
      With contact form 7 it cannot be used with Google Forms, they are two different tools.
      As soon as I can I will create a tutorial on Google Forms 😉
      regards
      Oscar

  12. Magnificent, as always Oscar, I've tried it and it works great, I hadn't realized that there was a limitation of file formats, I'll expand the spectrum, thank you very much for these tutorials they are great!

  14. Hello

    I have a question:

    Is there a way to add the "attach file" field to the checkout in WooCommerce? Is there a plugin or something to do to achieve this?

    first of all, Thanks.

  15. Many thanks. I was going crazy with the attachments that did not reach me and I had not seen that you had to fill in the file field in the mailbox.
    Now I'm doing great and it's thanks to you
    Salu2.

  18. Thank you very much for the tutorial, I was getting nervous because there was no way to get it, the contact form seems like a very simple plugin but in reality it has its background behind it!

    Thanks!

Leave a comment