SCROLL
HOME BLOG WordPressプラグイン 画像で解説!Contact Form7の導入と設定方法

画像で解説!Contact Form7の導入と設定方法

問い合わせフォームを装備する

サイトを開設したら「お問い合わせフォーム」は必須

ホームページを開設したら、忘れてはならないのが「お問い合わせフォーム」の設置です。


リアルな店舗でお買い物をする状況なら、例えば「この商品は他に色やサイズはないのかな」とか「後で返品は効くのかしら」などという疑問が生じても、店員に聞けば答えてくれます。しかし対面販売でないネットの場合は、少しでも不安があるとユーザーはすぐに離脱してしまいます。

そうならないためには、ユーザーが気軽に、簡単に問合せできる「 お問い合わせフォーム」を用意しておく必要があります。WordPressには様々な「 お問い合わせフォーム」のプラグインが用意されていますが、この記事ではおすすめの「ContactForm7」の導入と、設置方法について画像を提示しながら、わかりやすく説明していきます

インストールから実装まで

インストールは簡単です。まず、WordPressの管理画面(ダッシュボード)を開いてください。

プラグインを検索します

左側に表示されているメニューの「プラグイン」から「新規追加」を選びます。
すると「プラグインを追加」という画面が開きますので「キーワード」と書かれている検索窓に「ContactForm7」と入力します(赤い)。全部入力しないうちに早々と候補が表示されます。一番に富士山アイコンの 「ContactForm7」 が出てきました(緑色の)。

分かりやすいインストールボタン

「今すぐインストール」を押しましょう。インストールの前にプラグインの概要や評価、レビューなどを確認したい方は、その下の「詳細情報」をご覧になってください。

インストール中

「今すぐインストール」を押すと、窓中の文字が赤いぐるぐる矢印の回転と共に「インストール中…」に変わります。インストールにかかる時間はほんの数秒ほどです。

これでインストールは完了

無事インストールが終わり、ボタンは「有効化」に変わります。「有効化」をポチッと押してください。

自動的にプラグイン一覧が表示されます

有効化すると、画面が自動的に使用中のプラグイン一覧に変わります。「ContactForm7」が間違いなく表示されているはずなので、確認してください。

【注意】ContactForm7が表示するアラートメッセージが、英語になってしまうことがあります。日本語の翻訳データがないことが原因ですので、そうした場合はダッシュボード画面をスクロールして「翻訳データの更新」がないか確認してください。あれば、更新します。(下図参照)

ダッシュボードをスクロールして一番下の箇所

さあ、それではここから お問い合わせフォームの詳細を設定していくのですが、その前にひとつ大事なステップがあります。

設定する前にフォームを設計しておこう

ユーザーが入力しやすい設計にしましょう

お問い合わせフォームを設置するにあたって、どのような内容にするのかをあらかじめ決めておきましょう。簡単なメモで十分です
いきなり設定を始めると、よく考えずに内容を決めてしまい、使ってみると勝手が悪かったり、必要な情報が取得されなかったりして、後で直さなくてはならなくなることもあります。
逆によくばって項目を増やしすぎると、ユーザーにとって負担が増えます。サイトの目的に合わせて、必要最小限の内容をこころがけ、記入が必須の項目と任意の項目などを切り分けて構成を設計しましょう。

※デフォルトの設定では「氏名(必須)、メールアドレス(必須)、題名、メッセージ本文」が用意されています。特にこれで不足がなければ、このままでも問題ありません。それ以外の設定については以下で説明していきます。

構成ができたら、ダッシュボードに戻ってフォームの設定を行います。

フォームを設定してみましょう

「お問い合せ」からコンタクトフォームを選択

お問い合わせフォームのタイトルを入れる

左側のメニューバーにある「お問い合わせ」にカーソルを合わせると、その横に「コンタクトフォーム」、その下に「新規追加」と表示されます。この「新規追加」を選択してください。

フォームの設定画面

フォームの設定画面が開きます。一番上「ここにタイトルを入力」と表示された窓に、お問い合わせフォームのタイトルを入れます。
ここでは「お問い合わせフォーム」と入れてみます。

この設定は、たとえば「企業様向けお問い合わせ」「転職希望者向けお問い合わせ」のように、複数のフォームを用意する際にそれがどのフォームなのか、を識別するために行うものです。
特にフォームを1つしか作らないのであれば「お問い合わせフォーム」あるいは単に「お問い合わせ」と言ったタイトルを入力して運用するのが一般的です。

デフォルトのフォームは4項目構成

フォームの設定画面 (デフォルト)

タイトルの下が、フォームの設定画面です。先述した「氏名、メールアドレス、題名、メッセージ本文」がデフォルトで表示されています。

項目の追加 1.日付

上の方にブルーの枠線と文字で並んでいるのが、カスタマイズ用のツールです。これを使って、フォームの中身を色々と編集することが可能となります。例えば、右から5番目にある「日付」というボタンをクリックしてみましょう。

「フォームタグ生成:日付」という画面がポップアップされますね。この画面を使って、この項目を必須とするか任意とするかの種別や、日付指定できる範囲の上限・下限を設けるか、などが設定できます。
問題なければ、右下の「タグを挿入」をクリックしてください。

日付タグが挿入されています

フォーム設定画面の「メールアドレス」と「題名」の間に、いま生成した「日付」のタグが挿入されています。設置する順序は任意に変えられますので、設計メモに従って作りこんでいきます。

こんな風に表示されます

ちなみにいま作成したフォームはweb上では「メールアドレス」と「題名」の間に、このように↑見えます。日付のフォーマットは、よく目にするyyyy/mm/ddですね。右側のカレンダーボタンも有効です。

項目の追加 2.ドロップダウンメニュー

ドロップダウンで回答の選択肢が示せます

ドロップダウンメニューとは、表示される選択肢の中から適合するものを選べるタイプの入力方式です。上に示しているものがその設定画面で、オプションと表示されている窓内に、一行につき一つの選択肢を入れていきます。上の例では性別選択にしてみました。複数の選択を可とする場合は、その下のチェックボックスにチェックします。完了したら「タグを挿入」。

サイトにはこんな感じで表示されます

項目の追加 3.ラジオボタン

ラジオボタンは、並んで表示された選択肢の中から当てはまるものを選んで頭の〇をクリックすると、選択される方式のボタンです。

ドロップダウンと同じく、オプションは1行にひとつ

例では3つの選択肢を作ってみました。このままだと〇型のチェックボックスが選択肢の前に付きます。選択肢の後ろにしたい場合は、上の赤い➡の箇所にチェックをいれます。「個々の項目をlabel要素で囲む」にチェックが入っていますが、そのままで大丈夫です。

サイトでのラジオボタンはこう見える

こんな感じになりました。

項目の追加 4.その他の設定

フォームの設定画面上部に並んだブルーのツールを見るとわかりますが、このほかにも 「チェックボックス」「承認確認」「クイズ」「ファイル」など様々な項目を追加することができます。簡単にその機能を紹介すると、

  • チェックボックス・・複数示した選択肢のうち、該当するものにチェックを入れられる
  • 承認確認・・・・・・メルマガ受信の可否のように、Yes or Noの選択を促すことができる
  • クイズ・・・・・・・質問を表示し、それに対する答えを入力させることができる
  • ファイル・・・・・・添付ファイルを送るボタンを設置できる。ファイルのサイズ上限や、拡張子による種別の設定も可能。

設定画面の扱い方は、上に既述したものと基本的に同じなので、画面を見ながら入力していけば難しくありません。
これらの機能を理解したうえで、フォームの設計をしていくと使い方に幅が拡がります。お問い合わせフォームとしてだけではなく、例えばアンケートやプレゼント企画、製品の細かい注文フォームなどいろいろな応用が利きます。

保存してフォームのページを作りましょう

これを忘れずに!

フォーム設定の入力が終わったら、最後に左下の「保存」ボタンを押すのを忘れないでください。細かい設定が完了したことに安心して、うっかり保存せずに他のページに移動すると、せっかく入力した内容が消えてしまうこともあります。

Created with GIMP

フォームを保存すると、編集画面の上部に青いバーでショートコードが生成されます。これをコピーして、お問い合わせフォームを表示したいWordPressのページにペーストします。

Created with GIMP

左のメニューから「固定ページ」を選び「新規追加」します。新たに設置するwebページの画面が出るので、そこにショートコードをペーストし、タイトルをつけて保存します。

使用しているWordPressのテーマや設定により、新規追加画面はそれぞれ異なりますので、思った通りに表示されているかどうか、プレビューで確認してください

最後に留意点

ContactForm7のデメリットとして、メールが届かない、遅延するなどの事例が報告されています。
お問い合わせをしてくれた訪問者に「承りました」という確認メールが届かない、という事態を回避するために、別の方法で確実にメールをお送りする仕組みを用意しておく方が安全です。
具体的な方法は以下をご参照ください。

◆ContactForm7に限らず、お問い合わせフォームを悪用したスパムメール被害もよく報告されています。この問題に対しては「Invisible reCaptcha for WordPress」および「Really Simple CAPTCHA」というプラグインが有効です。

基本的なContactForm7の設定は、これで終了です。これまでの設定が狙い通りできており、間違いなく問い合わせとして機能しているかどうか、自分でテストして検証することをお勧めします。ユーザーにとって使いやすい設計、入力支援になっているかどうかを確認する意味でも、ぜひ行ってください。

あなたにとってよりよいWordPressサイト運営ができますように。