プラグイン

【初心者向け】Contact Form 7の設定と使い方を解説!

この記事の内容

この記事ではお問い合わせフォームを作成するプラグイン、Contact Form 7の設定と使い方について中心に解説していきます。

基本的な設定から簡単なカスタマイズなどを分かりやすく詳しく説明。

これからブログにお問い合わせフォームを導入しようとしている方は是非参考にしてみて下さい。

田村カツオ
田村カツオ
記事の内容を箇条書きでズバッと言うと…
  • Contact Form 7は超カンタンな最低限の設定で十分機能する。
  • 出来たお問い合わせフォームをカスタマイズしたければするのも全然あり。
  • お問い合わせフォームをブログに設置するのはかなり大きな意味がある。
この記事を読むことでブログのお問い合わせフォーム全般について良くわかるでしょう。

※WordPressブログで稼ぐ為におススメなプラグインをまとめた記事もありますので、良かったら参考にしてみて下さい。

WordPressブログで稼ぐのにおすすめなプラグイン13選を紹介!ここではお金を稼いでいく目的でWordPressブログを運営していくのに、おススメなプラグインを13個絞って紹介していきたいと思います。プラグインの数が多くてどれを使ったら良いかわからない…!という方は是非参考にしてみて下さい。...

WordPressブログで稼ぐのにおすすめなプラグイン13選を紹介!

カッパ君
カッパ君
内容に入っていくよん!

【超カンタン】Contact Form 7の基本的な設定と使い方はとりあえずこれでOK!

①まずはContact Form 7をインストールして有効化します。

Contact Form 7

「プラグイン」→「新規追加」で「Contact Form 7」と検索し、インストール&有効化して下さい。

 

②有効化するとメニュー一覧に「お問い合わせ」が出来ますので「お問い合わせ」→「新規追加」をクリック↓

お問い合わせの新規追加

 

③コンタクトフォーム(お問い合わせフォーム)を作成する画面に遷移します↓

作成画面

まず一番上のタイトルにお問い合わせフォームのタイトルを入力しましょう。(①)

ここに入力したタイトルは自分しか分からず、読者から見えるものではありませんので、自分で管理しやすいものにします。

僕は説明の為に「サンプル」としていますが

  • 「フォーム1」
  • 「○○の上部のフォーム」

みたいに自分で管理しやすい名前なら何でもOK。

 

保存ボタンを押すとショートコードが出来ます。(②)

このショートコードを張り付けた場所にお問い合わせフォームが出現します。

(色々とカスタマイズも出来るのですが、それは次章にて説明するとして、特に何もいじらずにデフォルトのままで使用してもOK)

 

④お問い合わせフォームのショートコードを貼りつける記事を作りましょう。

「固定ページ」→「新規追加」をクリック↓

固定ページの新規追加

 

この固定ページに先ほど出てきたショートコードを貼り付けます。

固定ページ追加画面

固定ページのタイトルを入力します。(①)

ここは読者にも見える場所なので、読者にとっても分かりやすいタイトルが良いです。

  • 「お問い合わせ」
  • 「Contact Us」

みたいな感じが良いでしょう。

 

ショートコードはテキストモードで貼り付けます(②、③)

最後に「公開」をクリックする(④)とお問い合わせフォームが載っている固定ページが出来ました↓

完成したお問い合わせフォーム
カッパ君
カッパ君
特にカスタマイズしなくても、ちゃんとしたお問い合わせフォームが出来ちゃう!

 

⑥固定ページはそのままでは読者が見る事は出来ないのでグローバルメニューに載せる等しておきましょう。

【超簡単】グローバルメニューの作り方を解説!ここではWordPressブログでのグローバルメニューの作り方を解説していきます。グローバルメニューは必ず見られる場所なので超重要。これからブログを立ち上げるという方は参考にしてみて下さい。...

【超簡単】グローバルメニューの作り方を解説!

Contact Form 7のカスタマイズについて解説!

前章では特にカスタマイズせずにデフォルト状態でお問い合わせフォームを作成しました。

それでも形になっていてちゃんと使えるものですが、Contact Form 7ではそれをもっとカスタマイズする事が可能なので、その方法について説明していきます。

田村カツオ
田村カツオ
カスタマイズは凝ればキリがないので、初心者の方は前段で説明したデフォルトのお問い合わせフォームでとりあえずOKですよ。

 

①「お問い合わせ」→「コンタクトフォーム」を選択。

お問い合わせ

 

②現在作っているコンタクトフォームが一覧で表示されるので、カスタマイズしたいものをクリック。

コンタクトフォーム一覧

 

③コンタクトフォームの編集画面に遷移します。

コンタクトフォームの編集
  • フォーム
  • メール
  • メッセージ
  • その他の設定

の4項目があるのですが、以下それぞれについて解説していきます。

フォーム

「フォーム」ではお問い合わせフォームで入力してもらう項目などを調整できます。

ボタン

上部に出てるボタン(↑)を押すと、それぞれの項目の設定を行う事が出来ますが、共通のポイントを先に説明しておきます。

共通のポイント

①の項目タイプですが、こちらにチェックを入れると「必須項目」になり、入力しないとメッセージ送信できないようになります。

メッセージを送信してくる人のメールアドレスや本文部分に使う要素は必須項目にしておくべきでしょう。

 

②の名前はフォームのカスタマイズを行う時に使うタグ名です。

「フォーム」ではタグを入力欄に入力していく事でカスタマイズしていきますが、「名前」に入れた文字列が②’のタグに反映されます。

デフォルトだと数字などの分かりにくいものになるので、自分で分かりやすいものに変更します。

また、名前は空欄には出来ません。

 

③の「デフォルト値」で「このテキストを項目のプレースホルダーとして使用する」にチェックを入れると、「デフォルト値」に入力した文章が、最初から薄く入力されていて読者に分かりやすい状態を作る事が可能↓

プレースホルダー

 

④の「タグを挿入」をクリックする事で個別に設定した項目のタグを入力できます。

 

<label> </label>はあっても無くても、項目は表示されますが、これを入力する事でデザイン的に整ったりするので、入力した項目を<label> </label>で挟んでおくのはアリです。

 

各項目について表にて説明していきますね!

テキスト 1行分の文章を入力する欄。
デフォルトの「お名前」と「題名」はこちらで作成されている。
メールアドレス メールアドレスの入力欄。
デフォルトの「メールアドレス」はこちらで作成されている。
URL URLの入力欄。
電話番号 電話番号の入力欄。
数値 数値を入力する。スピンボックス形式かスライダー形式かで印象が大きく変わる。
日付 日付入力欄。
テキストエリア 「テキスト」は1行分だったが、「テキストエリア」は複数行分の入力欄。
デフォルトの「メッセージ本文」はこちらで作成されている。
ドロップダウンメニュー カーソルを当てると下にずらっと項目が出てきて選べるメニュ。
チェックボックス 「同意しました」など確認させる項目を作るのに便利。
ラジオボタン 2つ以上の選択肢から選択させる項目を作るのに便利。
承諾確認 承諾確認の欄が作れる。
クイズ クイズ形式のメニューが作れる。
ファイル ファイルを添付できるようにするボタン。
送信ボタン メッセージを送信するボタン。最初からデフォルトで入っている。

メール

「メール」では

  1. お問い合わせフォームから自分に送信されるメッセージの形式
  2. メッセージを送った人物への自動返信

の2つを設定できます。

お問い合わせフォームから自分に送信されるメッセージの形式

メール

①の「送信先」は、お問い合わせフォームを使ってどこにメッセージを届けるかを設定する箇所です。

ブログ主である自分のメールアドレスを入力します。(デフォルトでそうなってます)

 

②の「送信元」はメッセージが自分のメールアドレスに届いた時の、差出人の名前です。

デフォルトだと

ブログ名<自分のメールアドレス>

になってますが、ブログ名の部分は変えてもOK。

「ブログ名からのお問い合わせ」とか色々あると思います。

<メールアドレス>の部分はややこしくなるので変えない方が無難。

 

③の「題名」は送られてくるメッセージのタイトルですね。

デフォルトだと

ブログ名 “[your-subject]”

になってます。

[your-subject]はメッセージ送信者の付けたタイトルなので変えるのはやめておきましょう。

ブログ名は「ブログ名からのメッセージ」とかに変えてもOK。

田村カツオ
田村カツオ
デフォルトでも全然分かりますけどね。

 

④のメッセージ本文が一番重要で、これも正直デフォルトでも大体OKなのですが、お問い合わせフォームで入力する項目を増やしている場合は、それらの入力された項目が反映されるように調整しましょう。

フォームをカスタマイズする時に追加したタグを本文の枠内に入れておく事で、メッセージ送信者が入力した値がメッセージ内に記載されます。

メッセージを送った人物への自動返信

「メール」の下部に進むと「メール(2)を使用」という欄があり、そこにチェックを入れるとメッセージ送信者に対しての自動返信を設定する事が可能です。

デフォルトではチェックが入っていません

メール(2)

①の「送信先」は自動返信メールを送信する相手なので、相手のメールアドレスが入力されるように[your-email]と入ってます。

変える必要なし。

 

②は自動返信メールの差出人です。

デフォルトだと

ブログ名<自分のメールアドレス>

になってますが、このままで問題ないでしょう。

 

③は自動返信メールのタイトルでデフォルトだと

デフォルトだと

ブログ名 “[your-subject]”

になってます。

特に強い希望が無ければこのままで良いでしょう。

 

④は自動返信メールの本文でこのままでも良いですが、コードなどはそのままに冒頭に「下記のメッセージを受信しました」と入れても良いでしょうね。

メッセージ

お問い合わせフォームからメッセージ送信した人に対して表示されるメッセージがあります↓

メッセージ

 

「メッセージ」はその内容を決める箇所です。

メッセージ

見ての通り、様々なメッセージが用意されていて、基本的にはデフォルトのままでもOK。

 

しいて言えば一番頻度の高い「メッセージが正常に送信された」時のメッセージはオリジナルのものにしてみても良いかも、と個人的には思いますね!

その他の設定

その他の設定ではカスタマイズのコードを入力する事で、お問い合わせフォームをさらに高度にカスタマイズできます。

カスタマイズと言っても外見的なものを変えるのではなく「ログインしていないとメッセージを送信できなくする」というような機能的なカスタマイズです。

その他の設定

 

個人的にはこの設定はしなくてもよいと思ってはいますが、興味がある方はContact Form 7の公式ページでいくつかのコードが手に入るので参考にしてみて下さい。

 

また以下のコードを張り付けると、メッセージを送信した後に指定したURLのページにジャンプさせる事が出来ます。

「回答ありがとうございました」「情報提供ありがとうございました」的なサンキューページを作ってそこに飛ばすのはありでしょう。

1on_sent_ok: “window.location.href =’サンクスページのURL’;”

※「サンクスページのURL」の部分にジャンプさせたいURLを記載する。

※バズ部様の【簡単】Contact Form 7の効果的なカスタム方法より引用。

お問い合わせフォームを作る事で世界が広がる!?

最後にお問い合わせフォームの意味合いについて述べておきます。

 

お問い合わせフォームはどんなブログでも設置しておくべきです。

それはブログに来た読者と交流が持てる接点だから。

  • 貴方のブログが素晴らしいと感じたから、広告を載せてほしいとお願いしたい人。
  • 相互リンクしたい人。
  • 公開している記事について、貴重な情報を持っているから伝えたい人。
  • 記事の削除や訂正をしてほしい人。

など等、色々な場合で読者はブログの運営者と連絡を取りたいものなのです。

田村カツオ
田村カツオ
ちなみに僕は上記の全部経験があります。

ですので、お問い合わせフォームは必ず設置しておきましょう。

 

確かに、プラグインを使わないで固定ページに自分のメールアドレスを載せて「何かあればこちらまでメール下さい」と書いておいても、読者とコンタクトは取れます。

ただ、それだとちょっと不格好ですし、お問い合わせフォームの形をとった方が、こちらが知りたい情報を入力する欄なども作れますので色々と便利。

 

という事でお問い合わせフォームは設置しましょう。

ABOUT ME
田村カツオ
副業お坊さんブロガー。YouTubeとTwitterもよろしくお願いします!

COMMENT

メールアドレスが公開されることはありません。

13 + 1 =