Contact Form 7にドラッグ&ドロップで複数ファイル添付する

- WordPress -
2021.07.08
WordPress/ワードプレス

Contact Form 7のファイル添付をドラッグ&ドロップでできるようにしたい。複数ファイルを放り込めればなお良し。

そんな方へむけて、解決手順をメモしておきます。

Contact Form 7を拡張するDrag and Drop Multiple File Upload - Contact Form 7というプラグインを追加でインストールして設定します。

出来上がりはこうなるイメージです↓

contact form 7にドラッグ&ドロップ

メモ:

以下、Contact Form 7はすでにインストール・設定済みの想定で書いていきます。

Contact Form 7 ドラッグ&ドロップで複数ファイルの添付手順

以下4ステップです。

  1. プラグインのインストール
  2. 表示メッセージの日本語化
  3. タグの埋め込み
  4. 【完了】フロント表示を確認

1. インストール:Drag and Drop Multiple File Upload - Contact Form 7

Drag and Drop Multiple File Upload

↑これをコピペしてWordPress管理画面の プラグイン > 新規追加 から検索しましょう。

contact form 7にドラッグ&ドロップ

有効化を忘れずに。

2. 表示メッセージの日本語化

このプラグインは、デフォルトではフロントに表示されるメッセージが全て英語になっているのでこれを日本語に変更します。

お問い合わせ > Drag & Drop Upload をクリックする。

contact form 7にドラッグ&ドロップ

「Uploader Info」を以下のように入力すると...

contact form 7に画像をドラッグ&ドロップ

以下のように表示が変わります。

contact form 7に画像をドラッグ&ドロップ

「Error Message」はそのままアップロード時のエラーメッセージで、以下のように入力して...

contact form 7に画像ファイルをドラッグ&ドロップ

たとえばファイルサイズが大きすぎる場合は以下のようなエラーが赤文字デフォルトで出力されます。サイズ上限の設定は後ほど...。

contact form 7に画像をドラッグ&ドロップ

最下部「Minimum File」のエラーメッセージ入力欄だけ少し分かりづらいので補足します。
Minimum File欄に設定したエラーメッセージは、たとえば最低でも2つのファイルアップロードが必要な設定(方法は後ほど...)にした場合に、1つだけアップロードした状態で「送信」を押すと以下のようなエラーが出力されます。

contact form 7に画像ファイルをドラッグ&ドロップ

エラーメッセージ末尾に数字がくる仕様になっているので日本語化すると少し不自然になりますが、許容範囲としましょう。

管理画面で日本語メッセージ入力を終えたら、最後に保存を忘れずに。

3. タグの埋め込み

お問い合わせ > コンタクトフォーム > 対象のフォームを選択

contact form 7に画像ファイルをドラッグ&ドロップ

すると、「multiple file upload」というボタンが追加されているのでクリック。

contact form 7に画像ファイルをドラッグ&ドロップ

生成するフォームタグの設定をします。

contact form 7に画像ファイルをドラッグ&ドロップ

この中で「...??」となりやすいのは「ファイルサイズの上限(バイト)」の部分。

たとえば、1MBをアップロードサイズ上限としたい場合...

  • バイト単位で指定(数字のみ)
    1048576
  • キロバイト単位で指定(末尾にkb)
    1024kb
  • メガバイト単位で指定(末尾にmb)
    1mb

指定しなかった場合は、デフォルトで1MBが上限となります。

「ファイルサイズの上限」は、mb(メガバイト)単位で書く場合は小数点を含めることができない点に注意。「1.5mb」と書いてもエラーにはなりませんが「無視される=デフォルトの1MB上限」となります。

参考公式:ファイルのアップロードとメール添付

「タグを挿入」を押すと、設定したタグが表示されます。

contact form 7に画像ファイルをドラッグ&ドロップ

保存を忘れずに。

4. フロント表示を確認

タグを挿入したので、コンタクトフォームが設置されたページへアクセスしドラッグ&ドロップでファイルアップロードができるようになっていることを確認します。

contact form 7にドラッグ&ドロップ

サイズ上限を超えたファイルをアップロードしたり、上限以上の数のファイルをアップロードしたり、エラーメッセージの確認もしてみてください。

これで設置自体は完了。

Contact Form 7の受信メールにファイルを添付する設定

次は、フォームからファイルアップロードして送信されたメールを受信したとき、メールにファイル添付がされるように設定します。

contact form 7に画像ファイルをドラッグ&ドロップ

メール添付するには設定が必要

「メール」タブをクリックすると下部に「ファイル添付」欄があるので、そこへ[タグの名前]と入力します。

複数のタグを設置した場合は複数並列させて記述します。

これで「保存」をしたあと、再度テスト送信をして受信したメールにファイルが全て添付されていれば成功です。

ここまでで、基本的な設定は全て完了!

以降はもうすこし細かい要求を実現しようとした時に僕がハマったポイントの解決法をメモしています。

メール本文に添付ファイル名"のみ"表示したい【カスタマイズ】

ここまででContact Form 7でドラッグ&ドロップによるファイルアップロード機能は実現できたのですが、

受信するメール本文に、添付した"ファイル名だけ"を表示させたい。デフォルトだとサーバーのファイル格納フォルダパスが丸見え...。

という問題をどう解消するかに悩まされたので、この解決方法について。

具体的に直面した問題
まず、受信メールの本文にファイル名を表示させたい場合は「メール」タブの「メッセージ本文」欄に[タグの名前]を埋めこめばいいのですが...

contact form 7に画像ファイルをドラッグ&ドロップ

これだと受信したメール本文の「添付画像名:」はこのように↓表示されてしまいます。

contact form 7に画像ファイルをドラッグ&ドロップ

困った点:

  1. リンク形式になっている(クリックすると画像が表示される)
  2. 画像が格納されたサーバーのフォルダまでのフルパスが表示されて長すぎる

解決方法

テーマフォルダのfunctions.phpに以下コードをコピペし保存します。

functions.php// メール本文に添付ファイル名のみ表示
function cf7_custom_replaced_tag( $replaced ) {
if( $replaced && strpos($replaced, ',') ) {
    $files = array_map('trim', explode(',', $replaced));
    $html = '';
    foreach( $files as $file ) {
        $html .= wp_basename( $file ).", ";
    }
    return $html;
}
return $replaced;
}
add_filter('wpcf7_mail_tag_replaced_mfile*', 'cf7_custom_replaced_tag');
add_filter('wpcf7_mail_tag_replaced_mfile', 'cf7_custom_replaced_tag');

その後再度テスト送信をして、「ファイル名, ファイル名, ファイル名, ...」のように表示されていればOK。

contact form 7に画像ファイルをドラッグ&ドロップ

もし、「, 」区切りではなくファイル名ごとに改行して表示したい場合↓

contact form 7に画像ファイルをドラッグ&ドロップ

この場合は代わりに以下をコピペしてください。

functions.php// メール本文に添付ファイル名のみ表示(改行区切り)
function cf7_custom_replaced_tag( $replaced ) {
if( $replaced && strpos($replaced, ',') ) {
    $files = array_map('trim', explode(',', $replaced));
    $html = '';
    foreach( $files as $file ) {
        $html .= wp_basename( $file )."\n";
    }
    return $html;
}
return $replaced;
}
add_filter('wpcf7_mail_tag_replaced_mfile*', 'cf7_custom_replaced_tag');
add_filter('wpcf7_mail_tag_replaced_mfile', 'cf7_custom_replaced_tag');

こちらは以下プラグインサポートページQ&Aのプラグイン作者さんのコードを参考にカスタマイズしました。

参考Support:File list presentation in e-mail message

自動返信メール本文にも添付ファイル名"のみ"表示したい【カスタマイズ】

Contact Form 7は、フォームを送信した人(つまりユーザー/読者)にも自動でメールを返信する機能があります。

「メール」タブの保存ボタンの上にチェックボックス 「メール(2)を使用」があるのでチェックを入れると...

contact form 7に画像ファイルをドラッグ&ドロップ

自動返信用のテンプレート設定ができるようになります。添付したファイル名をメール本文に表示したい場合は、これまで同様に[タグの名前]を埋め込む。

contact form 7に画像ファイルをドラッグ&ドロップ

直面した具体的な問題
この設定でテスト送信すると、送信した本人が入力したメールアドレス宛に「添付画像名:」が以下のように届いてしまいます。

contact form 7に画像ファイルをドラッグ&ドロップ

困った点:

  1. リンク形式になっている(クリックすると画像が表示される)
  2. 画像が格納されたサーバーのフォルダまでのフルパスが表示されてしまう

サーバ保持者である自分宛に届くメールならば問題ないが、サイト訪問者に①②の形式でメールが届いてしまうのは回避したい...。

解決方法
テーマフォルダのfunctions.phpに以下コードをコピペし保存します。

functions.php// Contact Form 7 カスタマー自動返信に添付ファイルの名前のみ表示
function customize_mail_2($additional_mail, $contact_form) { 
    $submission = WPCF7_Submission::get_instance();		
    if( $submission ) {
        $links = array();
        $fields = $contact_form->scan_form_tags();			
        $submitted['posted_data'] = $submission->get_posted_data();
        foreach( $fields as $field ) {
            if( $field->basetype == 'mfile') {
                if( isset( $submitted['posted_data'][$field->name] ) && ! empty( $submitted['posted_data'][$field->name] ) ) {
                    if( is_array( $submitted['posted_data'][$field->name] ) ) {
                        foreach( $submitted['posted_data'][$field->name] as $link ) {
                            $links[] = wp_basename( $link );
                        }
                    }
                    $mail_body = $additional_mail['mail_2']['body'];
                    $additional_mail['mail_2']['body'] = str_replace( "[$field->name]", implode( "\n" , $links ), $mail_body );
                }
            }
        }
    }
    return $additional_mail;
}
add_filter('wpcf7_additional_mail', 'customize_mail_2', 10, 2);

その後再度テスト送信をして、ファイル名のみ表示されていればOK。

contact form 7に画像ファイルをドラッグ&ドロップ

さきほどのコードは、以下プラグインサポートページQ&Aのプラグイン作者さんのコードを参考にしました。

参考Support:editing mail_2 output for filenames only

・・・

以上、Contact Form 7を使ってドラッグ&ドロップで複数ファイルをアップロードできるようにする方法でした。

 

▼"なんとなく"から脱出するおすすめテキスト

↑TOP