WordPressサイトに問い合わせフォームを設置できる多機能なプラグイン「Contact Form 7」の使い方や設定、フォームのカスタマイズ方法をご紹介します。
Contact Form 7はWordPress問い合わせフォームの定番プラグインで、簡単な初期設定とショートコード追加だけで、問い合わせフォームが使えるようになります。
フォームから入力できる項目も、テキストや数値、日付の他に、ドロップダウンメニューやラジオボタンなど盛りだくさんで、ファイル送信機能も追加できます。
自動返信メールの設定も簡単で、Contact Form 7用のプラグインを別途追加すれば、スパム対策やセキュリティ強化、項目の集計など、様々な機能を追加できるようになります。
Contact Form 7は利用者も多く、開発者は日本人なので安心して使えますよ。
Contact Form 7 インストール
では、Contact Form 7をインストールしましょう。ダッシュボードの「プラグイン」→「新規追加」に進みます。
右上の検索窓に「Contact Form 7」と入力するとプラグインが表示されるので、「今すぐインストール」→「有効化」してください。
Contact Form 7 設定と使い方
続いて設定に移ります。とりあえず必要最低限の設定で、実際に使えるかどうかテストしてみましょう。ダッシュボードから「お問い合わせ」→「コンタクトフォーム」に進みます。
タイトルの「コンタクトフォーム1」をクリックして、コンタクトフォームの編集に移ります。
フォームのタイトルは変更できます。そのままでも支障はありませんが、フォームが増えても識別できるように、名前を設定するようにしましょう。
パネルタブの「メール」から、送信先と送信元のメールアドレスを変更します。
送信先にはこのフォームから送信されたメールを受信するメールアドレスを入力します。自分のドメインで作成したメールの他に、Yahoo!メールやGmail といったフリーメールも送信先に指定できます。
送信元にはこのフォームが設置されているドメインと同じメールアドレスを入力します。［your-name］の後にある＜ ＞で囲まれた部分です。デフォルトでは「wordpress@ドメイン名」が入ります。
ここで注意点を一つ、送信元に別ドメインのメールアドレスを入力すると、「サイトのドメインに属していないメールアドレスが送信元に設定されています。」というエラーメッセージが表示されます。
Contact Form 7 の「設定検証についての FAQ」で理由や回避方法が解説されていますが、送信メールがスパムや偽装メールなどの扱いを受けないように、メールとサイトのドメインを以下の例のように一致させましょう。
ドメイン名： https://mailtest.com
送信元 ： test@mailtest.com
一番いいのは、ドメインと送信先・送信元を一致させることです。これなら問い合わせメールに返信しても、差出人がサイトのドメインと同じメールアドレスになります。
メールアドレスを変更したら「保存」をクリックして、表示されているショートコードをコピーしてください。
コピーしたショートコードを、投稿や固定ページ内にペーストして公開してください。サイト内に別途問い合わせ用の固定ページを作るのが一般的です。
設置した問い合わせフォームはこんな感じになります。
各項目を入力して「送信」すると、「ありがとうございます。メッセージは送信されました。」というメッセージが表示されます。
メールはこのような形で送信されてきます。もちろん、入力項目を増やしたりカスタマイズすると、送信されてくる内容も変わります。
問い合わせフォームのカスタマイズ
メールの送信ができたら、次はContact Form 7をカスタマイズしてみましょう。
まずはお問い合わせフォームの入力項目を追加します。「フォーム」に並んだフォームタグ生成ボタンをクリックすると、各項目が追加されます。
続いて設定した項目のタグをフォームにコピペするか、フォーム内でタグを入れたい場所を指定して「タグを挿入」すると、入力項目が追加されます。
フォームに新しい入力項目が追加されました。
次に上の「メール」タブで、追加した項目のメールタグをメッセージ本文に貼り付けます。これを忘れると、送信されたメール内に入力内容が反映されません。最後の「保存」もお忘れなく。
テキスト・メールアドレス・URL・電話番号の設定
では最初に「テキスト」項目を追加してみましょう。この項目は名前や住所など、1行で済む入力内容に使います。
また、テキストはメールアドレス、URL、電話番号の入力にも使えますが、この3つはそれぞれ専用のタグが用意されているので、各項目に合ったタグの使用をオススメします。これら4項目はすべて同じ設定内容です。
- 項目タイプ：必須入力であればチェックします。必須入力の項目を空白のままにして送信ボタンを押すと、再入力を求められます。
- 名前：項目ごとに自動作成されます。デフォルトのままでOKですが、変更も可能です。
- デフォルト値：予め入力されている初期値を設定します。「このテキストを項目のプレースホルダーとして使用する」にチェックを入れると、入力例を表示することができます。
設定は上の3つだけでOKです。セキュリティを強化する「Akismet」はほとんど使わず、「ID属性」と「クラス属性」の設定はCSSの知識が必要なので、使う機会もあまりないでしょう。
テキスト・メールアドレス・URL・電話番号を設定してみました。項目に合わない文字列が入力されるとエラーが表示されるようになっています。
メールフォームには＠がない、URLの表記がおかしい、電話番号に数字以外の文字を入れたので、それぞれエラーメッセージが表示されています。
プレースホルダーテキスト(入力例)を追加する
プレースホルダーは、お問い合わせフォームの入力欄に表示される説明文や例文のことで、入力欄に何らかの文字を入力するまで表示されています。
プレースホルダーテキストはできるだけ設定するようにしてください。以下のようにあらかじめ入力例を表示しておくと、間違い入力や誤入力を減らしたり、記入漏れが減るのでコンバージョン率を上げることができます。
プレースホルダーの追加は、Contact Form 7のフォームテンプレートに「placeholder」を追記して、入力例の文章を「”」で囲うだけです。
プレースホルダーの詳しい設定方法は、以下の記事を参照してください。
数値の設定
次は数値の設定です。価格や数量などの入力に使います。「項目タイプ」はスピンボックスとスライダーの2種類あり、「範囲」で数値の上限と下限を指定できます。
数値の刻みも指定可能で、タグ内に「step:10」を追加すると、数値が10刻みになります。
上がスピンボックス、下がスライダーの設置例です。スライダーは数値が見えないので、感覚を入力してもらうような感じになります。
ブラウザによってHTML5の表示が違うので、スライダーの表示もブラウザごとに変わります。
日付の設定
日付フォームは記入日や生年月日などの入力に使います。HTML5対応ブラウザであれば、範囲を指定する際にカレンダーが表示されます。
日付の設置例です。上はFirefox、下はChromeです。ブラウザによってHTML5のカレンダー表示が違うので、入力フォームも変わります。
プレースホルダーはなぜか設定しても表示されないので、空白でいいでしょう。
テキストエリアの設定
テキスト項目は1行だけでしたが、テキストエリアは複数行の入力が可能です。お問い合わせ内容の入力や、長文入力が必要なフォームの作成に使います。
テキストエリアはタグにオプションを追加すると、フォームの幅や高さ、最大文字数、最小文字数を指定することができます。以下は設定例です。
[textarea textarea-364 60x5 minlength:20 maxlength:100]
以下の例はどちらも同じテキストエリアですが、幅と高さが違いますね。あと、最小文字数を20に設定しているので、入力文字数が少ないとエラーが表示されます。
テキスト項目の設定は、Contact Form 7のマニュアルを参照してください。
ドロップダウンメニューの設定
ドロップダウンメニューの設定です。「オプション」一行ごとに項目を1つ入れていきます。
「複数選択を可能にする」にチェックを入れると、CtrlキーやShiftキーで項目を複数選択できます。「空の項目を先頭に挿入する」をチェックすると、初期表示の項目が空白になります。
ドロップダウンメニューの設置例です。右側は通常のメニューで、左側は「複数選択を可能にする」にチェックを入れたので、最初から項目がすべて表示されて複数選択できるようになっています。
チェックボックスの設定
チェックボックスの設定です。「オプション」一行ごとに項目を1つ入れます。また、オプションの設定項目は3つあります。
以下はチェックボックスの設置例で、オプション3項目にそれぞれチェックを入れて設定しています。上はその名の通り「ラベルを前に、チェックボックスを後に配置する」です。
中は「個々の項目を label 要素で囲む」で、各項目の＜label＞タグをCSSで装飾する際に使います。ソースを見ると各項目に＜label＞が挿入されています。
下の「チェックボックスを排他化する」は、チェックできる項目を1つに限定します。
ラジオボタンの設定
ラジオボタンの設定です。こちらも一行ごとに項目を一つ入れます。
ラジオボタンの設置例です。オプションのラベル前後入れ替えとlabel要素にそれぞれチェックを入れています。
承諾確認の設定
承諾確認は契約内容や個人情報取り扱いなどの確認に使います。オプションの「チェックボックスを任意選択にする」は、デフォルトでチェックを入れるかどうかの違いです。
コンバージョン率が上がるので、ここのチェックは外しておきましょう。
承諾確認の設置例です。チェックを入れないと送信ボタンが反応しないようになっています。
クイズの設定
クイズはボットによるスパムメール送信を防ぐために設定します。クイズの回答が間違っていたり、回答の入力がないとメールは送信されません。
クイズはreCAPTCHAと同じような機能を持ち、1+1=2のような簡単な問題でもボットは回答できないので、かなり強力なスパムメール対策になります。
「クイズと回答」は、1行ごとに縦線(パイプ)を挟んで問題と回答を設定します。クイズを複数設定すると、そのうちの1つが毎回ランダムに選ばれて表示されます。
クイズの設置例です。回答が間違っていたり入力がないとエラーが表示されます。
ファイルの設定
ファイルを設定すると、メールフォームからファイルをアップロードできるようになります。写真や書類を送付してもらう時に使うとよいでしょう。
「ファイルサイズの上限 (バイト)」は、ファイルの上限サイズを設定します。ここの数値はバイト数(例:1048576)、またはkb(1024kb)、mb(1mb)で指定します。小数点の指定(例:1.5mb)はできません。指定がない場合は自動的に1MBになります。
「受け入れ可能なファイル形式」は、jpgやpdfといったファイル形式を入力します。複数ある場合は「jpg|png|pdf」のように縦線で区切ります。
デフォルトで受信可能なファイルは以下の通りです。大抵のファイルは受信可能ですが、エクセル形式のファイルなどは追加しないといけません。
jpg・jpeg・png・gif・pdf・doc・docx・ppt・pptx・odt・avi・ogg・m4a・mov・mp3・mp4・mpg・wav・wmv
次に上部タブ「メール」から、下にある「ファイル添付」にファイル名を追加します。ここでは生成されたフォームタグではなく、単なるファイル名のタグを追加しないといけません。
フォームタグ： [file file-968 limit:2048kb filetypes:jpg|png|pdf]
貼り付けタグ： [file-968]
これを忘れると、送信メールにファイルが添付されなくなるのでご注意を。ファイルを複数設定した場合は、ファイル名をそのまま並べていけばOKです。
ファイル設置例です。「参照」をクリックしてファイルを選択します。
あと、ファイルは1項目につき1つしかアップロードできないので、必要に応じてファイルを複数設定してください。
メール(2) 自動返信メールの設定
Contact Form 7 は、問い合わせに対する自動返信メールを簡単に設定することができます。
自動返信メールの設定は必ずしも必要ではありませんが、メールが届いていることを知らせるリアクションがあると安心ですよね。企業やショップのようなビジネス向けサイトの場合は、必ず設定するようにしましょう。
まず上部タブ「メール」から下に進み、「メール (2) を使用」をチェックすると、自動返信用のメールテンプレートが表示されます。
送信先等の設定はこのままでOKですが、デフォルトの返信内容はそっけないので、きちんとした文章で題名とメッセージ本文を書き換えましょう。
以下は題名とメッセージ本文の一例です。問い合わせ内容の項目も「お名前」や「お問い合わせの内容」といった感じで書き換えてみてください。
題名：
●●●●●●●●へのお問い合わせありがとうございます（自動返信メール）
メッセージ本文：
このたびは●●●●●●●●へのお問い合わせ誠にありがとうございます。
このメールは確認のためにお客様へお送りしております。
担当の者から折り返しご連絡差し上げます。しばらくお待ち下さい。
スパム対策・迷惑メール対策
Contact Form 7のスパムメール対策や迷惑メール対策にはいくつか方法があります。
ここでは送信元のIPアドレスを取得してIP制限をかける方法と、reCAPTCHA v3を設定する方法をご紹介します。
IPアドレス取得とIP制限でスパム対策
Contact Form 7には、特別なメールタグを使って送信元のIPアドレスを取得する機能があります。
このIPアドレスにIP制限を掛けると、送信元はフォームからメールを送信できなくなるので、スパムメールや迷惑メールが届かなくなります。
以下の記事でContact Form 7のIPアドレス取得とIP制限について詳細に説明しています。ぜひご参照ください。
参考記事 ContactForm7のIPアドレス取得とIP制限で迷惑メール対策
reCAPTCHA v3を使う
ContactForm7 のスパムメール対策、reCAPTCHAの設定方法です。最新バージョンの5.1からは、reCAPTCHA v3 APIを使うようになっています。
reCAPTCHA v3を使うなら、プラグイン「Invisible reCaptcha for WordPress」から設定するのが簡単です。
参考記事 ContactForm7のスパムメール対策 reCAPTCHA v3の導入方法
reCAPTCHA 新規登録の場合は、新たにサイトキーとシークレットキーを取得し、すでに登録済みであれば、ContactForm7 のキーを削除してからプラグインでキーを再登録します。
フォームデザインのカスタマイズ id属性・class属性の設定
Contact Form 7 は、各入力項目のフォームタグにid属性・class属性を追加することで、デザインのカスタマイズを自由に行うことができます。
id属性・class属性の設定ですが、フォームタグ生成時にid名またはclass名を入力して、CSSに追記すればOKです。
では、サンプルのテキスト項目を作ってデザインを変更してみましょう。まずはフォームタグ生成から、ID属性にID名「sampletext2」を入力します。
続いて外観から「テーマの編集」→「スタイルシート」または「CSSエディター」に、#sampletext2のCSSを追記します。
テキスト入力項目の文字サイズや色が変わっていますね。
id属性・class属性はすべての入力項目に設定できます。また、チェックボックスとラジオボタンは、label要素を組み合わせることで様々なデザインカスタマイズが可能です。
フォームデザインのカスタマイズ HTML / CSSを利用
Contact Form 7 はフォーム編集でHTMLとCSSが使えるので、メールフォーム全体のデザインを自分好みにカスタマイズすることができます。
tableを使ってレイアウトをカスタマイズしてみました。背景色はCSSで変更しています。フォームタグのidとclassも組み合わせれば、メールフォームを自在にカスタマイズできます。
Contact Form 7 のデザインカスタマイズは、idとclassで入力項目をデザインして、フォーム編集のHTMLやCSSで全体のデザインを行うような感じです。
デザインカスタマイズはHTMLやCSSの知識が必要ですが、ぜひチャレンジしてみてください。
Contact Form 7 まとめ
WordPressで制作したウェブサイトやブログに問い合わせフォームを設置するなら、定番のContact Form 7を使っておけば間違いはありません。
Contact Form 7 はカスタマイズの自由度も高く、様々な機能を追加できるプラグインも充実しています。ぜひ一度使ってみてください。
以下はContact Form 7 の使い方やカスタマイズに関する関連記事です。こちらもご参照ください。
