この記事ではお問い合わせフォームを作成するプラグイン、Contact Form 7の設定方法と使い方について中心に解説していきます。
基本的な設定から簡単なカスタマイズなどを分かりやすく詳しく説明。
これからブログにお問い合わせフォームを導入しようとしている方は是非参考にしてみて下さい。
記事の内容を箇条書きでズバッと言っておきます！
- Contact Form 7は超カンタンな最低限の設定で十分機能する。
- 出来たお問い合わせフォームをカスタマイズしたければするのも全然あり。
- お問い合わせフォームをブログに設置するのは重要。
- お問い合わせフォームを設置すると営業やスパムメールも来るが対策可能。
記事の本文ではもっとしっかり詳細に説明していきますよ～！
【超カンタン】Contact Form 7の基本的な設定と使い方はとりあえずこれでOK！
【1】まずはContact Form 7をインストールして有効化します。
「プラグイン」→「新規追加」で「Contact Form 7」と検索し、インストール＆有効化して下さい。
【2】有効化するとメニュー一覧に「お問い合わせ」が出来ますので「お問い合わせ」→「新規追加」をクリック。
【3】コンタクトフォーム（お問い合わせフォーム）を作成する画面に遷移します↓
まず一番上のタイトルにお問い合わせフォームのタイトルを入力しましょう。（①）
ここに入力したタイトルは自分しか分からず、読者から見えるものではありませんので、自分で管理しやすいものにします。
僕は説明の為に「サンプル」としていますが
- 「フォーム1」
- 「○○の上部のフォーム」
みたいに自分で管理しやすい名前なら何でもOK。
保存ボタンを押すとショートコードが出来ます。（②）
このショートコードを張り付けた場所にお問い合わせフォームが出現します。
（色々とカスタマイズも出来るのですが、それは次章にて説明するとして、特に何もいじらずにデフォルトのままで使用してもOK）
【4】お問い合わせフォームのショートコードを貼りつける記事を作りましょう。
「固定ページ」→「新規追加」をクリック↓
【5】この固定ページに先ほど出てきたショートコードを貼り付けます。
固定ページのタイトルを入力します。（①）
ここは読者にも見える場所なので、読者にとっても分かりやすいタイトルが良いです。
- 「お問い合わせ」
- 「Contact Us」
みたいな感じが良いでしょう。
ショートコードはテキストモードで貼り付けます（②、③）
最後に「公開」をクリックする（④）とお問い合わせフォームが載っている固定ページが出来ました↓
特にカスタマイズしなくても、ちゃんとしたお問い合わせフォームが出来ちゃう！
【6】固定ページはそのままでは読者が見る事は出来ないのでグローバルメニューに載せる等しておきましょう。
Contact Form 7のカスタマイズについて解説！
前章では特にカスタマイズせずにデフォルト状態でお問い合わせフォームを作成しました。
それでも形になっていてちゃんと使えるものですが、Contact Form 7ではそれをもっとカスタマイズする事が可能なので、その方法について説明していきます。
カスタマイズは凝ればキリがないので、初心者の方は前段で説明したデフォルトのお問い合わせフォームでとりあえずOKですよ。
【1】「お問い合わせ」→「コンタクトフォーム」を選択。
【2】現在作っているコンタクトフォームが一覧で表示されるので、カスタマイズしたいものをクリック。
【3】コンタクトフォームの編集画面に遷移します。
- フォーム
- メール
- メッセージ
- その他の設定
の4項目があるのですが、以下それぞれについて解説していきます。
フォーム
「フォーム」ではお問い合わせフォームで入力してもらう項目などを調整できます。
上部に出てるボタン（↑）を押すと、それぞれの項目の設定を行う事が出来ますが、共通のポイントを先に説明しておきます。
①の項目タイプですが、こちらにチェックを入れると「必須項目」になり、入力しないとメッセージ送信できないようになります。
メッセージを送信してくる人のメールアドレスや本文部分に使う要素は必須項目にしておくべきでしょう。
②の名前はフォームのカスタマイズを行う時に使うタグ名です。
「フォーム」ではタグを入力欄に入力していく事でカスタマイズしていきますが、「名前」に入れた文字列が②’のタグに反映されます。
デフォルトだと数字などの分かりにくいものになるので、自分で分かりやすいものに変更します。
また、名前は空欄には出来ません。
③の「デフォルト値」で「このテキストを項目のプレースホルダーとして使用する」にチェックを入れると、「デフォルト値」に入力した文章が、最初から薄く入力されていて読者に分かりやすい状態を作る事が可能↓
④の「タグを挿入」をクリックする事で個別に設定した項目のタグを入力できます。
では、ここから各項目について表にて説明していきますね！
| テキスト | 1行分の文章を入力する欄。 デフォルトの「お名前」と「題名」はこちらで作成されている。 |
| メールアドレス | メールアドレスの入力欄。 デフォルトの「メールアドレス」はこちらで作成されている。 |
| URL | URLの入力欄。 |
| 電話番号 | 電話番号の入力欄。 |
| 数値 | 数値を入力する。スピンボックス形式かスライダー形式かで印象が大きく変わる。 |
| 日付 | 日付入力欄。 |
| テキストエリア | 「テキスト」は1行分だったが、「テキストエリア」は複数行分の入力欄。 デフォルトの「メッセージ本文」はこちらで作成されている。 |
| ドロップダウンメニュー | カーソルを当てると下にずらっと項目が出てきて選べるメニュ。 |
| チェックボックス | 「同意しました」など確認させる項目を作るのに便利。 |
| ラジオボタン | 2つ以上の選択肢から選択させる項目を作るのに便利。 |
| 承諾確認 | 承諾確認の欄が作れる。 |
| クイズ | クイズ形式のメニューが作れる。 |
| ファイル | ファイルを添付できるようにするボタン。 |
| 送信ボタン | メッセージを送信するボタン。最初からデフォルトで入っている。 |
メール
「メール」では
- お問い合わせフォームから自分に送信されるメッセージの形式
- メッセージを送った人物への自動返信
の2つを設定できます。
お問い合わせフォームから自分に送信されるメッセージの形式
①の「送信先」は、お問い合わせフォームを使ってどこにメッセージを届けるかを設定する箇所です。
ブログ主である自分のメールアドレスを入力します。（デフォルトでそうなってます）
②の「送信元」はメッセージが自分のメールアドレスに届いた時の、差出人の名前です。
デフォルトだと
ブログ名＜自分のメールアドレス＞
になってますが、ブログ名の部分は変えてもOK。
「ブログ名からのお問い合わせ」とか色々あると思います。
＜メールアドレス＞の部分はややこしくなるので変えない方が無難。
③の「題名」は送られてくるメッセージのタイトルですね。
デフォルトだと
ブログ名[your-subject]
になってます。
[your-subject]はメッセージ送信者の付けたタイトルなので変えるのはやめておきましょう。
ブログ名は「ブログ名からのメッセージ」とかに変えてもOK。
デフォルトでも全然分かりますけどね。
④のメッセージ本文が一番重要で、これも正直デフォルトでも大体OKなのですが、お問い合わせフォームで入力する項目を増やしている場合は、それらの入力された項目が反映されるように調整しましょう。
フォームをカスタマイズする時に追加したタグを本文の枠内に入れておく事で、メッセージ送信者が入力した値がメッセージ内に記載されます。
メッセージを送った人物への自動返信
「メール」の下部に進むと「メール（2）を使用」という欄があり、そこにチェックを入れるとメッセージ送信者に対しての自動返信を設定する事が可能です。
（デフォルトではチェックが入っていません）
①の「送信先」は自動返信メールを送信する相手なので、相手のメールアドレスが入力されるように[your-email]と入ってます。
変える必要なし。
②は自動返信メールの差出人です。
デフォルトだと
ブログ名＜自分のメールアドレス＞
になってますが、このままで問題ないでしょう。
③は自動返信メールのタイトルでデフォルトだと
ブログ名 “[your-subject]
になってます。
特に強い希望が無ければこのままで良いでしょう。
④は自動返信メールの本文でこのままでも良いですが、コードなどはそのままに冒頭に「下記のメッセージを受信しました」と入れても良いでしょうね。
メッセージ
お問い合わせフォームからメッセージ送信した人に対して、その場で表示されるメッセージがあります↓
「メッセージ」はその内容を決める箇所です。
見ての通り、様々なメッセージが用意されていて、基本的にはデフォルトのままでもOK。
しいて言えば一番頻度の高い「メッセージが正常に送信された」時のメッセージはオリジナルのものにしてみても良いかも、と個人的には思いますね！
その他の設定
その他の設定ではカスタマイズのコードを入力する事で、お問い合わせフォームをさらに高度にカスタマイズできます。
カスタマイズと言っても外見的なものを変えるのではなく「ログインしていないとメッセージを送信できなくする」というような機能的なカスタマイズです。
個人的にはこの設定はしなくてもよいと思ってはいますが、興味がある方はContact Form 7の公式ページでいくつかのコードが手に入るので参考にしてみて下さい。
また以下のコードを張り付けると、メッセージを送信した後に指定したURLのページにジャンプさせる事が出来ます。
「回答ありがとうございました」「情報提供ありがとうございました」的なサンキューページを作ってそこに飛ばすのはありでしょう。
ちなみに下記記事では迷惑メールに対処する設定方法を詳しく解説していますので、ぜひ参考にしてみて下さい↓
Contact Form 7で営業やスパム等の迷惑メールに対処する方法。
お問い合わせフォームを作る事で世界が広がる！？
最後にお問い合わせフォームの意味合いについて述べておきます。
お問い合わせフォームはどんなブログでも設置しておくべきです。
それはブログに来た読者と交流が持てる接点だから。
- 貴方のブログが素晴らしいと感じたから、広告を載せてほしいとお願いしたい人。
- 相互リンクしたい人。
- 公開している記事について、貴重な情報を持っているから伝えたい人。
- 記事の削除や訂正をしてほしい人。
など等、色々な場合で読者はブログの運営者と連絡を取りたいものなのです。
ですので、お問い合わせフォームは必ず設置しておきましょう。
確かに、プラグインを使わないで固定ページに自分のメールアドレスを載せて「何かあればこちらまでメール下さい」と書いておいても、読者とコンタクトは取れます。
ただ、それだとちょっと不格好ですし、お問い合わせフォームの形をとった方が、こちらが知りたい情報を入力する欄なども作れますので色々と便利。
という事でお問い合わせフォームは設置しましょう。
今回の内容は以上です。
最後までお読みいただきありがとうございました！
