PHP・機能実装NOTE 08 / DEVELOPMENT

ファイル添付付きお問い合わせフォームの作り方|PDF・画像の容量と安全対策

PDF・画像を添付できるお問い合わせフォームの設計ガイド。形式・点数・容量、PHPとメールの上限、一時保存、サーバー側の検証、公開前のテストを解説します。

フォームに資料や写真を添付できると、文章だけでは伝わりにくい相談を受けやすくなります。ただし、ファイル選択欄を追加するだけでは完成しません。許可形式・点数・容量を決め、サーバー側で検証し、確認画面やメール送信後のファイルの扱いまで設計します。

この記事では、既存テンプレートの導入や改修前に確認したい点を整理します。断片的なコードをコピーして公開するのではなく、処理全体の仕様を確認するためのガイドです。

先に、添付してもらう目的を決める

問い合わせで状況写真が必要なら画像、採用応募で履歴書が必要ならPDFなど、目的から許可する形式を絞ります。何でも受け付ける設定は、確認する側の負担も増やします。

  • 受け付ける資料:写真、履歴書、参考資料など。
  • 許可する形式:拡張子と実際のファイル種別。
  • 添付点数:最低何点必要で、最大何点までか。
  • 容量:一ファイルの上限と送信全体の上限。
  • 渡し方:通知メールに付けるか、別の方法で確認するか。

条件はファイルを選ぶ前に示します。「PDFのみ・1点・5MBまで」のように具体的に書くと、利用者が準備できます。この数値は説明例であり、採用する製品とサーバー設定に合わせて変更してください。

ブラウザーの選択補助と、サーバーの検証を分ける

input type="file"でファイルを選択できます。acceptで選択する形式の目安を指定できますが、アップロードされた内容の検証にはなりません。役割はMDNのファイル入力リファレンスを参照してください。

通常のHTMLフォームからファイルを送る場合は、送信方法やmultipart/form-dataの設定も必要です。送信先では、アップロードのエラー、容量、許可された形式を確認します。ブラウザーから渡されたファイル名や種別を、そのまま信用しない設計にします。

実装では許可形式の限定、保存名の生成、公開領域からの分離、サイズ制限などを組み合わせます。具体的な検討項目はOWASPのファイルアップロード対策で確認できます。

容量制限はフォーム・PHP・メールの三段階で見る

添付で確認する制限
場所確認内容
フォーム本体許可する形式、点数、一件あたりの容量
PHP・Webサーバー一ファイルとリクエスト全体の上限、タイムアウト
メール送信・受信側メッセージ全体の容量、添付を拒否する条件

PHPではupload_max_filesizeとpost_max_sizeなどが関係します。複数ファイルの場合、各ファイルが上限未満でも合計が全体上限を超えることがあります。PHP公式マニュアルのアップロードの注意点と実環境の設定を確認してください。

メールは添付の符号化などで元のファイルより大きくなるため、元ファイルの合計だけで送信可能とは判断できません。大容量資料を日常的に受ける用途なら、メール添付以外の受け渡しも検討します。

確認画面で戻ったときと、途中で離脱したときを考える

入力から確認へ進む間、ファイルを一時保存する仕組みでは、保存場所と削除のタイミングを確認します。利用者が確認画面から戻り、別のファイルへ変更したときに、古いファイルが送られないことも必要です。

送信を完了せず閉じた場合のファイルも残ります。「一時間で削除」などの説明がある場合、定期処理で消すのか、次のアクセス時に期限切れを消すのかまで見ます。運用上の保存時間は同じとは限りません。

公開前に試すファイルの組み合わせ

  • 許可された形式で上限内のファイル。
  • 添付なし。任意の仕様ならそのまま送信できるか。
  • 容量超過と、許可されていない形式。
  • 複数添付で全体上限に近い組み合わせ。
  • 日本語や長いファイル名、同じ名前の別ファイル。
  • 確認画面から戻り、差し替え・削除した場合。

テスト用の内容だけを使い、管理者の受信まで確認します。ファイル選択に失敗したとき、他の入力をやり直さず修正できるかも見ておきましょう。

FreelanceFormの添付仕様を照合する

現行の機能一覧では、標準お問い合わせ見本はPDF・JPEG・PNGを最大2ファイル、採用応募はPDFを1ファイル、いずれも1ファイル最大5MBと案内しています。添付欄のない用途もあるため、選ぶ用途ごとに確認してください。

ファイル本体は管理者通知に添付され、自動返信にはファイル名が記載されます。サーバー側の制限も合わせて確認し、納品前チェックに添付あり・なしの両方を含めましょう。

THANKS FOR READING.ページの先頭へ
YOUR NEXT STEPFROM KNOWING TO MAKING. ↗

学んだことを、
次の制作案件へ。

フォームの土台があれば、デザインにもっと向き合える。HTML・CSSで編集できる、買い切りのお問い合わせフォーム。

FreelanceFormを見てみる HTML・CSSで編集 / 10デザイン / 買い切り