プラグイン WordPress

【Contact Form 7】複数ファイルをドラッグ&ドロップを出来るプラグイン『Drag and Drop Multiple File Upload』の使い方

2022年8月25日

※ 当サイトではアフィリエイト広告を利用しています

Contact Form 7で複数のファイルのアップロードをドラッグ&ドロップで出来るようにしたいけど出来る?

Contact From 7でファイルをアップロードする場合、デフォルトではこのように表示されます。

Contact Form 7:ファイル選択

Contact Form 7:ファイル選択

ここにドラッグ&ドロップすることも出来ますが・・・見た目でそうとは分かりにくいと思いますし、1つしかアップロード出来ません。

そこで今回は見てすぐドラッグ&ドロップが出来ると分かるプラグイン『Drag and Drop Multiple File Upload』を解説します。

このプラグインは複数ファイルをドラッグ&ドロップすることも可能です。

Contact Form 7の基本的な使い方については以下の記事を参照下さい。

あわせて読みたい
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

Contact Form 7でファイルのドラッグ&ドロップ機能を追加する方法

今回の手順は以下のようになります。

  1. プラグインをインストール&有効化
  2. フォームタグ作成
  3. テキスト変更

前提としてContact From 7をインストールして、お問い合わせフォームは作成済とします。

 

プラグインのインストールと有効化

まずはプラグインをインストールして有効化します。

管理画面の『プラグイン新規追加 』から『Drag and Drop Multiple File』と検索して見つかったら『今すぐインストール』をクリックしてそのまま『有効化』をクリックします。

WordPress管理画面:プラグイン新規追加

WordPress管理画面:プラグイン新規追加

 

フォームタグ作成

それでは早速作成してあるお問い合わせフォームを見てみます。

Contact From 7:フォームタブ

Contact From 7:フォームタブ

プラグインを入れたので『multiple file upload』というフォームが追加されています。

通常はその右にある『ファイル』からフォームを作成しますが、今回は『multiple file upload』から作成します。

フォームをクリックするとこちらが表示されます。

Contact From 7:multiple file uploadフォーム作成画面

Contact From 7:multiple file uploadフォーム作成画面

1つずつ解説します。

  • 項目タイプ:入力必須にする場合チェック
  • 名前:フォームの名前を記入(上記はデフォルトの名前)
  • ファイルサイズの上限:バイトで記入
  • 受け入れ可能なファイル形式:複数ある場合は『jpg|png』のようにパイプで区切る
  • Minimum file upload:最小アップロード数
  • Max file upload:最大アップロード数
  • ID属性:idを付与
  • クラス属性:classを付与

『ファイルサイズの上限』と『受け入れ可能なファイル形式』は通常のファイルでもありますが『Minimum file upload』と『Max file upload』は今回のプラグインを入れた時だけになります。

ファイルサイズの上限の注意ポイント

通常のファイルでは2MBの場合は『2mb』と書けば大丈夫ですが、このプラグインの場合は○mbという書き方は使えないのでご注意下さい。

1MBであればバイトでは1048576になります。

単位の変換は以下のサイトが便利です。

バイト換算 - 高精度計算サイト

それ以外は他のフォームにもある共通の項目になります。

ファイルを含む各フォームについては以下の記事を参照下さい。

あわせて読みたい
【Contact Form 7】お問い合わせフォームのカスタマイズ方法
【Contact Form 7】お問い合わせフォームのカスタマイズ方法

続きを見る

そして今回はこのような設定で作成します。

Contact From 7:multiple file uploadフォーム作成画面

Contact From 7:multiple file uploadフォーム作成画面

作成したら右下の『タグを挿入』をクリックします。

そしてフォームが作成されました。

Contact From 7:フォームタブ

Contact From 7:フォームタブ

ここで右上か下にある『保存』ボタンをクリックしたら、一旦どのように表示されるか確認してみましょう。

Contact From 7:multiple file uploadフォーム

Contact From 7:multiple file uploadフォーム

これでも分からなくはないですが、出来れば日本語にしたいですよね。

テキストの変更はプラグインの設定から出来ます。

 

テキスト変更

プラグインの設定は管理画面のお問い合わせの中にある『Drag & Drop Upload』になります。

Drag and Drop Multiple File Uploadの設定

Drag and Drop Multiple File Uploadの設定

クリックするとこちらが表示されます。

Drag and Drop Multiple File Uploadの設定:Uploader Info

Drag and Drop Multiple File Uploadの設定:Uploader Info

先ほど表示されていたフォームにはこちらのテキストが反映されていたので、ここを次のように変えてみます。

Drag and Drop Multiple File Uploadの設定:Uploader Info

Drag and Drop Multiple File Uploadの設定:Uploader Info

こちらはコピペ用です。

Drag & Drop Textここにファイルをドロップして下さい・または
Browse Textファイルを選択

『Heading Tag』は1行目のテキストのタグになります。

必要に応じて変えれば大丈夫ですが、よく分からなければそのままでいいでしょう(H1やH2にはならないと思います)

一番下の『変更を保存』をクリックしたらもう一度表示を見てみます。

Contact From 7:multiple file uploadフォーム

Contact From 7:multiple file uploadフォーム

ちゃんとテキストが反映されました。

 

エラーメッセージ変更

あとはエラーメッセージもデフォルトから変更できます。

先ほどの『Uploader Info』の下に『Error Message』があります。

Drag and Drop Multiple File Uploadの設定:Error Message

Drag and Drop Multiple File Uploadの設定:Error Message

ここもデフォルトだと英語なので、以下のように書きます。

Drag and Drop Multiple File Uploadの設定:Error Message

Drag and Drop Multiple File Uploadの設定:Error Message

こちらはコピペ用です。

File exceeds server limitファイルがサーバーの最大アップロードサイズを超えています。
Failed to Uploadファイルのアップロードが失敗しました。
Files too largeファイルが大きすぎます。
Invalid file Typeアップロードされたファイルの形式は許可されていません。
Max File Limitアップロードできるファイル数は%count%個までです。
Minimum File最低限アップロードが必要なファイル数

 

Contact From 7のファイル受信設定

最後にContact From 7のファイル受信設定をします。

Contact Form 7】お問い合わせフォームのカスタマイズ方法にも書いていますが、まずフォームタブで作成したフォームを確認します。

Contact From 7:フォーム作成画面

Contact From 7:フォーム作成画面

フォーム名は[your-file]になります。

そしてメールタブを見ると、フォームタブで作成したフォーム名が表示されています。

Contact From 7:メールタブ

Contact From 7:メールタブ

今回使用するのは[your-file]になります。

これをコピーして、下にスクロールすると表示されるに貼り付ければ完了です。

Contact From 7:ファイル添付

Contact From 7:ファイル添付

これでお問い合わせメールを受信したらファイルも添付されます。

最後にエラーメッセージやファイル数、ファイル形式などが設定通りになっているか確認しましょう。

以上になります。

関連記事Contact Form 7 関連記事一覧

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!
  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-プラグイン, WordPress
-