そろそろワードプレスにお問い合わせフォームを作りたい。でもどうやって作ればいいのかわからない？と悩んでいる人もいるのではないでしょうか？
そこで初心者の人でも簡単に設置できるプラグイン「Contact Form 7」をご紹介します。このプラグインはわずか5分でお問い合せフォームをつくることができますよ！
コンテンツ
Contact Form 7ポイント
「Contact form 7」のポイントは3つです。
初心者の方でも躓くことなく簡単にお問い合わせフォームを作ることができる！
- 専門知識がなくてもお問い合わせフォームを簡単に設置できる
- 14の項目から自由に選択してフォームに追加できる
- 自動返信メールが簡単に設定できる
Contact Form 7インストール方法
初めに「Contact Form 7」をインストールして有効化していきます。
左メニューの「プラグイン」にカーソルを合わせて新規追加をクリックしたら、検索窓にContact Form 7と入力しましょう。
「今すぐインストール」をクリックすると下図のようにインストール中になりますので少し待ちます。
インストール完了後に有効化します。「お問い合わせ」が左メニューに追加されていると思いますので確認してみてください。
フォームの編集画面に移動
まずは、左メニュー、お問い合わせからコンタクトフォームをクリックします。
画面、矢印箇所コンタクトフォーム1をクリックして編集画面に移動します。
タイトルを入力
編集画面に移動したらまずタイトルを入力しておきます。
フォーム、メール、メッセージ、その他の設定
今回はフォーム、メール、メッセージの使い方を解説していますのでその他の設定についての解説はしていません。
フォーム
編集画面のフォームに移動してもらうとテキストやメッセージといった項目がずらりと並んでいますね。こちらの項目を選択してお問い合わせフォームを作っていきます。
※この項目をフォームに追加するには [～]といったタグで囲んで使うことになります。しかし基本的には自動的に挿入されるので気にする必要はありません。例えば、名前なら[your-name]、メールアドレスなら [your-email]となります。
- テキスト
- メールアドレス
- URL
- 電話番号
- 数値
- 日付
- テキストエリア
- ドロップダウンメニュー
- チェックボックス
- ラジオボタン
- 承認確認
- クイズ
- ファイル
- 送信ボタン
メール
続いてメールタブに進んでもらうとメールの受け取りに関する設定ができます。
ここでのポイントは「送信先」です。この送信先とは受け取り先のメールアドレスのことです。
送信先に表示されているメールアドレスはお問い合わせメールを受け取るためのメールアドレスです。
フォームからのお問い合わせがあったときなどに受信するメールアドレスなので現在使っているアドレスにする必要があります。
メール受信しときの表示例
通常の設定だと下図のように差出人名、メールアドレス、題名や本文内容が表示されて送られてきます。最低限このくらいの情報がないと誰からどんな内容が送れれてきたのか分かりませんね。
メッセージ（自動返信メール）
続きましてメッセージタブをクリックしてみてください。
自動返信メールとはフォームからお問い合わせがあったときにその送り主に対して返信されるメッセージのことです。
例えば、メッセージが正常に送信されたときには「ありがとうございます。メッセージは送信されました。」というメッセージが自動的に返信されます。
返信メールは自由に編集することができる
このメッセージは自由に編集することができます。例えば、初期状態の「〇〇メッセージは送信されました。」という文言を噛み砕いた文章に編集してみます。
「お問い合わせ頂きましてありがとうございます。」のように編集してみましょう。
その手順は以下のようになります。
- メッセージタブをクリック
- メッセージを選択して文章を書き直す
- 保存をクリック
▼超簡単です。「メッセージ」タブをクリックして文章を書き換えるだけです。
その他のメーッセージも自由に書き換えることができますよ！
▼「ありがとうございます。メッセージは送信されました。」⇒「お問い合わせ頂きましてありがとうございます。」に書き換わりましたね。
保存すれば完了です。
項目入力
項目の入力方法にはテキスト、電話番号、チェックボックスといった基本的なスタイルが確立されています。このスタイルを覚えておけばあとは応用が効くと思うのでぜひ活用してみてください。
テキスト
テキスト項目では住所や職業などの簡単なテキストフォームを作るのに向いています。
項目欄の中にAkismetとありますがAkismetとはスパムコメント対策のプラグインのことです。ここにチェックを入れておくとスパムを減らすことができます。
1）必須項目にチェックで未入力の場合にメッセージが表示されるようになります（必須表示される）。2）名前はこのままでも問題ない。3）Akismetにチェックを入れる。
※住所や職業といった名前の入力箇所はここではないので後述します。
- 必須項目（レ点チェックを入れる）
- 名前（そのままでもOK）
- Akismet（オススメ）
電話番号
電話番号もフォームにはよく使われる項目です。
デフォルト値という項目があるので、チェックを入れてプレースホルダーを設定しておきましょう。
プレースホルダーについてはこの後に説明します。
- 必須項目（レ点チェックを入れる）
- 名前（そのままでもOK）
- デフォルト値の設定
プレースホルダーってなに？
プレースホルダーとはフォーム入力時に間違わないように事前に例文を表示させておく機能です。
例えば、フォームに000-0000-0000と表示させておくことで入力ミスを減らすことができます。
表示テキストはラベルタグのすぐ後ろに書く
フォームに入力されたコードは前後にラベルタグで挟みます。このとき表示させるテキストは下図のようにタグのすぐ後ろに入力します。
フォームにコードを挿入したら、前に<label>後ろに</label>といった感じでコードを挟みます。
例えば、[tel-〇〇]コードをタグで挟む場合には以下のように<label>タグで挟みます。
最後に保存して完了です。
チェックボックスの作り方
チェックボックスもお問い合わせフォームには使われていることが多いですね。
よく見るのはフォーム入力後に送信確認するためのチェックボックスです。
サイトフォームで「上記内容に間違いがなければチェックを入れてから送信してください。」という文言を一度くらいは見たことがあるのではないでしょうか？今回このチェックボックスを実際に作って見ようと思います。
チェックボックスで入力が必要になる項目は3つです。今までのパターンと一緒なので特につまずく箇所はないと思いますが、ここでのポイントはオプションです。オプション個所に表示させる文言を入力します。
- 必須項目（レ点チェックを入れる）
- 名前（そのままでもOK）
- オプション（表示したいテキスト）
入力が完了したらタグを挿入ボタンを押します。
※最後にタグを挿入ボタンをクリックしてコードを追加します。フォームにコード[～]を直接コピぺしてもOKです。
保存してからプレビューで確認
プレビューしてみると文言の隣にきちんとチェックボックスが挿入されているのが確認できます。
今すぐお問い合わせフォームを設置したい方（所要時間5分）
とくにこだわりはないので今すぐにお問い合せフォームを設置したい！という人はショートコードを固定ページにコピペすればOKです。
名前、メールアドレス、題名、メッセージ本文、送信は初期設定で入力済みになっているのでこのままでも全然OKですね。
ちなみにプレビューするとこのようになりますよ！
ショートコードを固定ページにコピペ
コンタクトフォームからショートコードをコピーして、固定ページにペーストします。
手順は以下の通りです。
- コンタクトフォームからショートコードをコピー
- 固定ページに移動してショートコードをペースト
とても簡単！
コピーしたショートコードを固定ページの本文にペーストします。
以上です。
特にこだわりが無ければ5分でお問合せフォームが作れますね。
ブログやサイト運営するには遅かれ早かれ必ず必要になってきます。アドセンスの申請にも必須なのでサクッと作っちゃいましょう。それではまた
