ContactForm7でファイル送信やテキストエリアで初期値を表示
この記事を読むのに必要な時間は約 18 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
今回は、フォーム送信時にファイル送信を添付したりテキストエリアに初期表示させる言葉を挿入したりする方法などについて解説します。
今回は、難易度高いかもですね。
フォームにファイル送信を添付させる方法
画像やPDFなどをフォーム送信に添付させたい時に上記画像のような形式になりますね。
Contact Form 7を使ってこれを作成するのは、ちょっといろいろやることが多く１つでも抜けると表示できてもファイルが添付されないことがあるので注意してください。
以下に順番に解説していきます。
お問い合わせ作成画面フォーム
まずは、フォーム作成画面で「ファイル」のボタンをクリックして設定していきます。
ファイルをフォームから送信してもらう場合は、いろいろと設定もあります。
送信できるファイルの種類を限定したり、上限のファイルサイズを決めたり・・・
上記では、送信できる上限のファイルサイズと送信できるファイルタイプを指定しています。
何も指定しない場合は、送信できるファイルの上限サイズは、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 内で WPCF7_UPLOADS_TMP_DIR 定数を指定して一時フォルダのパスを設定します。
以下に書き方を表示します。
|
1 2 3 |
/* 例 */ define( 'WPCF7_UPLOADS_TMP_DIR', '/wp-content/uploads/wpcf7_uploads' ); |
下記のページも参考にしてください。
テキストエリアに初期値を表示させる方法
上記画像のように最初から文字を表示しておきたいって時がありますよね
これは、必須指定があるときとない時で書き方が少し違うので気をつけてくださいね。
必須指定なし
|
1 2 3 4 5 6 7 8 |
/* 必須なし */ [textarea your-message ] 悩み 解決策 [/textarea] |
必須指定あり
|
1 2 3 4 5 6 7 8 |
/* 必須あり */ [textarea* your-message ] 悩み 解決策 [/textarea*] |
フォーム送信後にプラグインなしでリダイレクトさせる方法
よく送信後に違うページになること多いですね。
実は、リダイレクトという方法で「お問い合わせありがとうございます」などのページやトップページに移動させることができます。
Contact Form 7では プラグインでやることが多いのですが、今回はそれを使わない方法でできる方法を解説します。
これは、 プラグインが多くなりすぎるのを防ぐための方法でもあります。
「その他の設定」タブの中に JavaScriptを入れることで可能になります。
下記のソースを参考にしてください。
|
1 2 3 4 5 6 7 |
/* JavaScript */ <script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = '移動させたいアドレス'; }, false ); </script> |
上記方法は、非推奨ではありますが簡単にリダイレクトさせることが可能です。
ちょっと難易度あがっても可能ならフォーム送信を Google Analytics でトラッキングするを確認してください。
フォームで独自のスタイルシートを適用させる方法
Contact Form 7でフォーム作成すると基本的に１つのテキストボックスなどは横幅いっぱいになりますね。
２つ並べたいとかしたい場合には、ちょっと スタイルシートで整形してあげる必要があります。
それは、どこで記述するのか？
基本的には、テーマの中にあるstyle.cssの中に記述しておくといいですね。
もしくは、外観→カスタマイズ→追加CSSの中に記述しておきます。
下記に一例を表示します。
|
1 2 3 4 5 6 7 8 9 10 |
/* フィールドのスタイルを指定 */ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { background-color: #fff; color: #000; width: 50%; } |
全体的に指定する場合は、上記の スタイルシートをコピペして改変してください。
特定のフィールドだけをカスタマイズしたい場合は、下記を参考にしてください。
|
1 2 3 4 5 6 7 |
/* 特定のフィールドにスタイルを指定する */ #myname { color: #f00; border: 1px solid #f00; } |
必要な時だけContact Form 7の JavaScriptや スタイルシート場合は、下記のページを参考にしてください。
メールヘッダーを変更して複数でメール確認する方法
フォームに入力された内容をメールで受け取るのですが、１つではなく複数のメールアドレスで受け取ることも可能です。
複数人でサイトを管理している場合にそういった事項が発生します。
そういった場合の指定方法があるので解説しておきます。
記述するのは、「メール」タブの「追加ヘッダー」になります。
下記を参考にしてください。
|
1 2 3 4 5 |
/* メールの追加ヘッダー */ cc: メールアドレス記述 bcc: メールアドレス記述 Reply-To: [your-email] |
設定される場合は、BCCで設定される方がいいですね。
CCで設定するのは、よろしくないようです。
スパムメール対策
残念ながらお問い合わせフォームなどからもスパムメールなどは、かなり多いですね。
Contact Form 7には、さまざまなスパムフィルタリングが用意されています。
そのために プラグインを使うことにはなりますが、お問い合わせスパムなどは、時間の無駄にしかならないので プラグインを使ってでもフィルタリングが必要です。
Akismet によるスパムフィルタリング
Akismetは、他の プラグインのように探さなくても WordPressがインストールされた時に同時にインストールされている プラグインなので有効化すればいいだけです。
JetPackを先に登録しておくと認証が楽だったりします。
下記のページを参考にしてください。
Contact Form 7の中での使い方は、下記を参考にしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* Akismetを使ったタグの書き方事例 */ <label> お名前 (必須) [text* your-name akismet:author] </label> <label> メールアドレス (必須) [email* your-email akismet:author_email] </label> <label> メールアドレス 確認用(必須) [email* your-email_confirm] </label> <label> 題名 [text your-subject] </label> <label> メッセージ本文 [textarea your-message] </label> <label> 画像認証 (必須) [captchac captcha-170] [captchar captcha-170 4/4] </label> [submit “送信”] |
名前とメールアドレスのところにAkismetのタグが追加されています。
Really Simple CAPTCHAで画像認証を入れる
Really Simple CAPTCHAは、Contact Form 7に画像認証を簡単に追加できる プラグインです。
タグは、下記のように入れるだけです。
|
1 2 3 4 |
/* */ <label> 画像認証 (必須) [captchac captcha-170] [captchar captcha-170 4/4] </label> |
タグについては、Contact Form 7のページで解説されています。
下記を参照してください。
応答メッセージボックスを好きな位置に設置する
Contact Form 7からの応答メッセージを目にすることがあります。
この応答メッセージを表示する位置がよくないために、訪問者がたびたびこのメッセージを見落としてしまうことがありますが、位置を変更することができます。
下記を任意の場所に入れておきます。
|
1 2 3 |
/* 応答メッセージボックスタグ */ [response] |
まとめ
今回は、Contact Form 7を使ってあまり使わない機能かもしれないが、知っているといざという時に便利に使うことが可能です。
これら以外にもいろいろと使いたいものがあったりしますが、テーマによって動作が変わったり使うものが違ったりする確認画面を出す方法などがあったりします。
WordPressは、テーマによる影響だけでなく プラグインに頼りすぎるあまり プラグイン同士による干渉などの問題でうまく動作しないことがあるということを知っておいてください。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存