コンタクトフォーム7で画像添付ができるようにする方法【wordpress】
ワードプレスサイトをカスタマイズしたいと考えると、最重要にもなってくるのがお問い合わせフォームです。そのお問い合わせフォームで定番としてよく使われているのが【Contact form7】というプラグイン。そのプラグインを設定して、お問い合わせフォームに画像ファイルが添付できるようになる方法について画像付きで詳しく解説していきます。
写真画像を付けてやり取りができる方が問い合わせ意図を理解しやすくなり、ユーザーの使いやすさもアップする可能性が高いので、是非参考にしてみてください。
こんな人におすすめ
- コンタクトフォーム7の設定に悩んでいる
- ユーザー目線でお問い合わせフォームをカスタマイズしたい
- 画像添付できる設定が上手く機能しない
お問い合わせ画面に画像添付ボタンを設定する方法
フォームにファイル添付機能を付ける
WordPressの管理画面から【お問い合わせ】＞【コンタクトフォーム】をクリック
既存のお問い合わせフォームを使用してもいいですが、今回は【新規追加】をクリック
上の画面がお問い合わせフォームの初期設定です。今回は【題名】と【メッセージ本文】の間にファイル添付ボタンを入れたいと思います
【題名】と【メッセージ本文】の間で改行し、カーソルがその位置にある状態で上部のメニューから【ファイル】をクリック
【ファイル】をクリックすると設定のためのポップアップ画面が現れます（名前の項目の数字はランダム）
設定項目
- 名前 → 初期に出てくる数字のままでOK（自由に変更できます）
- ファイルサイズの上限 → 大きくて5MBまでが一般的（設定なしの場合100MBまでになります）
- 受入可能ファイル形式 → 扱いやすいファイル形式を指定（ jpg,jpeg,png,gif,pdfなど）
今回の設定
- 名前 → 初期に出てくる数字のまま
- ファイルサイズの上限 → 5MBまで
- 受入可能ファイル形式 → jpg,jpeg,png,gif,pdf （ファイル形式は 「,」か「|」で区切る
＊ 使用可能な拡張子 の例
jpg、jpeg、png、gif、pdf、doc、docx、ppt、pptx、odt、avi、ogg、m4a、mov、mp3、mp4、mpg、wav, wmv
動画や音声ファイルなど必要に応じて使い分けてください
ID属性やクラス属性は今回は不要です。設定項目を入力したら、【タグを挿入】をクリック
【タグを挿入】をクリックすると、フォーム画面に赤枠のタグが表示されています
先ほどのタグに<label>【名称】【挿入したタグ】</label>を入力します
上の画像のようにフォームに【ファイルを添付】という項目が入り、画像ファイルなどが送れるようになりました
メール送信の設定をする
次にメール送信時にファイル添付をして送信する設定を行います。この設定を行わないとWordpressからのお問い合わせメールに、せっかく添付してもらった画像ファイルが添付されないまま受信することになってしまうので、忘れないようにしてください。
まずはメールタブを選択してください
今回設定した[file-633]というメールタグが利用できます。[file-633]をコピーします
返信メールの本文の下に【ファイル添付】という項目があるので、そこに[file-633]を貼り付けてください
その後は忘れないように【保存】を必ずクリックしてください。
まとめ
ここまでの設定でお問い合わせフォームに画像ファイルなどを添付することが可能となり、お問い合わせからの自動送信メールにもファイルが添付されて受信ができるようになりました。ビジネスによってよく使用されるファイルや、あなたが扱いやすいファイル形式によって設定を色々と変更すれば、使いやすいお問い合わせフォームになっていきます。
是非、試行錯誤をしながらお問い合わせフォームをカスタマイズしてみてください。
