ここでは、
・自分のブログやサイトにお問い合わせフォームを設置したい人
・『Contact Form 7』のインストールや設定方法を知りたい人
・お問い合せフォームを固定ページでつくる方法を知りたい人向けに、
プラグイン『Contact Form 7』のインストールや設定方法、固定ページでの「お問い合せフォーム」のつくりかたを解説いたします。
こちらはCocoonユーザ向けの記事となっております。
SEO対策で必須となっている一つに「お問い合せフォーム」があります。
SEO対策でなくてもブログやサイトを開設するときには、読者のために「お問い合せフォーム」を設置しましょうね。
記事のさいごに『Googleフォーム』の記事リンクもあります。
『Contact Form 7』のインストールと設定方法
さて、WordPressのテーマ「Cocoon」で、お問い合せフォームを設置するにはプラグインが必要とのことです。
ここでは、よく紹介されている『Contact Form 7』を使いたいと思います。
※実は「プラグイン」をインストールするのは初めてです。
インストール
ダッシュボードのある左メニューから、プラグイン>新規追加をクリックします。
なんやらずらっといろんなプラグインが表示されました。
「注目 人気 おすすめ お気に入り」の人気をクリックすると、一番目に「Contact Form7」がありました。
見当たらないときは検索しましょう。
今すぐインストール>有効化でインストール完了です。
左メニューにも「お問い合わせ」が表示されるようになりました。
設定方法
左メニューのお問い合わせ>新規追加をクリックすると、コンタクトフォームを追加画面になります。
ここにタイトルを入力と書いてあるところに「お問い合わせ」と入力し保存します。
すると「お問い合わせ」と入力したすぐ下に、
「このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください」
[ contact-form-7 id=”434″ title=”お問い合わせ” ]
※コードを表示するためにスペースをいれてあります。
と、表示されるのでこのコードをコピーしておきます。
投稿、固定ページ、またはテキストウィジェットにこのコードを貼り付けるわけですね。
「お問い合せフォーム」は、どうやら「固定ページ」というところでつくるみたいです。
※固定ページをつくったのも今回が初めてなのです。
サイドバーに設置してみた
サイドバーのテキストウィジェットに直接貼り付けたら簡単なのではないだろうか？
↓
試しにやってみました。
サイドバーのテキストウィジェットに
contact-form-7 id=”434″ title=”お問い合わせ”と貼ってみました。
失敗です、、
[ contact-form-7 id=”434″ title=”お問い合わせ” ]←カッコも必要です。
※コードを表示するためにスペースをいれてあります。
なんとお問い合わせフォームが表示されました！やったー
これでもいいのですが、サイドバーには新着記事やカテゴリーなどがあることを思えば邪魔になりますかね。
固定ページのつくりかた
では固定ページで「お問い合せフォーム」をつくりましょう。
左メニューの固定ページ>新規追加をクリックします。
あれ、いつもの投稿編集画面ですね。なにか特別なページだと思っていました、、
タイトル部分に「お問い合わせ」と入力します。
ブロックを追加>ショートコードで、先ほど作ったお問い合わせフォームのショートコードを貼り付けます。
あとはこのページのURLなどを設定して公開します。
広告は除外しておきましょう。
ところで、ブロックを追加のところの「ショートコード」の下に「Contact Form7」があるのを見つけました。
試しにクリックしてみる。
プレビューを見るとショートコードを入れたブロックとまったく同じお問い合わせフォームができていました。
「Contact Form7」で作ったものを1クリックでそのまま設置できるようです。
さらに発見！
ブロックを追加から追加しなくても、ショートコードをそのまま本文にコピペするだけで「お問い合せフォーム」が設置できました。
Cocoonは日々使いやすくアップデートされているのでしょうね。
「固定ページ」をつくったことで「固定ページ」の意味がわかりました。
Twitterの固定ツイートみたいなものかと思っていたのです。
固定ページをメニューとしてブログに設置する方法
さて次は、この作成した「お問い合わせフォーム」をブログに設置するのですが、とりあえずブログの一番下（フッターというのだそうです）に設置してみましょう。
左メニューの外観>メニューをクリックします。
そしてメニュー構造のメニュー名に「フッターメニュー」と入れ、メニューを作成ボタンを押します。※メニュー名は公開されません。
すると左側にあるメニュー項目を追加の部分が選択できるようになります。
※メニュー名を入れていったん保存するまではグレー表示になっています。
ここでは「お問い合わせ」にチェックを入れ、メニューに追加ボタンで右側のメニュー構造に追加しました。
メニュー設定で必要な項目にチェックを入れてメニューを保存ボタンを押します。
「プライバシーポリシー」も本当は固定ページにするのですね、、
ついでにライブドアブログ時代につくった「プライバシーポリシー」のページを「カスタムリンク」で追加してみます。
ブログにお問い合わせとプライバシーポリシーを設置できました。素晴らしい
お問い合せフォームのテスト送信
設置したお問い合わせフォームがきちんと機能するかどうか、テスト送信をします。
送信してみると、ちゃんとメールが届きました。
本文以外は記入必須項目なのですね。
こちらを参考にさせていただきました、ありがとうございます。
ライブドアブログのお問い合せフォームの記事はこちら、プライバシーポリシーのひな型はどのブログでも使えるのでありがたいです。
【初心者向け】プライバシーポリシーとお問い合わせフォームの設置
Googleのお問い合せフォームはこちら。
『Googleフォーム』でお問い合せフォームをつくってみた！
ads
ドメイン登録料金国内最安1円から「お名前.com」
運用サイト数220万件！月額990円から「エックスサーバー」
