WordPressの問い合わせフォーム作成プラグイン Contact Form 7の使い方

スポンサーリンク
ビッグバナー728

contactform7 メールフォーム設置プラグイン

WordPressサイトに問い合わせフォームを設置できる多機能なプラグイン「Contact Form 7」をご紹介します。

Contact Form 7は問い合わせフォーム設置の定番プラグインで、簡単な初期設定とショートコード追加だけで、問い合わせフォームが使えるようになります。

フォームから入力できる項目も、テキストや数値、日付の他に、ドロップダウンメニューやラジオボタンなど盛りだくさんで、ファイル送信機能も追加できます。

自動返信メールの設定も簡単で、Contact Form 7用のプラグインを別途追加すれば、セキュリティ強化や項目の集計など、様々な機能を追加できるようになります。

Contact Form 7は利用者も多く、開発者は日本人なので安心して使えますよ。

スポンサーリンク

Contact Form 7 インストール

では、Contact Form 7をインストールしましょう。ダッシュボードの「プラグイン」→「新規追加」に進みます。

contactform7 インストール

右上の検索窓に「Contact Form 7」と入力するとプラグインが表示されるので、「今すぐインストール」→「有効化」してください。

contactform7 インストール

Contact Form 7 使い方

続いて設定に移ります。とりあえず必要最低限の設定で、実際に使えるかどうかテストしてみましょう。ダッシュボードから「お問い合わせ」→「コンタクトフォーム」に進みます。

contactform7 設定

タイトルの「コンタクトフォーム1」をクリックして、コンタクトフォームの編集に移ります。

contactform7 コンタクトフォームの編集

フォームのタイトルは変更できます。そのままでも支障はありませんが、フォームが増えても識別できるように、名前を設定するようにしましょう。

contactform7 タイトル変更

パネルタブの「メール」から、送信先と送信元のメールアドレスを変更します。

送信先にはこのフォームから送信されたメールを受信するメールアドレスを入力します。自分のドメインで作成したメールの他に、Yahoo!メールやGmail といったフリーメールも送信先に指定できます。

送信元にはこのフォームが設置されているドメインと同じメールアドレスを入力します。[your-name]の後にある< >で囲まれた部分です。デフォルトでは「wordpress@ドメイン名」が入ります。

contactform7 メール設定

ここで注意点を一つ、送信元に別ドメインのメールアドレスを入力すると、「サイトのドメインに属していないメールアドレスが送信元に設定されています。」というエラーメッセージが表示されます。

contactform7 メール設定エラー

Contact Form 7 の「設定検証についての FAQ」で理由や回避方法が解説されていますが、送信メールがスパムや偽装メールなどの扱いを受けないように、メールとサイトのドメインを以下の例のように一致させましょう。

ドメイン名: https://mailtest.com
送信元  : test@mailtest.com

一番いいのは、ドメインと送信先・送信元を一致させることです。これなら問い合わせメールに返信しても、差出人がサイトのドメインと同じメールアドレスになります。

contactform7 メール送信元設定

メールアドレスを変更したら「保存」をクリックして、表示されているショートコードをコピーしてください。

contactform7 ショートコードをコピー

コピーしたショートコードを、投稿や固定ページ内にペーストして公開してください。サイト内に別途問い合わせ用の固定ページを作るのが一般的です。

contactform7 ショートコードをペースト

設置した問い合わせフォームはこんな感じになります。

contactform7 問い合わせフォーム

各項目を入力して「送信」すると、「ありがとうございます。メッセージは送信されました。」というメッセージが表示されます。

contactform7 メッセージ送信

メールはこのような形で送信されてきます。もちろん、入力項目を増やしたりカスタマイズすると、送信されてくる内容も変わります。

contactform7 メッセージ受信

スポンサーリンク

問い合わせフォームの入力項目を追加

メールの送信ができたら、次はContact Form 7をカスタマイズしてみましょう。

まずはお問い合わせフォームの入力項目を追加します。「フォーム」に並んだフォームタグ生成ボタンをクリックすると、各項目が追加されます。

contactform7 フォーム入力項目追加

続いて設定した項目のタグをフォームにコピペするか、フォーム内でタグを入れたい場所を指定して「タグを挿入」すると、入力項目が追加されます。

contactform7 タグを挿入

フォームに新しい入力項目が追加されました。

contactform7 フォーム項目追加

次に上の「メール」タブで、追加した項目のメールタグをメッセージ本文に貼り付けます。これを忘れると、送信されたメール内に入力内容が反映されません。最後の「保存」もお忘れなく。

contactform7 メールタグ貼り付け

テキスト・メールアドレス・URL・電話番号の設定

では最初に「テキスト」項目を追加してみましょう。この項目は名前や住所など、1行で済む入力内容に使います。

また、テキストはメールアドレス、URL、電話番号の入力にも使えますが、この3つはそれぞれ専用のタグが用意されているので、各項目に合ったタグの使用をオススメします。これら4項目はすべて同じ設定内容です。

contactform7 テキスト項目

  • 項目タイプ:必須入力であればチェックします。必須入力の項目を空白のままにして送信ボタンを押すと、再入力を求められます。
  • 名前:項目ごとに自動作成されます。デフォルトのままでOKですが、変更も可能です。
  • デフォルト値:予め入力されている初期値を設定します。「このテキストを項目のプレースホルダーとして使用する」にチェックを入れると、入力例を表示することができます。

設定は上の3つだけでOKです。セキュリティを強化する「Akismet」はほとんど使わず、「ID属性」と「クラス属性」の設定はCSSの知識が必要なので、使う機会もあまりないでしょう。

あと、プレースホルダーはできるだけ設定するようにしてください。以下のような入力例があると、記入漏れが減ってコンバージョン率が上がります。

contactform7 プレースホルダー設定

テキスト・メールアドレス・URL・電話番号を設定してみました。項目に合わない文字列が入力されるとエラーが表示されるようになっています。

メールフォームには@がない、URLの表記がおかしい、電話番号に数字以外の文字を入れたので、それぞれエラーメッセージが表示されています。

contactform7 入力エラー

数値の設定

次は数値の設定です。価格や数量などの入力に使います。「項目タイプ」はスピンボックスとスライダーの2種類あり、「範囲」で数値の上限と下限を指定できます。

contactform7 数値フォーム

数値の刻みも指定可能で、タグ内に「step:10」を追加すると、数値が10刻みになります。

上がスピンボックス、下がスライダーの設置例です。スライダーは数値が見えないので、感覚を入力してもらうような感じになります。

ブラウザによってHTML5の表示が違うので、スライダーの表示もブラウザごとに変わります。

contactform7 スピンボックスとスライダー

日付の設定

日付フォームは記入日や生年月日などの入力に使います。HTML5対応ブラウザであれば、範囲を指定する際にカレンダーが表示されます。

contactform7 日付設定

日付の設置例です。上はFirefox、下はChromeです。ブラウザによってHTML5のカレンダー表示が違うので、入力フォームも変わります。

contactform7 日付フォーム firefox

contactform7 日付フォーム Chrome

プレースホルダーはなぜか設定しても表示されないので、空白でいいでしょう。

テキストエリアの設定

テキスト項目は1行だけでしたが、テキストエリアは複数行の入力が可能です。お問い合わせ内容の入力や、長文入力が必要なフォームの作成に使います。

contactform7 テキストエリア設定

テキストエリアはタグにオプションを追加すると、フォームの幅や高さ、最大文字数、最小文字数を指定することができます。以下は設定例です。

[textarea textarea-364 60x5 minlength:20 maxlength:100]

以下の例はどちらも同じテキストエリアですが、幅と高さが違いますね。あと、最小文字数を20に設定しているので、入力文字数が少ないとエラーが表示されます。

contactform7 テキストエリアフォーム

テキスト項目の設定は、Contact Form 7のマニュアルを参照してください。

設定情報 Contact Form 7 テキスト項目の設定

ドロップダウンメニューの設定

ドロップダウンメニューの設定です。「オプション」一行ごとに項目を1つ入れていきます。

「複数選択を可能にする」にチェックを入れると、CtrlキーやShiftキーで項目を複数選択できます。「空の項目を先頭に挿入する」をチェックすると、初期表示の項目が空白になります。

contactform7 ドロップダウンメニュー設定

ドロップダウンメニューの設置例です。右側は通常のメニューで、左側は「複数選択を可能にする」にチェックを入れたので、最初から項目がすべて表示されて複数選択できるようになっています。

contactform7 ドロップダウンメニュー

チェックボックスの設定

チェックボックスの設定です。「オプション」一行ごとに項目を1つ入れます。また、オプションの設定項目は3つあります。

contactform7 チェックボックス設定

以下はチェックボックスの設置例で、オプション3項目にそれぞれチェックを入れて設定しています。上はその名の通り「ラベルを前に、チェックボックスを後に配置する」です。

中は「個々の項目を label 要素で囲む」で、各項目の<label>タグをCSSで装飾する際に使います。ソースを見ると各項目に<label>が挿入されています。

下の「チェックボックスを排他化する」は、チェックできる項目を1つに限定します。

contactform7 チェックボックス設定

ラジオボタンの設定

ラジオボタンの設定です。こちらも一行ごとに項目を一つ入れます。

contactform7 ラジオボタン設定

ラジオボタンの設置例です。オプションのラベル前後入れ替えとlabel要素にそれぞれチェックを入れています。

contactform7 ラジオボタン設定

承諾確認の設定

承諾確認は契約内容や個人情報取り扱いなどの確認に使います。オプションの「チェックボックスを任意選択にする」は、デフォルトでチェックを入れるかどうかの違いです。

コンバージョン率が上がるので、ここのチェックは外しておきましょう。

contactform7 承諾確認設定

承諾確認の設置例です。チェックを入れないと送信ボタンが反応しないようになっています。

contactform7 承諾確認設定

クイズの設定

クイズはボットによるスパムメール送信を防ぐために設定します。クイズの回答が間違っていたり、回答の入力がないとメールは送信されません。

クイズはreCAPTCHAと同じような機能を持ち、1+1=2のような簡単な問題でもボットは回答できないので、かなり強力なスパムメール対策になります。

「クイズと回答」は、1行ごとに縦線(パイプ)を挟んで問題と回答を設定します。クイズを複数設定すると、そのうちの1つが毎回ランダムに選ばれて表示されます。

contactform7 クイズ設定

クイズの設置例です。回答が間違っていたり入力がないとエラーが表示されます。

contactform7 クイズ設定

ファイルの設定

ファイルを設定すると、メールフォームからファイルをアップロードできるようになります。写真や書類を送付してもらう時に使うとよいでしょう。

「ファイルサイズの上限 (バイト)」は、ファイルの上限サイズを設定します。ここの数値はバイト数(例:1048576)、またはkb(1024kb)、mb(1mb)で指定します。小数点の指定(例:1.5mb)はできません。指定がない場合は自動的に1MBになります。

「受け入れ可能なファイル形式」は、jpgやpdfといったファイル形式を入力します。複数ある場合は「jpg|png|pdf」のように縦線で区切ります。

contactform7 ファイル設定

デフォルトで受信可能なファイルは以下の通りです。大抵のファイルは受信可能ですが、エクセル形式のファイルなどは追加しないといけません。

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です。

contactform7 ファイル添付

ファイル設置例です。「参照」をクリックしてファイルを選択します。

contactform7 ファイル設定

あと、ファイルは1項目につき1つしかアップロードできないので、必要に応じてファイルを複数設定してください。

contactform7 ファイル複数設置

メール(2) 自動返信メールの設定

Contact Form 7 は、問い合わせに対する自動返信メールを簡単に設定することができます。

自動返信メールの設定は必ずしも必要ではありませんが、メールが届いていることを知らせるリアクションがあると安心ですよね。企業やショップのようなビジネス向けサイトの場合は、必ず設定するようにしましょう。

まず上部タブ「メール」から下に進み、「メール (2) を使用」をチェックすると、自動返信用のメールテンプレートが表示されます。

contactform7 自動返信メール設定

送信先等の設定はこのままでOKですが、デフォルトの返信内容はそっけないので、きちんとした文章で題名とメッセージ本文を書き換えましょう。

contactform7 自動返信メール設定

以下は題名とメッセージ本文の一例です。問い合わせ内容の項目も「お名前」や「お問い合わせの内容」といった感じで書き換えてみてください。

題名:
●●●●●●●●へのお問い合わせありがとうございます(自動返信メール)

メッセージ本文:
このたびは●●●●●●●●へのお問い合わせ誠にありがとうございます。
このメールは確認のためにお客様へお送りしております。
担当の者から折り返しご連絡差し上げます。しばらくお待ち下さい。

フォームデザインの変更 id属性・class属性の設定

Contact Form 7 は、各入力項目のフォームタグにid属性・class属性を追加することで、デザインのカスタマイズを自由に行うことができます。

id属性・class属性の設定ですが、フォームタグ生成時にid名またはclass名を入力して、CSSに追記すればOKです。

では、サンプルのテキスト項目を作ってデザインを変更してみましょう。まずはフォームタグ生成から、ID属性にID名「sampletext2」を入力します。

contactform7 idとclass設定

続いて外観から「テーマの編集」→「スタイルシート」または「CSSエディター」に、#sampletext2のCSSを追記します。

テキスト入力項目の文字サイズや色が変わっていますね。

contactform7 フォームデザインカスタマイズ

id属性・class属性はすべての入力項目に設定できます。また、チェックボックスとラジオボタンは、label要素を組み合わせることで様々なデザインカスタマイズが可能です。

contactform7 フォームデザインカスタマイズ

フォームデザインの変更 HTML / CSSを利用

Contact Form 7 はフォーム編集でHTMLとCSSが使えるので、メールフォーム全体のデザインを自分好みにカスタマイズすることができます。

contactform7 フォームデザインカスタマイズ

tableを使ってレイアウトをカスタマイズしてみました。背景色はCSSで変更しています。フォームタグのidとclassも組み合わせれば、メールフォームを自在にカスタマイズできます。

contactform7 フォームデザインカスタマイズ

Contact Form 7 のデザインカスタマイズは、idとclassで入力項目をデザインして、フォーム編集のHTMLやCSSで全体のデザインを行うような感じです。

デザインカスタマイズはHTMLやCSSの知識が必要ですが、ぜひチャレンジしてみてください。

Contact Form 7 まとめ

ホームページやブログに問い合わせフォームを設置するなら、定番のContact Form 7を使っておけば間違いはありません。

Contact Form 7 はカスタマイズの自由度も高く、様々な機能を追加できるプラグインも充実しています。ぜひ一度使ってみてください。

以下はContact Form 7 の関連記事です。こちらもご参照ください。

参考記事 Contact Form 7 で送信完了ページ(サンクスページ)に移動させる方法

参考記事 Contact Form 7 で確認画面を表示するプラグイン Contact Form 7 add confirm

参考記事 ContactForm7のスパムメール対策 reCAPTCHA設定方法

スポンサーリンク
PC用
PC用

フォローする