How to Allow Users to Upload Files in CF7 Forms

You can use the file attachment field of Contact Form 7 (CF7) to let users upload files in your website. This may be useful to display profile pictures for social interaction-based websites, to store CVs and cover letters for job search-based websites, or upload student submissions for a school website.

In addition to file upload, CF7 provides an additional feature that automatically sends the uploaded files directly to your email address.

This article will show you how to add file upload fields in CF7 forms and configure the files to be sent to you via email.

Why to allow file upload

Enabling file uploads with your form submissions can improve your website in multiple ways. It;

1. makes sharing important documents easy,
2. enhances the user experience,
3. streamlines communication with your visitors.

Before you begin

But before we get started, you should know how CF7 form tags work. Tags are shortcodes that allow you to add form fields and other elements to your form.

For example, [text* text-field-1] adds a mandatory text field to your form.

Adding a file input field to allow file upload

After creating your initial form, you can now add a file input field to the form. To do this, add the file form tagForm Tag Form Tags in Contact Form 7 (CF7) (in the Form Tab) are used to define all CF7 form fields. Each Form Tag is replaced with an HTML element, which represents an input field, when it is displayed in an actual form.. An example file form tag is:

[file your-file filetypes:pdf|txt limit:2mb]

The file tag allows you some control over the type of file/s you want to allow:

1. filetypes lets you specify the file formats that can be uploaded. You can specify multiple formats using the pipe (|) character.

2. limit lets you specify the maximum file size. You can specify the size limit in kb, mb, or omit the suffix to specify the limit in bytes.

Tip: You can use the free version on CF7 Skins to add all available File Attachment Options quickly & easily using the CF7 Skins Drag & Drop Visual Editor.

Configuring email notification with file attachment

Once you add the file input field to a form, users can upload files that fulfil your set criteria. To receive these attached file/s directly in your inbox, you need to configure the Mail feature of Contact Form 7. You can do that by the following simple steps.

1. Click the Mail tab.

2. In the File Attachments field, add the name of the file input field as a mail-tag.

Tip: To attach multiple files, sequentially add each mail tagMail Tag Mail Tags are used in Contact Form 7 (CF7) (in the Mail Tab) to show information collected from CF7 form fields (in the Form Tab) in emails sent by CF7. after another.

3. Click Save.

Tip: Make sure you match your mail tags with the form tags.

You can also use the CF7 Skins Visual Editor to easily drag-and-drop a file field to your forms with its intuitive graphical interface.