Cocoonにプラグインを入れてお問い合わせ欄を作る方法

当サイトのリンクには広告が含まれています

【ワードプレス開設2つ目】エックスサーバーキャンペーンでドメインを取得した後にやること2021で、
お問い合わせ欄をまた追加しますと書いていたのですが、
実はまだこのブログにもお問い合わせ欄を設置できてなかったので
付けました。これからは公開前に付けようと思います。

【ワードプレス開設2つ目】Xserverキャンペーンでドメインを取得した後にやること2021
エックスサーバーでテーマコクーンを使用しています💡 xサーバーに乗り換えた時の特典で、 ドメイン永久無料だったので、この度新しいブログを作りましたので できる限り手順を記録します。 私の場合、今の読んでいただいているこのブログは 無料ブログ...

結構やることが多かったですが、順番にやって行きました。
記録しておきますね♪

何か参考になれば嬉しいです(*^ ^*)

スポンサーリンク

お問い合わせ欄を追加する方法

全体の流れはこちらのサイトがとても分かりやすかったので
参考にさせて頂きました。
メールアドレスの所は調べながら試行錯誤しながらやりました💡

【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
Cocoon使用者向けにお問い合わせフォームの作り方を画像付きでやさしく解説します。Cocoonにはお問い合わせを作成する機能が備わっていないため、公式がおすすめするコンタクトフォーム7というプラグインを使用して簡単に作成します。30分も必...

紐付けのため色々とやることがありますね。

お問い合わせフォームのプラグインを入れて、
メールアドレスの設定に色々と手間取りました。

私は、XサーバーよりGmailに転送という形を取りました。
テーマCocoon(コクーン )で、お問い合わせ用の固定ページを作り、
外観から表示させて完成です。

ここから詳しく書きます。

プラグイン Contact Form7を入れて設定する

Contact Form7というプラグインを使用したので簡単でした。

Contact Form7というプラグイン追加方法

ワードプレス → プラグイン 新規追加 → 右上プラグインの検索でContact Form7
→ 今すぐインストール → 有効

その後、

WordPressのダッシュボードのお問い合わせ → コンタクトフォーム →
フォームのタブで、氏名など元からあるので、

その上に私は
「ご質問やご感想はこちらからご連絡ください。」と加えておきました。
お仕事のご依頼はこちらからお願いします。などでも良いと思います。

その右のタブのメールの所で、
[_site_title] <  あなたのメールアドレス > この最初から入っている
メールアドレスは違ったので、送信して欲しいメールアドレスに変更しました。

最初、gmailのアドレスにしておいたのですが、後でエラーになっていたので、gmailを直接入力する事を辞めて

xサーバーの方で、メールアドレスを作る事にしました。

(後で、エックスサーバーで作ったこのメールアドレスに届いたメールをgmailに転送する形を取ります)

Xサーバーメールアカウント追加

Xサーバーメールアカウント追加方法

Xサーバーのサーバーパネル → メールアカウント設定 → メールアカウントを追加タブを選択
→ メールアカウントとPWを設定し → 確認画面に進む → 追加する

こちらXサーバーのサイトを参考にさせて頂きました💡

メールアカウントの追加 | レンタルサーバーならエックスサーバー
レンタルサーバー「エックスサーバー」のご利用マニュアル|サーバーパネルからメールアカウント(メールアドレス)を追加するための手順を記載しています。

その後、XサーバーにGmail 設定方法があったので
この通りに試してみましたが、どうしてもエラーが出てしまうので

Gmail設定手順 | レンタルサーバーならエックスサーバー
レンタルサーバー「エックスサーバー」のご利用マニュアル|サーバーパネルで作成したメールアドレスを「Gmail」で使用するための設定手順について記載しています。

Xサーバーの先程作ったメールアドレスから私のgメールアドレスに転送という形を取りました。

<PR>
レンタルサーバー エックスサーバー

メールを転送

Xサーバーパネル → メールアカウント設定 → 転送先アドレスを追加

テストしてみたらきちんと私のメールに送られて来ました。
私は、携帯にパソコンのメールアドレスを追加しているので、
携帯電話でPCメールを受信できるので便利です。

WPダッシュボード→ お問い合わせ画面の上の方の
このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください:
この文字の下のショートコードをコピーして、次はお問い合わせ用の固定ページを作ります。

お問い合わせ用の固定ページを作る

Cocoonダッシュボード → 固定ページ → 新規追加 → タイトルに「お問い合わせ」(またはコンタクトなど)
入れて、空白の広いスペースに先程のショートコードを貼り付けます。

パーマリンクの編集でスラッグを変えます。例)contact

アドセンス広告を入れている人は除外するにチェックしましょう。

公開/

お問い合わせをヘッダーかフッターで表示させる

私は、フッターにしてみました。

ダッシュボード → 外観 → メニュー → 新しいメニューを作成しましょう → メニュー名 フッター
→ メニューを作成 → お問い合わせ → メニューに追加 → フッターメニューにチェック
→ メニューを保存

これで、フッターを確認して出ていたらOK。
その後、テストとして自分でお問い合わせメールしてみましょう。

無事届いたら完成です^^
紐付けが色々とありましたね。おつかれ様でした。

他にも、サイトポリシーや運営者情報など
必要なものを吟味してこれから付け足して行こうと思います。