お問い合わせといえばContact Form 7って聞いたけど使い方が分からない。難しい設定はしたくないから最低限の設定した方がいい箇所だけお教えて欲しい

投稿用キャラクタ

こういった疑問にお答えします。

この記事ではContact Form 7の使い方と設定を簡単に解説していきます。なのでHTMLやCSSの書き方が分からない方でも簡単にお問い合わせフォームを設置することが可能です。

Contact Form 7の使い方と設定

Contact Form 7はプラグインなのでまずはContact Form 7をインストールし適用していきたいと思います。

インストール作業

まずはプラグインのインストールから行なっていきましょう。

1管理画面左のサイドバーより「プラグイン」→「新規追加」をクリックします。

管理画面左のサイドバーより「プラグイン」→「新規追加」をクリックします

2画面右の検索欄に「Contact Form 7」を入力します。

画面右の検索欄に「Contact Form 7」を入力します

3「今すぐインストール」をクリックします。

「今すぐインストール」をクリックします。

4「有効化」をクリックします。

「有効化」をクリックします

ここまででプラグインのインストールが完了しました。続いて設定を行なっていきます。

Contact Form 7の設定

ここからお問い合わせフォームの画面に表示する内容をカスタマイズしたりできます。ここでは最低限必要な設定のみ解説していきます。

1Contact Form 7の「設定」をクリックします。

Contact Form 7の「設定」をクリックします

2設定するコンタクトフォームのタイトルをクリックします。※ここではプラグインインストール時に自動で生成された「コンタクトフォーム1」をクリックします。

設定するコンタクトフォームのタイトルをクリックします。

コンタクトフォームはプラグインインストール時に1つ自動で生成されます。お問い合わせを複数作りたい場合などはこの画面からコンタクトフォームでそれぞれの分を追加していきます。

表示内容の設定

3フォームの表示内容を設定していきます。「フォーム」タブに表示されている内容がそれにあたります。

フォームの表示内容を設定していきます。

4ここではシンプルなお問い合わせフォームを作るので「題名」を削除し、お名前、メールアドレス、メッセージ、送信ボタンの4つを残します。(ここはお好みに合わせて変更してください。)

ここではシンプルなお問い合わせフォームを作るので「題名」を削除し、お名前、メールアドレス、メッセージ、送信ボタンの4つを残します。

5画面右上の「保存」をクリックします。

画面右上の「保存」をクリックします。

この他の設定に関しては後述のもう少しカスタマイズしたい方へで詳しく解説しています。表示を確認しないとイメージが湧きにくいかと思いますのでここではとりあえず表示する方法をご紹介していきます。

Contact Form 7を表示

では早速先ほど設定した内容を表示してみたいと思います。

1画面上部の青色で表示されている「ショートコード」をコピーします。

画面上部の青色で表示されている「ショートコード」をコピーします

2管理画面左のサイドバーより「固定ページ」→「新規追加」をクリックします。

管理画面左のサイドバーより「固定ページ」→「新規追加」をクリックします

3「タイトル」に「お問い合わせ」と入力します(任意の文字)

「タイトル」に「お問い合わせ」と入力します

4パーマリンクには「contact」を入力します。(任意の文字)

パーマリンクには「contact」を入力します。(任意の文字)

5「テキスト」タブをクリックします。

6先ほどコピーしたコードを入力画面に貼り付けます。

先ほどコピーしたコードを入力画面に貼り付けます

7「公開」をクリックします。

「公開」をクリックします

これで新しく作ったお問い合わせページに以下のような表示になっていれば表示成功です!

これで新しく作ったお問い合わせページに以下のような表示になっていれば表示成功です!

画像では見切れていますが、送信ボタンも表示されております。

もう少しカスタムしたい方へ

ここではコンタクトフォームをもう少し詳しくカスタムしたい方向けに解説していきます。

表示のカスタマイズ

表示のカスタムに関しては先ほどの設定画面の「フォーム」タブから行います。簡潔に説明していくと

お問い合わせ画面で表示されているテキストは以下の部分が反映され表示されています。

お問い合わせ画面で表示されているテキストは以下の部分が反映され表示されています

フォームの入力部分に関しては以下の部分が反映され表示されています。

簡単にショートコードの意味を書いていくと左の部分はフォームの種類を表しています。

簡単にショートコードの意味を書いていくと左の部分はフォームの種類を表しています

続いてフォームの種類に続いている「*」は入力が必須という意味になります。

最後の右側の部分はお問い合わせにユーザーが入力する内容を表しています。これは後述するメールの内容に反映されます。

最後の右側の部分はお問い合わせにユーザーが入力する内容を表しています。これは後述するメールの内容に反映されます。

メールのカスタマイズ

メールに関してはお問い合わせが行われた際に内容を受信するメールアドレスの変更や、題名などを変更出来ます。必ず確認したい箇所が「送信先」です。ここに記述されているメールアドレスに届くので必ずすぐにみれるメールアドレスを設定しておきましょう。

必ず確認したい箇所が「送信先」です。

その他の項目に関してはお好みですが、デフォルトだと題名がわかりづらいので見逃さないように先頭に記号などつけてもいいかもしれません。

当サイトの場合は以下のように設定しています。

当サイトの場合は以下のように設定しています

ここに登場している[your-name]などが先ほど「フォーム」タブでユーザーが入力した内容が反映されると説明した部分です。

メッセージのカスタマイズ

メッセージのカスタマイズに関しては特に難しいことはなく、それぞれの入力上部に表示されているタイミングでテキストが表示されますが、その内容を変更できる機能です。

メッセージのカスタマイズに関しては特に難しいことはなく、それぞれの入力上部に表示されているタイミングでテキストが表示されますが、その内容を変更できる機能です。

コンタクトフォームが表示されない場合

コンタクトフォームが表示されない場合はまずはコピペミスを疑ってください。(”[“や”]”などがきちんと全てペーストできているかなど。)

それでも解決しない場合はテーマに問題がある可能性があります。ここからはテーマをカスタムしている人や自作している人向けになります。

コンタクトフォームを出力しているのはpage.phpに記述されている(インクルードしている場合は別ファイルの可能性あり)

<?php the_content(); ?>

です。まずはこのコードを記述しているか、コードを記述しても表示されない場合はループの中に含まれているかも合わせて確認してみてください!

まとめ

Contact Form 7の使い方と設定を解説しました。解説しているサイトも多くコピペだけでお問い合わせフォームを作ることができるのでオススメのプラグインです。お問い合わせページを作る際の選択肢としていかがでしょうか。