Contact Form7でファイル添付を実装!画像・PDF・複数アップロードまで一気に解説

WordPress

要約

Contact Form 7で「ファイル添付」を安全&確実に使う手順をまとめました。
基本の設定拡張オプションサイズ制限・拡張子制限・複数アップロード)、メールへの添付方法よくあるエラーの直し方セキュリティの注意点まで。
僕は「迷わず設定できた派」ですが、つまずきやすい箇所をピンポイントで解説します。


はじめに

ブログや LP で「資料を送ってほしい」「スクショを添付してほしい」って場面、けっこうありますよね。
僕はContact Form 7 のファイル添付を何度か使っていて、正直ほぼ迷わず設定できたタイプです。時間にして 10〜15 分くらい。

ただし、アップロード上限や拡張子の制限、メールに添付できない問題で止まりやすいのも事実。
この記事では、その辺りを先回りでケアしていきます!

モチベル
ねえねえ、ファイル添付って難しそうじゃない?
りょうへい
大丈夫。“どこで迷うか”だけ押さえればサクッと終わるよ!

Contact Form 7を導入前の方は、こちらで詳しく解説しているのでチェックしてみてください!


ファイル添付の基本をサクッと理解

ファイル添付は「フォームにアップロード欄を置くメール送信時に添付する」だけ。
まずはフォームに「ファイル」タグを追加します。

基本形

[file your-file]
  • file … ファイルアップロード用フィールド
  • your-file … 任意の名前(メールテンプレで参照)
必須化する場合
[file* your-file]

アスタリスク(*)を付けると必須になります。


ステップ 1:フォームにファイル欄を追加

  1. WordPress 管理画面 お問い合わせ 対象フォームを開く
  2. エディタ上部の「ファイル」ボタンをクリックしファイルアップロード項目フォームタグジェネレーターを使用しタグを生成する
  3. サイズ制限や拡張子制限もここで設定可能

ContactForm7 対象フォームを開く
ContactForm7 ファイルをクリック
ContactForm7 ファイルアップロード項目フォームタグジェネレーターを入力
おすすめ設定(画像・PDF 想定)
[file* your-file limit:10mb filetypes:jpg|jpeg|png|pdf]
  • limit:10mb … 最大 10MB
  • filetypes:jpg|jpeg|png|pdf拡張子を限定(セキュリティ上重要)

ContactForm7 問い合わせテンプレートに追加
モチベル
なんで拡張子を限定するの?
りょうへい
“なんでも OK”は危険だから。最低限必要な拡張子だけに絞るのが基本!

ステップ 2:メールに添付する設定

フォームだけだとメールにファイルが付かない場合があります。
メールタブの「ファイル添付」欄項目名を記述します。

[your-file]
  • 複数あるときは改行で並べるだけ
  • your-fileはファイルアップロード項目フォームタグジェネレーターで登録した項目名を入力

ContactForm7 メールタブをクリック
ContactForm7 「ファイル添付」欄に項目名を記述

ステップ 3:複数ファイルを受け付けたい

タグに multiple を付けるだけで OK。

[file your-file multiple limit:20mb filetypes:jpg|jpeg|png|pdf]
  • 合計サイズはサーバーの制限に依存(後述)
モチベル
ボタン 1 個で複数選べるの便利〜!
りょうへい
でも“合計サイズ”には注意。サーバー上限も上げておこう

ステップ 4:サーバー側の上限で弾かれる問題を回避

よくあるつまずきポイントです。
PHP やサーバーの設定値 が低いとアップロードに失敗します。

チェック項目
  • upload_max_filesize(例:10M, 20M)
  • post_max_size(例:20M 以上、upload_max_filesize より大きく)
  • max_file_uploads(例:20)

ConoHa WING 例(.user.ini に追記)

upload_max_filesize = 20M
post_max_size = 25M
max_file_uploads = 20

ContactForm7 user.ini に追記

ステップ 5:バリデーションと UI のコツ

  • 注意書きはラベルの近くに置く
    → 例:「10MB まで/jpg・png・pdf のみ」
  • エラー文言は分かりやすく変更
  • 必須マーク(*)は見出しや太字で強調
モチベル
条件を最初に書くと離脱が減るよ!
りょうへい
問い合わせがスムーズになるんだよね

セキュリティと運用の注意点(超大事)

  • 拡張子を絞る(filetypes: 必須)
  • サイズも絞る(limit:
  • reCAPTCHA (v3 推奨)でスパム対策
  • 保存は基本メール受信。長期保存は Flamingo で管理し、不要になったら削除
  • 社内での取り扱いルールを明確化

reCAPTCHAの導入手順は公式ドキュメントをご確認ください。

reCAPTCHA導入手順公式ドキュメント

実例:りょうへいの最小構成(コピペ OK)

フォームタブ
<label>お名前</label>
[text* your-name placeholder "お名前"]

<label>メールアドレス</label>
[email* your-email placeholder "メールアドレス"]

<label>お問い合わせ内容</label>
[textarea your-message placeholder "お問い合わせ内容"]

<label>添付ファイル</label>
[file* your-file limit:10mb filetypes:jpg|jpeg|png|pdf]

送信できる形式:jpg / jpeg / png / pdf
ファイルサイズ:10MBまで
送信後に自動返信メールが届きます。

[submit "送信する"]
メールタブ ファイル添付欄
[your-file]

your-fileはファイルアップロード項目フォームタグジェネレーターで登録した項目名を入力


よくあるつまずきと対処(QA)

Q
送信できるのに添付されない
A

「ファイル添付」に [your-file] を書き忘れていないか確認しましょう。サーバー上限に引っかかっている可能性もあるので設定値も見直してみてください。

Q
拡張子を指定しても弾かれる
A

filetypes: は小文字で入力し | を拡張子の区切りに追加してください。

Q
複数ファイルが送れない
A

multiple がついているか確認してください。合計サイズがサーバー上限内かもあわせてチェック。

Q
セキュリティが心配
A

必要最低限の拡張子のみ許可し、サイズ制限をしてreCAPTCHA の導入することである程度対策をすることができます。またメールの長期保存は避けるように心がけましょう。


ついでにやっておくと便利な流れ

サンクスページへのリダイレクト

Site Kit でコンバージョン計測

GA4 連携
Search Console 連携
モチベル
送信後の導線を整えると CVR 上がるよ!
りょうへい
“送って終わり”じゃなくて、次の行動を用意するのが大事

まとめ

Contact Form 7のファイル添付は、フォームタグ+メール添付設定+サーバー上限調整 3 ステップで完了します。
僕は困らず進められましたが、 上限設定と拡張子制限 だけは必須。
セキュリティと運用ルールを整えて、安全に運用しましょう!

ContactForm7 完成問い合わせフォーム

コメント