こんにちは、ハッシーです。
このブログは「WordPress」を使用しており、テーマは「Cocoon」になります。
ブログ初心者の僕にとってはどのテーマがいいかもわからず、いろいろ調べた結果、多くの人におすすめされており、しかも無料で使用できる「Cocoon」を使用することにしました。
実際に使ってみると大変使いやすいのですが、「お問い合わせフォーム」がないですね。
「お問い合わせフォーム」がないと、「Google AdSense」や「Amazonアソシエイト」に受かりにくいという噂も聞きますし、ブログを見てくれた方からコンタクトすることもできません。
(ちなみにこのブログはお問い合わせフォームがない状態でGoogle AdSenseに合格できました。)
そこでこのブログでは、初心者でも簡単にできる「お問い合わせフォーム」の設置方法をご紹介致します。
お問い合わせフォームを設置するまでの流れ
以下の順序で進めていきます。
・プラグイン「Contact Form 7」の設定
・お問い合わせフォーム用の固定ページを作成
・お問い合わせフォームからメッセージを送って確認
・設置箇所を決める
プラグイン「Contact Form 7」のインストール
まず、「Contact Form 7」のプラグインをインストールします。
![](https://hasshiblog.com/wp-content/uploads/2020/03/プラグイン新規追加-1024x433.png)
「プラグイン」から「新規追加」をクリック。
![](https://hasshiblog.com/wp-content/uploads/2020/03/Contact-Form-7.png)
キーワードに「Contact Form 7」と入力。
「Contact Form 7」 が表示される(青の囲み枠)ので、「今すぐインストール」をクリック。
![](https://hasshiblog.com/wp-content/uploads/2020/03/Contact-Form-7-有効化.png)
インストールが終わると「有効化」と表示されるので、「有効化」をクリック。
プラグイン「Contact Form 7」の設定
次に、プラグイン「Contact Form 7」の設定 を行っていきます。
![](https://hasshiblog.com/wp-content/uploads/2020/03/お問い合わせ新規追加-1024x441.png)
「お問い合わせ」から「新規作成」をクリック。
![](https://hasshiblog.com/wp-content/uploads/2020/03/コンタクトフォーム-1024x509.png)
「コンタクトフォームを追加」の欄に名前を決めて入力します。
名前は、「お問い合わせ」や「お問い合わせフォーム」のようにわかりやすい方がいいと思います。
フォームは触らなくてOKです。
名前を入力したら、下の方にある「保存」をクリック。
(この画像では下の方に隠れてしまっています)
![](https://hasshiblog.com/wp-content/uploads/2020/03/ショートコード-1024x541.png)
ショートコード(赤で囲った部分)をコピーする。
お問い合わせフォーム用の固定ページを作成
次に、「お問い合わせフォーム」用の固定ページを作成していきます。
![](https://hasshiblog.com/wp-content/uploads/2020/03/固定ページ新規追加-1024x437.png)
「固定ページ」から「新規追加」をクリック。
![](https://hasshiblog.com/wp-content/uploads/2020/03/固定ページ お問い合わせ-1024x440.png)
タイトルを入力。
「お問い合わせ」または「お問い合わせフォーム」でいいと思います。
本文に先ほどコピーしたショートコードを貼り付けます。
貼り付けるだけで何もする必要はありません。
あとパーマリンクの設定もしておいた方がいいかもしれません。
「contract-form」などでいいと思います。
「公開」をクリックします。
これで「お問い合わせフォーム」の固定ページが完成です。
お問い合わせフォームからメッセージを送って確認
固定ページを作成したら、「プレビュー」をクリックします。
そうすると以下のように「お問い合わせフォーム」が表示される。
![](https://hasshiblog.com/wp-content/uploads/2020/03/お問い合わせフォーム.png)
実際に入力してメッセージを送ってみましょう。
必要事項を入力し、「送信」をクリック。
メールが届いていることが確認できれば成功です。
設置箇所を決める
あとは、「お問い合わせフォーム」の設置箇所を決めれば完了です。
僕はここで苦戦してしまいましたが、今から説明する通りにすればできると思います。
![](https://hasshiblog.com/wp-content/uploads/2020/03/外観 メニュー-1-1024x441.png)
「外観」から「メニュー」をクリック。
![](https://hasshiblog.com/wp-content/uploads/2020/03/メニュー構造-1024x440.png)
「メニュー名」に「ヘッダー」または「フッター」と入力し、「メニュー作成」をクリック。
(自分がわかれば名前は何でもいいと思います。)
メニュー設定が表示されます。
![](https://hasshiblog.com/wp-content/uploads/2020/03/メニュー項目を追加-1024x451.png)
先ほど作成した固定ページにチェック。
「メニューに追加」をクリックすると、下画像のようにメニュー構造の中に、「お問い合わせフォームの固定ページ」が表示されます。
![](https://hasshiblog.com/wp-content/uploads/2020/03/メニュー設置位置-1-1024x557.png)
「お問い合わせフォーム」を設置したい箇所にチェックを入れます。
(自分の好みに合わせて設置箇所を決めてください)
「メニューを保存」をクリックすると、ブログに「お問い合わせフォーム」が設置されています。
![](https://hasshiblog.com/wp-content/uploads/2020/03/お問い合わせフォーム設置完了-1.png)
これで「お問い合わせフォーム」の設置完了です。
僕はフッターに設置してみました。
以上が、Cocoonに「お問い合わせフォーム」を設置する方法となりますが、きちんと設置することはできましたでしょうか?
参考になれば幸いです。
コメント