プラグイン「Contact Form 7」のインストールとフォーム作成の方法

更新日:2018/10/30

「Contact Form 7」は、お問い合わせフォームを作成・設定できるプラグインです。
固定ページにショートコードを貼り付けするだけで、簡単にお問い合わせフォームを設置することができます。

「Contact Form 7」のインストール

  • 1)レフトナビの「プラグイン」→「新規追加」をクリックします。
プラグイン「Contact Form 7」の インストールとフォーム作成の方法
  • 2)画面右のキーワード入力欄に、「Contact Form 7」と入力します。検索され、画面にプラグインが表示されます。
プラグイン「Contact Form 7」の インストールとフォーム作成の方法
  • 3)「今すぐインストール」ボタンをクリックします。
プラグイン「Contact Form 7」の インストールとフォーム作成の方法
  • 4)インストールが完了したら「有効化」ボタンをクリックします。
プラグイン「Contact Form 7」の インストールとフォーム作成の方法
  • 5)有効化すると、レフトナビに「お問い合わせ」が表示されます。これでインストール完了です。
プラグイン「Contact Form 7」の インストールとフォーム作成の方法
お問い合わせフォームの作成

レフトナビの「お問い合わせ」→「新規追加」をクリックします。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

下図①~④を設定していきます。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
作成するフォームのタイトルを入力します。
フォームの内容を設定します。
フォームの送信が行われた時の、メールの送信先や内容を設定します。
フォームの状態をユーザーへ表示する文章を編集できます。
①フォームのタイトル

作成するフォームのタイトルを入力します。
フォームの内容がわかる名前でOKです。(ページ自体に表示はされません。)

②フォームタブ

フォームの内容を設定します。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

作成したいフォームタグのボタンをクリックすると、タグ生成のための入力画面が表示されます。
フォームタグによって入力する項目は異なりますが、共通項目は下記の①~④です。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
①項目タイプ
必ず入力してほしいものは、必須項目にチェックを入れます。
②名前
半角英数でフォームタグの名前を入力します。
③デフォルト値
入力前のフォームに初期で入れておきたい文字等がある場合は入力します。
④ID属性/クラス属性
フォームのデザインを変更する場合などに、IDやクラスを設定することができます。

入力が完了したら、右下の「タグを挿入」ボタンをクリックして、フォームタグを挿入します。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
フォームタグタイプの一覧
プラグイン「Contact Form 7」の インストールとフォーム作成の方法
①テキスト
1行入力するテキストフォームタグ[text]
プラグイン「Contact Form 7」の インストールとフォーム作成の方法
②メールアドレス

メールアドレスを入力してもらうテキストフォームタグ[email]

半角英数で@の入ったもの以外は認識しません。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
③URL

URLを入力してもらうテキストフォームタグ[url]

半角英数でhttp://から始まるもの以外は認識しません。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
④電話番号

電話番号を入力してもらうテキストフォームタグ[tel]

半角数字以外は認識しません。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
⑤数値

数値を選択してもらうスピンボックスのフォームタグ[number]

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

数値を選択してもらうスライダーのフォームタグ[range]

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
⑥日付

日付を選択してもらうフォームタグ[date]

選択できる日付の範囲を下限と上限で設定できます。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
⑦テキストエリア
文章を入力してもらうフォームタグ[textarea]
プラグイン「Contact Form 7」の インストールとフォーム作成の方法
⑧ドロップダウンメニュー

ドロップダウンで選択してもらうフォームタグ[select]

オプション欄に一行に一つずつ項目を入力します。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
⑨チェックボックス

チェックボックスで選択してもらうフォームタグ[checkbox]

複数選択が可能です。
オプション欄に一行に一つずつ項目を入力します。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
⑩ラジオボタン

ラジオボタンで選択してもらうフォームタグ[radio]

オプション欄に一行に一つずつ項目を入力します。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
⑪承認確認

規約や条件など、確認の際にチェックをしてもらうフォームタグ[acceptance]

同意条件の欄に、確認内容を入力します。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
⑫クイズ

問いに対して答えを入力してもらうフォームタグ[quiz]

クイズと回答の欄に、「問い|答え」と入力します。
改行し複数入力すると、ランダムで表示されます。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
⑬ファイル

画像などを添付してもらうフォームタグ[file]

ファイルサイズの上限や、可能なファイル形式の設定も可能です。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
⑭送信ボタン

送信ボタンを設置するフォームタグ[submit]

必ず設置してください。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

フォームタグを入力する際には、項目ごとに<label>~</label>タグで囲みます。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

実際の表示は下図のようになります。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

※注意事項※

Contact Form 7には、入力した内容を確認する画面がありません。
「送信」ボタンをクリックすると、すぐに問い合わせ内容が送信されます。
誤送信等を防ぐため、送信ボタンの前に下図のような「⑪承認確認の設置」をおすすめします。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法
③メールタブ

フォームの送信が行われた時の、メールの送信先や内容を設定します。
こちらで設定するメールは、自動送信のメールです。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

この設定は、自社に届くメールです。

①送信先
フォームが送信された際に、メールが届いてほしいメールアドレスを設定します。
初期値は、「WordPressの初期設定」で設定したメールアドレスが表示されています。
②送信元

メールの送信元を設定します。
初期値は、「[your-name]<wordpress@独自ドメイン>」です。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

フォームタグの名前に「your-name」と入力した場合に、
「入力した名前<wordpress@独自ドメイン>」と送信元に表示されるようになります。

③題名
メールの件名を設定します。
④メッセージ本文
メールの本文を設定します。
⑤メール(2)

Contact Form 7では、自動送信メールを2つ設定することができます。1つはお問い合わせいただいたお客様へ、もう1つはお問い合わせが来た旨の連絡用に自分へ、と使い分けいただくのをおすすめします。
「メール(2)を使用」にチェックを入れると、もう1つメールの設定画面が表示されます。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

送信先を、お客様が入力したメールアドレスに設定することにより、お客様へ自動送信メールが届くようになります。

参考例文 ― 
店名や情報を変更してください。
件名
本文
④メッセージタブ

フォームの状態をユーザーへ表示する文章を編集できます。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

Contact Form 7には、入力した内容を確認する画面がありません。
「送信」ボタンをクリックすると、すぐに問い合わせ内容が送信されます。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

「送信」ボタンをクリックし、無事に内容が送信できた場合は、上図のようにコメントが表示されます。
メッセージタブでは、入力や送信の際に誤りがある場合などに、表示するコメントの編集ができます。
基本的には初期値でOKですが、必要な場合は変更してください。


上記①~④の設定が完了したら、左下にある「保存」ボタンをクリックして、内容を保存します。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

保存すると、フォームのタイトルの下にショートコードが表示されます。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

このショートコードをコピーして、固定ページで作成した「お問い合わせ」ページの本文へ貼り付けます。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法

「お問い合わせ」固定ページを表示すると、下図のように表示されます。

プラグイン「Contact Form 7」の インストールとフォーム作成の方法