コンタクトフォーム７■

まずは『Contact Form 7』をインストールしましょう。

プラグインの追加画面で検索窓に「Contact Form 7」と入力し、今すぐインストールをクリックします。

「WordPressメインナビゲーション ＞ プラグイン ＞ プラグインを追加」の画面

インストールできたら有効化をクリックしましょう。

『Contact Form 7』を有効化すると、WordPressメインナビゲーションに追加される「お問い合わせ」メニューから、コンタクトフォームを追加をクリックしてください。

フォームのタイトルを入力し、まずはこのまま保存をクリックしましょう。

まず、メールタブをクリックして表示される画面から、ホームページ管理者宛てに送信される自動通知メールを設定します。

設定する内容は、以下のとおりです。

 メモ

以下は、上記で設定した内容を実際にメールソフト（Gmail）で受信したときのイメージです。

設定が完了したら、保存をクリックしましょう。

メールタブの画面を下にスクロールすると「メール（2）を使用」というチェックボックスがあります。

チェックを入れると、ユーザー宛てに送信されるメールを設定できるようになりますよ。

設定する内容は、以下のとおりです。

 メモ

以下は、上記で設定した内容を実際にメールソフト（Gmail）で受信したときのイメージです。

設定が完了したら、保存をクリックしましょう。

自動送信メールの設定が完了したら、お問い合わせページで「フォーム送信後に表示されるメッセージ」を編集しましょう。

「メッセージ」タブをクリックしてください。

デフォルトでは「ありがとうございます。メッセージは送信されました。」になっています。必要であれば変更しましょう。

この記事では、「この度はお問い合わせいただき、誠にありがとうございます。追って担当者からご連絡いたします。」に変更します。

変更したら、「保存」をクリックしてください。

 注意

『Contact Form 7』はデフォルトのままだと、「確認画面」や「完了画面（サンクスページ）」を表示できません。表示させるには、カスタマイズが必要になります。

「確認画面」や「完了画面（サンクスページ）」を簡単に表示させたい方は、「Snow Monkey Forms」など別のお問い合わせフォームプラグインも検討しましょう。

関連記事

Snow Monkey Formsでお問い合わせフォームを作る方法

まずメインナビゲーションから「固定ページ」を選択し、固定ページを追加でお問い合わせページを作成しましょう！

タイトルと本文に、以下のような内容を入力します。

次に、右下の＋ボタンをクリックしてください。

検索窓に「contact」と入力すると、『Contact Form 7』のアイコンが表示されるので、クリックしてブロックを追加します。

今回作ったフォームを選択します。

スラッグを「contact」に変更して、公開ボタンをクリックすれば完了です。

画面右上の「表示」アイコンから、新しいタブでプレビューをクリックしましょう。

以下、お問い合わせページの画面です。

まず「フォーム」タブを選びます。入力項目を追加したい箇所にカーソルを合わせてから、「電話番号」をクリックしましょう。

以下を参考に設定してください。

「この入力項目には送信者の電話番号が期待される。」はチェックを入れましょう。
チェックを入れると、HTMLソースコードに「autocomplete:tel」が追加され、電話番号の入力欄であることがブラウザに伝わりやすくなります。

ユーザーがフォームを再訪問したときに、過去の内容を入力候補として表示するなどのサポートが期待できます。なお、デフォルトで挿入されている「氏名」や「メールアドレス」にも、この「autocomplet」が入っています。

次に、入力例を表示する場合は、「このテキストを項目のプレースホルダーとして使用する」もチェックを入れましょう。チェックを入れないと、入力例が実際に入力された状態になってしまいます。

設定を終えたら、タグを挿入をクリックしましょう。

電話番号のタグを追加できました。

しかし、この状態ではユーザーがフォームに何を入力すればよいか分からないため、項目名としてタグの上に「電話番号」のテキストを入力し、「ラベルタグ（<label></label>）」で囲んでください。

 メモ

項目名と項目を紐づけるためのタグです。ラベルタグで紐づければ、項目名をクリックした場合でも、項目にカーソルがあたるので、ユーザーがフォームを入力しやすくなります。

また、氏名やメールアドレスにも入力例を表示させる場合は、それぞれのタグの中に「placeholder」を追加します。さきほど追加した電話番号のコードを参考にしてください。

保存をクリックして完了です。

実際のお問い合わせページでは、以下のように表示されます。

先ほどと同じように、挿入したい箇所にカーソルを合わせ、日付をクリックしましょう。

以下を参考にタグを挿入してください。

この記事ではそのままタグを挿入します。

タグを挿入したら、他と同様に「項目名」と「ラベルタグ（<label></label>）」を付けましょう。

保存をクリックして完了です。
実際のお問い合わせページでは、以下のように表示されます。

追加で必要な場合は、これまでの説明と同じ流れで、挿入したい箇所にカーソルを合わせてテキストエリアをクリックしましょう。

設定項目も、これまで説明した内容と基本的には変わりません。

挿入したい箇所にカーソルをあて、ドロップダウンメニューをクリックします。

以下を参考に、タグを挿入してください。

「最初のアイテムをラベルとして使用する。」にチェックをいれたあと、選択肢の一つ目に「ー以下から選択してくださいー」を指定してください。

これにより、仮にユーザーが「本来の選択肢の一つ目（以下：北海道）」を選んだ場合でも、自らの意思でそれを選んだことが分かります。

他と同様に「項目名」と「ラベルタグ（<label></label>）」を付けましょう。

保存をクリックすれば完了です。
実際のお問い合わせページでは、次のように表示されます。

「ー以下から選択してくださいー」の部分をクリックすると、選択肢が表示されますよ。

これまでどおり、挿入したい箇所にカーソルを合わせて、チェックボックスをクリックします。

以下を参考に設定して、タグを挿入してください。

「個々の項目をlabel要素で囲む。」にチェックを入れると、選択肢のチェックボックスのみならず、その「テキスト部分」をクリックしても反応するようになります。

ユーザーが選択しやすくなるので、おすすめです。

 注意

「チェックボックス」は、「ラベルタグ（<label></label>）」で囲むとエラーになります。ラベルタグは付けないようにしましょう。

エラーメッセージの例

（参考）複数のフォームコントロールが単一の label 要素内に置かれている。
（参考）入力フィールドにラベルを付けられますか?

保存をクリックして完了です。

実際のお問い合わせページでは、以下のように表示されます。

これまでどおり、挿入したい箇所にカーソルを合わせて、ラジオボタンをクリックしましょう。

以下を参考にタグを挿入してください。

「個々の項目をlabel要素で囲む。」にチェックを入れると、選択肢のラジオボタンのみならず、その「テキスト部分」をクリックしても反応するようになります。

 注意

「ラジオボタン」は、「ラベルタグ（<label></label>）」で囲むとエラーになります。ラベルタグは付けないようにしましょう。

エラーメッセージの例

（参考）複数のフォームコントロールが単一の label 要素内に置かれている。
（参考）入力フィールドにラベルを付けられますか?

保存をクリックして完了です。

実際のお問い合わせページでは、以下のように表示されます。

「個人情報の取り扱い」などに対して、ユーザーから承諾を得たい場合は、承諾確認を使用します。

以下を参考に、タグを挿入してください。

「このチェックボックスは任意選択です。」のチェックを外すと必須項目になり、ユーザーは実際のチェックを入れない限り、送信ボタンを押せません。

個人情報の取り扱い（プライバシーポリシー）に対する同意確認は、必須項目にしてください。

なお、「個人情報の取り扱い（プライバシーポリシー）」のテキストには、HTMLの「aタグ（<a href=”URL”></a>）」でリンクを設置しましょう。

タグの中に「target=”_blank”」を書くと、リンクが新しいタブで開くため、ユーザーがフォームから離脱するのを防げます。

保存をクリックして完了です。

実際のお問い合わせページでは、以下のように表示されます。

お問い合わせページで、「テキストにリンクが設置されているか」や「新しいタブで開くか」などを確認しましょう。

画像やPDFなどのデータファイルのアップロード機能をフォームに追加したいときは、ファイルを使用します。

以下を参考にタグを挿入してください。

他と同様に「項目名」と「ラベルタグ（<label></label>）」を付けましょう。

保存をクリックすれば完了です。

実際のお問い合わせページでは、以下のように表示されます。

まず、「メール」タブをクリックしてください。
すると、追加した項目に対するタグが表示されているのが分かります。

このタグを自動送信メールに設定すれば、追加した項目が表示されるようになりますよ。

試しに、ホームページ管理者への自動通知メールでやってみましょう。
「電話番号：」と入力したあとに、対応するタグを挿入します。

タグが挿入されたら保存をクリックしてください。

では、お問い合わせページでフォームを入力および送信し、自動通知メールを確認してみましょう。
フォームに入力した値が「電話番号：」の横に表示されていればOKです。

 メモ

ファイルアップロード機能のタグについては、「ファイル添付」の欄に挿入してください。