こんにちは、阿木人です。
WordPressテーマのCocoon利用時の、お問い合わせフォームの貼り方です。
※Cocoonじゃなくても出来ます。
お問い合わせフォームの設置はサイト・ブログ運営で必須レベルですが、実はCocoonにはお問い合わせフォームの作成機能が無い様です。
それを解決するのが、お問い合わせフォームのプラグイン「Contact Form 7」です。
この記事では特に初心者の方向けとして画像を入れつつ、なるべく分かり易く説明してみたいと思います。
お問い合わせフォームって何？
この記事を見ている方は既にお問い合わせフォームって何？という疑問は無いと思いますが、簡単に説明すると、下の画像の様なものです。
色んなサイト・ブログの一番上や一番下のあたりに「お問い合わせ」というメニューがあって、そこをクリックすると表示されるフォームですね。
ここに名前やアドレス、お問い合わせ内容などを入力して送信すれば、サイト運営者にお問い合わせとして連絡が行く、という寸法です。
これが無いと、あなたのサイトを見てコンタクトを取ろうとする方がいても連絡手段がありませんので、設置しておきましょう。
※コンタクトは別途コメント欄を付けていれば可能ですが、きちんとした連絡としてはやはりお問い合わせフォームからかと思います。実際、本ブログのとある記事を以前他社様運営のサイトに掲載してもらった事がありましたが、その時もやはりお問い合わせフォームからのコンタクトでした。
Cocoon(コクーン)でお問い合わせフォームを設置する流れ
最初にお問い合わせフォームを設置する全体の流れですが、
- プラグイン「Contact Form 7」のインストールと有効化
- Contact Form 7の設定
- お問い合わせフォームの固定ページを作成
- お問い合わせフォームをメニューに追加
- 設置出来たか確認
こんな流れでやっていきます。
では次から実際に説明していきます。
お問い合わせフォームのプラグイン「Contact Form 7」のインストールと有効化
まずはお問い合わせフォームのプラグイン「Contact Form 7」のインストールと有効化が必要です。
- ワードプレスの管理メニューから「プラグイン」→「新規作成」を選択。
- 表示された画面の右上の検索窓に「Contact Form 7」と入力
- 検索結果にContact Form 7のプラグインが表示されるので「今すぐインストール」をクリック
インストールが終わると、「今すぐインストール」と表示されていた所が「有効化」の表示に代わるので「有効化」をクリックします。
Contact Form 7の設定
次にContact Form 7の設定です。
ワードプレスの管理メニューから「お問い合わせ」→「コンタクトフォーム」をクリック。
右側に「コンタクトフォーム1」というのが表示されるので、「編集」をクリック。
コンタクトフォームの編集という画面になるので、
「コンタクトフォーム1」と表示されている箇所を任意の文字に変更します(私は「お問い合わせ」と入力しました)。
「メール」タブを選択し、送信先を確認します。
※ここに入力されているアドレス宛にお問い合わせ内容が送信されますので、自分が利用しているアドレス(内容を送信して欲しいアドレス)を入力します。
上記、コンタクトフォーム名と送信先を設定出来たら画面右側の「保存」をクリック。
するとショートコード(赤枠で囲った所です)が生成されます。
後でこのコードを貼り付けるのでコピーしておきます。
これでプラグイン側の設定は終わりです。
次からはお問い合わせフォームを作成・設置していきます。
お問い合わせフォームの固定ページを作成
全体の流れを再確認しますと、今は丁度半分あたりです。
イマココ↓
- プラグイン「Contact Form 7」のインストールと有効化
- Contact Form 7の設定
- お問い合わせフォームの固定ページを作成
- お問い合わせフォームをメニューに追加
- 設置出来たか確認
では、再び実際のやり方の解説です。
ワードプレスの管理メニューから「固定ページ」→「新規追加」を選択。
「タイトルを追加」と表示されている箇所に「お問い合わせ」と入力。
「ブロックの追加」を選択。※表示されない場合は、マウスカーソルを合わせると表示されると思います。
追加可能な色々なブロックが表示されるので、「ウィジェット」内の「ショートコード」を選択。
追加したショートコードの所に、プラグインの設定の最後でコピーしておいたコードを貼り付けます。
右端のメニューの「文書」タブを選択して、URLスラッグを「contact」等に設定しておきます。
アドセンス利用者は「広告を除外する」もチェックを入れましょう。
そして最後に右上の「公開」をクリック。(説明画像では「更新」になっていますが、最初は「公開」のはず)
これでお問い合わせフォームのページは出来たので、次はサイトへの設置です。
お問い合わせフォームをメニューに追加
ワードプレスの管理メニューから「外観」→「メニュー」を選択。
メニュー構造の「メニュー名」の所に、自分で分かり易い名前を入力します。
※ここに入力する名前は自分が管理する上で使用するもので、他人からは見えません。
メニュー名を入力したら、「メニューを作成」をクリック。
メニュー項目を追加の「固定ページ」を選択して、「お問い合わせ」にチェック。
「メニューに追加」をクリック。
メニュー構造の所のメニュー設定で「フッターメニュー」をチェック。
※これは自分がお問い合わせフォームをサイトのどの位置に表示させたいかの選択です。今回はフッター(サイトの一番下の所)に表示させる例なので、「フッターメニュー」を選択しています。
「メニューを保存」をクリック。
これでお問い合わせフォームの設置が出来ました。
お問い合わせフォームが設置出来たか確認
最後にきちんと設置出来ているかと、実際にお問い合わせフォームが動作するかをチェックします。
今回の例ですと、フッターメニュー（サイトの一番下のあたり）にお問い合わせフォームへのリンクを設定した事になっているので、自分のサイトを開いて一番下のあたりを見てみましょう。
以下の様に、フッターメニューの所に「お問い合わせ」へのリンクがある筈です。
動作確認の為、実際に自分で「お問い合わせ」をクリックしてみます。
リンク先として、お問い合わせフォームが表示されます。
あとは名前やアドレス、件名、本文を入力してみて送信します。
送信してみたら、今回設定してあるお問い合わせ内容が送信される先のアドレスを確認して終わりです。
※1～2分だと届かない事もあるので、数分～10数分程度待ってみましょう。
以上がプラグイン「Contact Form 7」を使ったお問い合わせフォームの貼り方です。
ブログ・サイト運営をしていてきちんとした連絡を受け取る為には必須なので、是非覚えましょう。
