Contact Form7のお問い合わせフォームに複数ファイルを添付する方法

Contact Form7のお問い合わせフォームに複数ファイルを添付する方法

ワードプレスで作っているサイトのお問い合わせフォームに、Contact Form7を使っている人は多いでしょう。そのフォームで添付ファイルを送信する設定はできても、やっぱりユーザーの利便性を上げるために、複数ファイルをドラッグ＆ドロップできるようにしたいという方に、プラグインで簡単に設定できる方法を解説します。

Drag and Drop Multiple File Uploadプラグインをインストールする

Contact Form7のお問い合わせフォームに複数ファイルをドラッグ＆ドロップで送信できるようにするために、初心者でも最も簡単な方法が【Drag and Drop Multiple File Upload-Contact Form7】を使用することです。プラグインのContact Form7のための専用プラグインになってます。

【プラグイン】＞【新規プラグインを追加】をクリックして、キーワード入力に【Drag and Drop Multiple File Upload】を入力してください。上の画像の赤枠のContact Form7用のプラグインの右上にある【今すぐインストール】をクリック。インストールが完了したら【有効化】をクリックしてください。

Drag and Drop Multiple File Uploadプラグインを設定する

インストールと有効化が完了したら、次は管理画面のメニュー【お問い合わせ】から【Drag ＆ Drop Upload】クリック

アップローダーの設定について入力していきます。日本語対応はしていませんが、難しくはないので一つ一つ例を入れて解説します。そのまま同じ入力をしても問題ありません。

入力が完了したら【変更を保存】をクリック

【Uploader Info】についての入力は、フォーム上やフォームでアクションをした時に表示される文字についての設定です。ファイル指定や最大ファイル数などの指定は、この入力に従って【Contact Form7】で設定することになります。

Contact Form7の設定

管理画面の【お問い合わせ】メニューからコンタクトフォームを開くと、【Multiple File Upload】というタブが選択できるようになっています。

タグを挿入したい箇所にカーソルを合わせて【Multiple File Upload】をクリック

必要な項目が入力できたら【タグを挿入】をクリック

挿入できたタグを<label></label>で囲んで、ユーザーに分かりやすいように必要なメッセージを入力してください。

実際のフォーム画面では、上の画像のようにファイルをアップロードできるエリアができました。（デザインはテーマなどによって少し違ってきます）

お問い合わせの自動メールにファイルが添付されるように設定

【フォーム】タブの横にある【メール】タブをクリック

このフォームに対する自動返信メールの設定画面になります。（今回は自動返信メール設定の詳細は省きます）
画面を下にスライドしてください。

【ファイル添付】という項目が、自動返信メールに添付するファイルの設定になります。

右の欄内に先ほどフォームでタグを設定したファイル名が入っていればOKです。（自動で入力されている場合もあります）

まとめ

以上でContact Form7を使用したお問い合わせフォームにドラッグ＆ドロップできる機能や複数ファイルを添付する設定は完了です。

ただ、ワードプレスの設定やメールの設定、セキュリティ設定の関係で送信ができなかったり、自動メールが届かないケースがありますので、本格的に活用する前にテストをしっかりとしておいて、ユーザーに不便をかけないようにしておきましょう。

>>>>>> 2週間無料でお試しできる <<<<<<

さくらのレンタルサーバーを見る