【Contact Form 7ファイル添付】 問い合わせフォーム ファイル添付方法

WordPress

【Contact form7で画像ファイル添付機能を追加する方法】

お問い合わせフォームでjpgやpngなどの画像ファイルを添付する機能を付けたい人もいるのではないでしょうか??

Contact Form7では、pngやjpgなどの画像やpdfファイルを添付して送信する機能を追加することができます。

Contact FOrm 7を利用したファイル添付機能の説明
 

今回はWordPressで有名なお問い合わせフォームプラグイン「Contact Form 7」でファイル添付する方法をご紹介します。
 

(※)本記事では、WordPress5.6、無料テーマLightningを利用した環境で説明しています。
 

■Contact Form 7 お問い合わせフォームにファイル添付をつける方法(動画解説版)


 


 

(関連記事)Contact Form 7の使い方について

本記事では、Contact Form 7の基本的な使い方がわかっている想定で説明していきます。

もしContact Form 7がインストールされていない、またはまだ使ったことがない場合は「【Contact Form 7の使い方】WordPressで問い合わせフォーム作成」をまず先にご参照ください。

Contact Form 7 プラグイン

 

Contact Form7のフォームの設定をする

フォームにファイル添付機能をつける

まず最初にContact Form7のフォームでファイル添付機能をつけていきます。

ダッシュボードの「お問い合わせ」>「コンタクトフォーム」を選択します。

WordPress お問い合わせフォーム「ContactForm」 お問い合わせが出現。コンタクトフォームを選択

お問い合わせが出現。コンタクトフォームを選択


 

コンタクトフォームの設定画面から、「コンタクトフォーム 1」の編集ボタンを押下します。

編集でお問い合わせフォームの設定を行う

編集でお問い合わせフォームの設定を行う


 

「コンタクトフォーム 1」の編集画面が表示されます。
]お問い合わせフォームの設定画面
 

ファイル添付したい箇所にカーソルを合わせて、「ファイル」ボタンを選択します。
ファイルボタンを押下
 

ファイル添付の設定画面が表示されます。ここでは下記のように設定して「タグを挿入」ボタンを押下します。

  • 名前・・・your-file (名前は初期状態のfile-xxxでもOK)
  • ファイルサイズの上限・・・3mb (左記は3メガバイトの意味です。大きすぎるとメーラーによって送受信エラーがおきるので5mb以内くらいが良いでしょう)
  • 受入可能ファイル形式・・・ jpg|jpeg|png|gif|pdf


 

ファイル添付の仕様について

ファイルサイズの上限を指定しなかったり、受入可能なファイル形式を指定しなかった場合、Contact Form 7 はファイルタイプとファイルサイズにデフォルトの制限を適用します。

デフォルトの受信可能ファイルタイプ (の拡張子) は、jpg、jpeg、png、gif、pdf、doc、docx、ppt、pptx、odt、avi、ogg、m4a、mov、mp3、mp4、mpg、wav, wmv です。

デフォルトの受信可能ファイルサイズは 1MB (1048576 バイト) です。

ファイルのアップロードとメール添付 | Contact Form 7 公式サイト

 

ファイルタグが挿入されました。
ファイルタグが挿入された

他のフォーム部品と同じ様に、ラベルでくくって表示する文言を設定して、「保存」ボタンを押下します。
ラベルや文言設定して保存ボタンを押下
 

つづいて、メール送信時の設定をしていきます。
 

メール送信設定をする

次にメール送信時にファイル添付をする設定をしていきます。
 

メールタブで、[your-file]というメールタグが利用できますので、ファイル添付の欄に[your-file]と入力して「保存」ボタンを押下します。
※後半の「メール2」にはサンクスメール(自動返信メール)ですがファイル添付する必要はないのでここではメール2はそのままの設定にしておきます。
メール送信設定後、保存ボタンを押下
 

(まだ固定ページにContact Form 7のショートコードを設定していない方は)事前に作成した固定ページ「お問い合わせ」に貼り付けてください。


 

プレビューで確認してみましょう。ファイル添付機能がついたお問い合わせフォームが表示されればOKです。
ファイル添付機能がついたお問い合わせフォームが表示
 

ファイル添付できるかフォーム送信テストをする

実際にファイル添付してメール送信してみましょう。
ファイル添付してメール送信テスト
 

該当ファイルが添付されたメールが受信できればOKです。
該当ファイルが添付されたメールが受信できた
 

添付ファイルチェックによる送信エラー

ファイル上限や受入可能ファイル以外の拡張子のファイルを添付した場合は、送信時にエラー画面が表示されます。

■ファイルサイズ上限オーバーのエラー
ファイルサイズ上限オーバーのエラー
 
■受入可能ファイル拡張子エラー(jpegを設定していない場合)
受入可能ファイル拡張子エラー(jpegを設定していない場合)

 
なお、ファイル添付機能有無にかかわらず、Contact Form 7を導入する際はスパム対策をしておくことがおすすめです。GoogleのreCAPTCHAと連携するとスパムメールを防止できるので、実装していない方は実装しておきましょう。
 
参考)【無料スパム対策】Contact Form 7でreCAPTCHAを設定する
 

複数のファイル添付を実装したい場合

複数のファイル添付を実装したい場合も同様の手順で簡単にできます。
 

コンタクトフォームの設定画面>フォームタグで、下記のようにファイル添付を二つ作ります(ここでは[your-file][your-file2])。
フォームタグで、下記のようにファイル添付を二つ作る
 

メールタブでファイル添付のテキストエリア欄に[your-file][your-file2]を追記します。
メールタブでファイル添付のテキストエリア欄に[your-file][your-file2]を追記
 

問い合わせフォームの表示を見てみましょう。二つのファイル添付機能がありますので、実際に試してみてください。
問い合わせフォームの表示後テスト実施
 

メール受信した際に二つの画像が添付されていればOKです。
メール受信した際に二つの画像が添付された
 

まとめ

まとめです。今回はWordPressで有名なお問い合わせフォームプラグイン「Contact Form 7」でファイル添付する方法をご紹介しました。

Contact FOrm 7を利用したファイル添付機能の説明
 

Contact Form7では、pngやjpgなどの画像やpdfファイルを添付して送信する機能を追加することができるので、必要になった際は利用してみてください。

今回は以上になります。最後までご覧いただきありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-,