たった3分で完了。Contact Form 7で問い合わせフォームを作ろう!

2018年9月7日ブログ管理Contact Form 7, Luxeritas, WordPressプラグイン, ブログ管理, 初心者

Contact Form 7ヘッダー

トリ師匠
トリ師匠
いよいよプラグインも一段落や、最後はContact Form 7で問い合わせフォームを作るで

ぐず夫
ぐず夫
問い合わせフォームってなんや?
トリ師匠
トリ師匠
ぐず夫に連絡取りたい奇特な人のための窓口や。ええからさっさと作るで!

ということで、今回はContact Form 7で簡単に問い合わせフォームを作ります

Contact Form 7とはなんぞや

ぐず夫
ぐず夫
もうちょいちゃんと説明せえ。コンタクトレンズダブルナインてなんじゃ?
トリ師匠
トリ師匠
(……ダブルナイン?)
お主はネットで買い物したことあるか?
ぐず夫
ぐず夫
あるで、ギリギリ。
トリ師匠
トリ師匠
もしなかなか商品が届かなかったり、商品をキャンセルしたい時、どうにかして店に連絡せなあかんことがあるとするやん?
ぐず夫
ぐず夫
…ないけどな。
トリ師匠
トリ師匠
あるとしたらや!
もし電話対応もないような店やと、メールか問い合わせページから要点をまとめた文章を送るしかないやろ?
ぐず夫
ぐず夫
そんなこともあるかもな
トリ師匠
トリ師匠
ウチは店やないけど、ぐず夫のブログにもそんな奇特な人がおるかもしれん。せやから専用の問い合わせページを作っとくんじゃ。ま、来るとしても大半は罵詈雑言の文句だけやろけど。
ぐず夫
ぐず夫
ば、バリ鳥雑炊?
なんやよう分からんが美味そうやな
トリ師匠
トリ師匠
企業やなしに大層なもんはいらへんから、今回は簡単にContact Form 7を使って問い合わせのページを作ろう言うわけじゃ。

ぐず夫
ぐず夫
て、手抜きかい! 馬鹿にすなよ!(わなわな)

トリ師匠
トリ師匠
お手軽に立派なもんができるで心配すな。たった3分やで、さっさと作るで。まずはプラグインをインストールして起動じゃ!

◆プラグインのインストールはこちらを参照!

三分で完了。Contact Form7(Ver5.0.4)を使った簡単お問い合わせフォーム作成

お問い合わせイメージ

トリ師匠
トリ師匠
本来は沢山機能があるがの、今回は必要な設定だけ使って問い合わせフォームを作るでの。管理画面の「お問い合わせ」から「Contact Form7」を立ち上げるんじゃ。
Contact Form 7 設定の流れ!
  1. ご自身のメールアドレスの確認
  2. ショートコードの確認
  3. 問い合わせフォームの作成と確認
  4. 問い合わせページの確認
トリ師匠
トリ師匠
確認するポイントはたった4つじゃ。ちゃっちゃといくで!

ポイント① ご自身のメールアドレスの確認

コンタクトフォーム1

トリ師匠
トリ師匠
デフォルトで作成されている「コンタクトフォーム1」をクリックじゃ!

名称変更

トリ師匠
トリ師匠
ここでフォームを作るんじゃが、親切なことに初期状態で必要なもんを揃えてくれとる。「コンタクトフォーム1」では名前が締まらんで、「お問い合わせ」に変更して「メールタブ」をクリックじゃ!

宛先イメージ

トリ師匠
トリ師匠
「送信先」欄に記述したアドレスにメールが届くでの。ここだけ確認するんじゃ! 正しければ「保存」を押して第一ポイント終了じゃ。

 

ポイント② ショートコードの確認

トリ師匠
トリ師匠
コンタクトフォーム画面に戻ったら、先に作った「お問い合わせ」の横に書かれたショートコードに注目じゃ!

ショートコードイメージ

 

トリ師匠
トリ師匠
書かれているショートコードをコピーして第二ポイント終了じゃ。

 

ポイント③ 問い合わせフォームの作成と確認

トリ師匠
トリ師匠
次は問い合わせのページを作るぞ。管理画面から「固定ページ」をクリックして、「新規追加」でページを作るんじゃ!

固定ページ作成イメージ

 

トリ師匠
トリ師匠
下の図と説明を参考に必要事項を入力し、右側の「プレビュー」ボタンをクリックしてページを確認じゃ

作成イメージ

① ページ名入力
→ 「お問い合わせ」や「CONTACT」など任意のページ名を入力

② パーマリンク
→ contactに変更し「OK」。入力欄はページ名を入力すれば表示されます。

③ 本文
→ 例のように自由に文言を入力し、最後に上でコピーしたショートコードを貼り付ける。分からなければ、文章なしでショートコードを貼り付けるだけでもページは作成可能です。

 

出来上がりイメージ

トリ師匠
トリ師匠
プレビューで確認すると、こんなフォームが自動で作られるんじゃ。問題なければ編集画面へ戻ってページを公開や!

更新イメージ

トリ師匠
トリ師匠
公開欄の「更新」ボタンを押すとページが公開されるで! そっから上枠の「ページを表示」、もしくは「固定ページを表示」を押すと作成したページが表示されるわ。これで第三ポイント終了じゃ。

 

ポイント④ 問い合わせページの確認

出来上がりイメージ

トリ師匠
トリ師匠
最後は実際にメールが届くか確認するで! 必要な情報を入力し、「送信」ボタンを押してみるんじゃ。自分の設定したアドレスにメールが届けば作業完了じゃ!

設定を終えて…

ぐず夫
ぐず夫
今回はえらい簡単やったのう。
トリ師匠
トリ師匠
Contact Form 7はしっかり設定しよう思たら時間がかかるでの、今はこれで十分じゃ。詳細な説明はぐず夫がもうちょい分かるようになってからじゃの。
ぐず夫
ぐず夫
ふーん。まあええけど
トリ師匠
トリ師匠
ひとまず新規のプラグインはここまでじゃ。次はここまでの作業を一旦まとめるで!

ということで、Contact Form 7を使った簡単お問い合わせフォームの作成は完了です。

次回はこれまでのおさらいをするぞ。
お楽しみに!