ContactForm7でファイル送信やテキストエリアで初期値を表示

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 18 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

 WordPressでフォームを使う場合にContact Form 7 プラグインで使う方は、多いですがちょっと特殊になるとできない方も多いですね。
今回は、フォーム送信時にファイル送信を添付したりテキストエリアに初期表示させる言葉を挿入したりする方法などについて解説します。
今回は、難易度高いかもですね。

 

目 次

 

フォームにファイル送信を添付させる方法

ファイル添付
画像やPDFなどをフォーム送信に添付させたい時に上記画像のような形式になりますね。
Contact Form 7を使ってこれを作成するのは、ちょっといろいろやることが多く1つでも抜けると表示できてもファイルが添付されないことがあるので注意してください。
以下に順番に解説していきます。

お問い合わせ作成画面フォーム

フォーム作成画面
まずは、フォーム作成画面で「ファイル」のボタンをクリックして設定していきます。
ファイルをフォームから送信してもらう場合は、いろいろと設定もあります。
送信できるファイルの種類を限定したり、上限のファイルサイズを決めたり・・・

ファイル送信設定
上記では、送信できる上限のファイルサイズと送信できるファイルタイプを指定しています。
何も指定しない場合は、送信できるファイルの上限サイズは、1MBに設定されています。
また、使えるファイルタイプは、以下の通りですね。
jpg、jpeg、png、gif、pdf、doc、docx、ppt、pptx、odt、avi、ogg、m4a、mov、mp3、mp4、mpg、wav, wmv

お問い合わせ作成画面メール

送信メール設定
送信メール設定
メール送信してもらうための設定を行います。
メール本文のところだけでなく下にある「ファイル添付」のところにも記載しておく必要があります。
複数添付してもらう場合に20MB~25MBを超えないように設定しないとメール送信できない可能性と受信も厳しい場合があります。

ファイル保存ディレクトリ確認

ディレクトリ
Contact Form 7をインストールしただけではディレクトリが作成されてないのですが、ファイル添付の設定すると通常は自動で作成されているはずなのですが・・・
一時フォルダはデフォルトでは wp-content/uploads/wpcf7_uploadsに作成されることになってます。

wp-configへの追加

wp-config.php
wp-config.php 内で WPCF7_UPLOADS_TMP_DIR 定数を指定して一時フォルダのパスを設定します。
以下に書き方を表示します。

下記のページも参考にしてください。

 

テキストエリアに初期値を表示させる方法

テキストエリア
上記画像のように最初から文字を表示しておきたいって時がありますよね
これは、必須指定があるときとない時で書き方が少し違うので気をつけてくださいね。

必須指定なし

必須指定あり

 

フォーム送信後にプラグインなしでリダイレクトさせる方法

リダイレクト
よく送信後に違うページになること多いですね。
実は、リダイレクトという方法で「お問い合わせありがとうございます」などのページやトップページに移動させることができます。
Contact Form 7では プラグインでやることが多いのですが、今回はそれを使わない方法でできる方法を解説します。
これは、 プラグインが多くなりすぎるのを防ぐための方法でもあります。

リダイレクト設定
「その他の設定」タブの中に JavaScriptを入れることで可能になります。
下記のソースを参考にしてください。

上記方法は、非推奨ではありますが簡単にリダイレクトさせることが可能です。
ちょっと難易度あがっても可能ならフォーム送信を Google Analytics でトラッキングするを確認してください。

 

フォームで独自のスタイルシートを適用させる方法

スタイルシート
Contact Form 7でフォーム作成すると基本的に1つのテキストボックスなどは横幅いっぱいになりますね。
2つ並べたいとかしたい場合には、ちょっと スタイルシートで整形してあげる必要があります。
それは、どこで記述するのか?
基本的には、テーマの中にあるstyle.cssの中に記述しておくといいですね。
もしくは、外観→カスタマイズ→追加CSSの中に記述しておきます。
下記に一例を表示します。

全体的に指定する場合は、上記の スタイルシートをコピペして改変してください。
特定のフィールドだけをカスタマイズしたい場合は、下記を参考にしてください。

スタイルシートID指定

必要な時だけContact Form 7 JavaScript スタイルシート場合は、下記のページを参考にしてください。

 

メールヘッダーを変更して複数でメール確認する方法

メール受信
フォームに入力された内容をメールで受け取るのですが、1つではなく複数のメールアドレスで受け取ることも可能です。
複数人でサイトを管理している場合にそういった事項が発生します。
そういった場合の指定方法があるので解説しておきます。

メールのヘッダー
記述するのは、「メール」タブの「追加ヘッダー」になります。
下記を参考にしてください。

設定される場合は、BCCで設定される方がいいですね。
CCで設定するのは、よろしくないようです。

 

スパムメール対策

スパムメール
残念ながらお問い合わせフォームなどからもスパムメールなどは、かなり多いですね。
Contact Form 7には、さまざまなスパムフィルタリングが用意されています。
そのために プラグインを使うことにはなりますが、お問い合わせスパムなどは、時間の無駄にしかならないので プラグインを使ってでもフィルタリングが必要です。

Akismet によるスパムフィルタリング

Akismet
Akismetは、他の プラグインのように探さなくても WordPressがインストールされた時に同時にインストールされている プラグインなので有効化すればいいだけです。
JetPackを先に登録しておくと認証が楽だったりします。
下記のページを参考にしてください。

Contact Form 7の中での使い方は、下記を参考にしてください。

名前とメールアドレスのところにAkismetのタグが追加されています。

Really Simple CAPTCHAで画像認証を入れる

画像認証
Really Simple CAPTCHAは、Contact Form 7に画像認証を簡単に追加できる プラグインです。
タグは、下記のように入れるだけです。

タグについては、Contact Form 7のページで解説されています。
下記を参照してください。

 

応答メッセージボックスを好きな位置に設置する

応答メッセージボックス
Contact Form 7からの応答メッセージを目にすることがあります。
この応答メッセージを表示する位置がよくないために、訪問者がたびたびこのメッセージを見落としてしまうことがありますが、位置を変更することができます。
下記を任意の場所に入れておきます。

 

まとめ

今回は、Contact Form 7を使ってあまり使わない機能かもしれないが、知っているといざという時に便利に使うことが可能です。
これら以外にもいろいろと使いたいものがあったりしますが、テーマによって動作が変わったり使うものが違ったりする確認画面を出す方法などがあったりします。
 WordPressは、テーマによる影響だけでなく プラグインに頼りすぎるあまり プラグイン同士による干渉などの問題でうまく動作しないことがあるということを知っておいてください。

 


 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!