【わずか5分】Contact Form 7でWordPressにお問い合わせフォームを設置する方法

contact form7

そろそろワードプレスにお問い合わせフォームを作りたい。でもどうやって作ればいいのかわからない?と悩んでいる人もいるのではないでしょうか?

そこで初心者の人でも簡単に設置できるプラグイン「Contact Form 7」をご紹介します。このプラグインはわずか5分でお問い合せフォームをつくることができますよ!

Contact Form 7ポイント

「Contact form 7」のポイントは3つです。

初心者の方でも躓くことなく簡単にお問い合わせフォームを作ることができる!

  • 専門知識がなくてもお問い合わせフォームを簡単に設置できる
  • 14の項目から自由に選択してフォームに追加できる
  • 自動返信メールが簡単に設定できる

自動返信メールとはフォームからお問い合わせがあったときに送り主に返信されるメッセージのことだよ!

Contact Form 7インストール方法

初めに「Contact Form 7」をインストールして有効化していきます。

左メニューの「プラグイン」にカーソルを合わせて新規追加をクリックしたら、検索窓にContact Form 7と入力しましょう。

contact form 7

「今すぐインストール」をクリックすると下図のようにインストール中になりますので少し待ちます。

インストール

インストール完了後に有効化します。「お問い合わせ」が左メニューに追加されていると思いますので確認してみてください。

有効化

フォームの編集画面に移動

まずは、左メニュー、お問い合わせからコンタクトフォームをクリックします。

画面、矢印箇所コンタクトフォーム1をクリックして編集画面に移動します。

コンタクトフォーム

タイトルを入力

編集画面に移動したらまずタイトルを入力しておきます。

タイトル入力画面
補足
タイトル名は公開されませんがフォームが増えたときにすぐに判別できるように固有の名前を付けておくと管理しやすくなります。

フォーム、メール、メッセージ、その他の設定

今回はフォーム、メール、メッセージの使い方を解説していますのでその他の設定についての解説はしていません。

フォーム

編集画面のフォームに移動してもらうとテキストやメッセージといった項目がずらりと並んでいますね。こちらの項目を選択してお問い合わせフォームを作っていきます。

入力項目

※この項目をフォームに追加するには [~]といったタグで囲んで使うことになります。しかし基本的には自動的に挿入されるので気にする必要はありません。例えば、名前なら[your-name]、メールアドレスなら [your-email]となります。

  • テキスト
  • メールアドレス
  • URL
  • 電話番号
  • 数値
  • 日付
  • テキストエリア
  • ドロップダウンメニュー
  • チェックボックス
  • ラジオボタン
  • 承認確認
  • クイズ
  • ファイル
  • 送信ボタン

メール

続いてメールタブに進んでもらうとメールの受け取りに関する設定ができます。

ここでのポイントは「送信先」です。この送信先とは受け取り先のメールアドレスのことです。

送信先に表示されているメールアドレスはお問い合わせメールを受け取るためのメールアドレスです。

フォームからのお問い合わせがあったときなどに受信するメールアドレスなので現在使っているアドレスにする必要があります。

メール

受信変更するときにはこのメールアドレスを変更します。
補足
受信する内容は自由に決めることができます。例えば、受信内容がメッセージ本文だけでいいなら上図のメッセージ本文箇所に[your-message]だけ追加しておけばいいわけです。

メール受信しときの表示例

通常の設定だと下図のように差出人名、メールアドレス、題名や本文内容が表示されて送られてきます。最低限このくらいの情報がないと誰からどんな内容が送れれてきたのか分かりませんね。

テスト送信

メッセージ(自動返信メール)

続きましてメッセージタブをクリックしてみてください。

自動返信メールとはフォームからお問い合わせがあったときにその送り主に対して返信されるメッセージのことです。

例えば、メッセージが正常に送信されたときには「ありがとうございます。メッセージは送信されました。」というメッセージが自動的に返信されます。

返信メールは自由に編集することができる

このメッセージは自由に編集することができます。例えば、初期状態の「〇〇メッセージは送信されました。」という文言を噛み砕いた文章に編集してみます。

「お問い合わせ頂きましてありがとうございます。」のように編集してみましょう。

その手順は以下のようになります。

  1. メッセージタブをクリック
  2. メッセージを選択して文章を書き直す
  3. 保存をクリック

▼超簡単です。「メッセージ」タブをクリックして文章を書き換えるだけです。

その他のメーッセージも自由に書き換えることができますよ!

メッセージ

▼「ありがとうございます。メッセージは送信されました。」⇒「お問い合わせ頂きましてありがとうございます。」に書き換わりましたね。

送信メッセージ

保存すれば完了です。

項目入力

項目の入力方法にはテキスト、電話番号、チェックボックスといった基本的なスタイルが確立されています。このスタイルを覚えておけばあとは応用が効くと思うのでぜひ活用してみてください。

テキスト

テキスト項目では住所や職業などの簡単なテキストフォームを作るのに向いています。

項目欄の中にAkismetとありますがAkismetとはスパムコメント対策のプラグインのことです。ここにチェックを入れておくとスパムを減らすことができます。

1)必須項目にチェックで未入力の場合にメッセージが表示されるようになります(必須表示される)。2)名前はこのままでも問題ない。3)Akismetにチェックを入れる。

※住所や職業といった名前の入力箇所はここではないので後述します。

  • 必須項目(レ点チェックを入れる)
  • 名前(そのままでもOK)
  • Akismet(オススメ)
akismet author

電話番号

電話番号もフォームにはよく使われる項目です。

デフォルト値という項目があるので、チェックを入れてプレースホルダーを設定しておきましょう。

プレースホルダーについてはこの後に説明します。

  • 必須項目(レ点チェックを入れる)
  • 名前(そのままでもOK)
  • デフォルト値の設定
フォームタグ生成画面
補足
入力を終えると下の箇所にコードが表示されるのでこのコードをフォームにコピペまたはタグを挿入ボタンを押します。

プレースホルダーってなに?

プレースホルダーとはフォーム入力時に間違わないように事前に例文を表示させておく機能です。

例えば、フォームに000-0000-0000と表示させておくことで入力ミスを減らすことができます。

表示テキストはラベルタグのすぐ後ろに書く

フォームに入力されたコードは前後にラベルタグで挟みます。このとき表示させるテキストは下図のようにタグのすぐ後ろに入力します。

フォームにコードを挿入したら、前に<label>後ろに</label>といった感じでコードを挟みます。

例えば、[tel-〇〇]コードをタグで挟む場合には以下のように<label>タグで挟みます。

テキストをラベルタグで挟む

チェックボックスや送信ボタンはタグで挟む必要はないです。

最後に保存して完了です。

チェックボックスの作り方

チェックボックスもお問い合わせフォームには使われていることが多いですね。

よく見るのはフォーム入力後に送信確認するためのチェックボックスです。

サイトフォームで「上記内容に間違いがなければチェックを入れてから送信してください。」という文言を一度くらいは見たことがあるのではないでしょうか?今回このチェックボックスを実際に作って見ようと思います。

チェックボックスで入力が必要になる項目は3つです。今までのパターンと一緒なので特につまずく箇所はないと思いますが、ここでのポイントはオプションです。オプション個所に表示させる文言を入力します。

  • 必須項目(レ点チェックを入れる)
  • 名前(そのままでもOK)
  • オプション(表示したいテキスト)

入力が完了したらタグを挿入ボタンを押します。

フォームタグ

※最後にタグを挿入ボタンをクリックしてコードを追加します。フォームにコード[~]を直接コピぺしてもOKです。

保存してからプレビューで確認

プレビューしてみると文言の隣にきちんとチェックボックスが挿入されているのが確認できます。

チェックボックス

今すぐお問い合わせフォームを設置したい方(所要時間5分)

とくにこだわりはないので今すぐにお問い合せフォームを設置したい!という人はショートコードを固定ページにコピペすればOKです。

名前、メールアドレス、題名、メッセージ本文、送信は初期設定で入力済みになっているのでこのままでも全然OKですね。

ちなみにプレビューするとこのようになりますよ!

お問い合わせフォーム

ショートコードを固定ページにコピペ

コンタクトフォームからショートコードをコピーして、固定ページにペーストします。

手順は以下の通りです。

  1. コンタクトフォームからショートコードをコピー
  2. 固定ページに移動してショートコードをペースト

とても簡単!

コンタクトフォーム

コピーしたショートコードを固定ページの本文にペーストします。

以上です。

固定ページ
補足
プレビューでブラウザの表示確認をしたあとに公開ボタンをクリックします。公開後はサイトのグローバルナビなど見やすい位置に貼れば完了です。

特にこだわりが無ければ5分でお問合せフォームが作れますね。

お問い合わせフォーム

ブログやサイト運営するには遅かれ早かれ必ず必要になってきます。アドセンスの申請にも必須なのでサクッと作っちゃいましょう。それではまた

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください