File uploading and attachment with Contact Form 7

In this post, I will explain the file uploading and attachment feature introduced in Contact Form 7 1.9. If you are not familiar with Contact Form 7, please read the plugin homepage and FAQ first.

Summary

With this feature, you can allow your visitors to upload their files via your form, and then an email with attachments of the files is sent to you.

Please note that this feature uses the API of WordPress 2.7. So, in order to use it, you will need to upgrade your WordPress if you are using WordPress 2.6.x or older.

To set up, two steps are needed: 1) Add file uploading fields in your form, 2) Set up your mail settings to attach the uploaded files. The two steps will be explained in the rest of this post.

Adding file uploading fields in your form

Like other types of form fields, you add a tag code into the Form area in the Contact Form 7 admin panel (Tools > Contact Form 7 in WordPress 2.7).

The tag of file upload feild is like this:

[file your-file]

As with other types of tags, ‘file’ means the type of tag, and ‘your-file’ means the name of the tag.

You can use several options with ‘file’ typed tags. To limit the max file size, use the ‘limit:’ option like this:

[file your-file limit:100000]

The unit of the digits is ‘byte.’ So ‘limit: 100000′ means that the limited max file size is approximately 100 kB.

To limit acceptable file types, use ‘filetypes’ option like this:

[file your-file filetypes:gif|png|jpg|jpeg]

List the file extensions after ‘filetypes,’ and separate them with ‘|’
(pipe) character when you set multiple file types.

You can also generate these tags with the Tag Generator, of course.

Set up file attachments with a mail

For file attachments, the new field File attachments is added in the Mail field set in the Contact Form 7 admin panel. To attach the uploaded files to the mail, put tags into this field as shown below.

File attachments:
[your-file]

As other tags used in the Mail field set, only the name (in this case, ‘your-file’) is needed. Don’t put the tag’s type or options.

If you have multiple files uploaded and want to attach them into an email, simply line them up like this:

File attachments:
[your-file][your-another-file]

---

(Japanese / 日本語)

Contact Form 7 1.9 にて追加されたファイルアップロードとメール添付のサポートについて説明します。Contact Form 7 自体をご存じない場合はプラグインのホームページおよび FAQ をまずご参照ください。

概要

この機能により、フォームにファイルアップロードの項目を追加して、そこからアップロードされたファイルをメールに添付して送ることが可能になります。

まずご注意いただきたいのは、この機能の使用には WordPress 2.7 の API が必要です。従って、もしいま WordPress 2.6.x 以前をお使いなら、まず先に WordPress をアップグレードしないとこの機能は使えません。

この機能のセットアップは2つのステップに分かれます。1) ファイルアップロード項目をフォームに追加すること、2) アップロードされたファイルを添付して送信するようにメールを設定すること、です。これから順を追って説明します。

ファイルアップロード項目のフォームへの追加

他のタイプのフォーム項目と同様ですが、タグをフォームのテキストエリアに追加することにより行います。フォームのテキストエリアは Contact Form 7 の管理パネル(WordPress 2.7 においてはツール > Contact Form 7 メニュー下)にあります。

ファイルアップロード項目のタグはこんな感じです:

[file your-file]

これも他のタイプのフォーム項目と同様、この場合の ‘file’ はこのタグのタイプを、’your-file’ はこのタグの名前をあらわします。

いくつかのオプションをこの ‘file’ タイプのタグに対して使えます。ファイルサイズの上限を指定したいなら ‘limit:’ オプションを以下のように使います:

[file your-file limit:100000]

数字はバイト単位なので、例えば ‘limit:100000′ とした場合の上限ファイルサイズは約 100 kB になります。

アップロードできるファイルの形式を制限したいなら、’filetypes:’ オプションを使います:

[file your-file filetypes:gif|png|jpg|jpeg]

‘filetypes:’ の後に続けて、アップロード可能なファイルの拡張子を並べます。複数指定する場合は ‘|’ で区切ってください。

もちろん手で入力しなくてもタグジェネレーターを使ってタグを生成することもできます。

メールへのファイル添付の設定

メールへのファイル添付のための項目(「ファイル添付:」)が Contact Form 7 管理パネルのメール項目群に追加されています。アップロードされたファイルをメールに添付するには、この項目に次のようにタグを追加します:

ファイル添付:
[your-file]

メール項目群での他のタグの使用と同様ですが、タグの名前(この場合だと ‘your-file’)だけが必要になります。タグのタイプやオプションを加えないでください。

複数のファイルをアップロードできるようにしていて、それらをまとめてメールに添付したい場合は、単純に複数並べれば可能です:

ファイル添付:
[your-file][your-another-file]