BLOG for BEGINNERS CREATIVE SKILLS

初心者できた!ワードプレスブログ始め方Step8【カスタマイズ編3 お問い合わせフォーム作成】

初心者できた!ワードプレスブログ始め方Step8【カスタマイズ編3 お問い合わせフォーム作成】

こんにちは、

氷河期世代クリエイターのYOHEIです。

前回にひきつづき、

初心者できた!ワードプレスブログ始め方Step8【カスタマイズ編3 お問い合わせフォーム作成】です。

(全9回に分けて解説しています)

今回は、前回までの作成してきたサイトにお問い合わせフォームを設置します。

サイトを運営する上でお問い合わせ先は必ずといって必要になってきます。例えば、お問い合わせの有無に関わらず、前回作成したプライバシーポリシーにもお問い合わせ先が記載してあります。なのでやはり、お問い合わせ先が基本的に必要になってきます。その時にメールアドレスを直でリンクしても良いのですが、プライバシー的に不安に思う方もいると思います。

そこで今回は、自分のメールアドレスを非公開でお問い合わせ窓口を簡単に設置できるプラグインの「Contact Form 7」を紹介したいと思います。これを設置すれば、プライバシー面の不安も解消でき、サイトの信頼度もアップすると思いますので、ぜひ設置することをおすすめします!

では、

さっそく作成していきましょう(・o・)/

 

Step8 カスタマイズ編3もくじ

1. ワードプレスにお問い合わせフォームのプラグイン「Contact Form 7」をインストール

2. スパム防止のreCAPTCHAの設置

3. まとめ:WordPressのお問い合わせフォーム作成方法についておさらいしましょう!

 

1. ワードプレスにお問い合わせフォームのプラグイン「Contact Form 7」をインストール

Contact Form 7とは?

企業サイトのメールフォームや有名ブロガーにも使用されている、老舗のお問い合わせフォームプラグインです。なので、ネット検索でカスタマイズ方法等の情報が入手しやすいです。また、初心者でも簡単に設置できすぐ使用できます。

では、ワードプレス管理画面のプラグインからインストールしましょう。

 「プラグイン」→「新規追加」のキーワード検索で「Contact Form 7」と入力し「今すぐインストール」クリック。そして有効化します。

 

eyecatch_srgb_200427_step8_1

 

次に設定をしていきます。ワードプレス管理画面のメニューに「お問い合わせ」という項目が追加表示されているのでクリック。

最初からある「コンタクトフォーム1」もしくは「新規追加」をクリックし、お問い合わせフォームの設定画面にいきます。(この記事は新規追加で記載しています)

eyecatch_srgb_200427_step8_2

 

すると編集画面が表示されます。

まず、このフォームのタイトルを入力しましょう。(お問い合わせなど)

eyecatch_srgb_200427_step8_3_2

 

次に、すぐ下のタブ「フォーム」を見てみましょう。ここにはお問い合わせフォームに表示する項目が記述されています。

初期設定だと

●「お名前(必須)」

●「メールアドレス(必須)」

●「題名」

●「メッセージ本分」

が表示されるようになっています。その他を追加したい場合は、フォームの項目設定タグの中からクリックして追加します。基本的に当面は初期設定で問題ないと思います。

eyecatch_srgb_200427_step8_4_2

 

サイトでは、このように表示されます。

eyecatch_srgb_200427_step8_5

 

次に隣の「メール」タブをクリックします。

ここでは、フォームのお問い合わせ内容の送信先を設定します。

一番上の送信先に、お問い合わせ内容の送信先メールアドレスを入力します。(初期状態では、WordPressが利用するメールアドレスが入力されています。他の宛先へお問い合わせフォームの内容を送信したい場合は書き換えます)その他は初期設定でも問題ありません。初期設定は結構味気ない内容だったりしますので、ゆくゆは題名などカスタマイズしていくのも良いと思います。

 

eyecatch_srgb_200427_step8_6_2

 

「メール」タブのとなりの「メッセージ」タブの文章も同様です。

eyecatch_srgb_200427_step8_7_2

 

最後に「保存」をクリックして設定完了です。

するとショートコードが作成されます。

この文字列をコピーして新規の固定ページにペーストし作成します。

eyecatch_srgb_200427_step8_8

 

すると、それだけでお問い合わせフォームのページが作成できます。

eyecatch_srgb_200427_step8_9

 

あとは、前回のプライバシーポリシーページ同様、フッターにリンクナビを追加すれば設置完了です!

今回はシンプルなフォームとして設置していますが、お問い合わせフォームにプルダウンメニューを設置したり、自動返信メールの設定等のカスタマイズが可能です。検索で多くのカスタマイズ情報がすぐに見つかると思いますので、ゆくゆくは自分のサイトにマッチしたフォームにカスタマイズするのも良いと思います。

 

2. スパム防止のreCAPTCHAの設置

お問い合わせフォームを設置すると、当然スパムメームも送られてきます。

そこで、Googleが提供している無料のスパム防止システム「Google reCAPTCHA v3」を導入します。

reCAPTCHA v3はCookieなどから利用者がbotかどうかを判断してスパムを防いでくれます。

また、reCAPTCHA v3はGoogleのサービスなので、Googleアカウントが必要です。Gmail等のサービスを利用していれば、同じアカウントで利用できます。

 

導入手順です。

1. reCAPTCHA v3を利用するためにWordPressサイトを登録

2. サイトキーとシークレットキーを取得

3. WordPressにサイトキーとシークレットキーを設定

 

では、さっそく導入しましょう。Googleにログインし、My reCAPTCHAページにアクセスします。

https://www.google.com/recaptcha/intro/v3.html

画面右上の「Admin console」をクリック。

eyecatch_srgb_200427_step8_10

 

そうすると登録フォームが表示されます。

●ラベル:サイト名など入力

●reCAPTCHA タイプ:reCAPTCHA v3を選択

●ドメイン:https://以降のブログサイトドメインを入力

●reCAPTCHA 利用条件に同意する:reCAPTCHAの利用規約に同意するにチェックを入れる

●アラートをオーナーに送信する:アラートを送信してほしい場合はチェックを入れる

全て入力できたら最後に「送信」をクリック。

eyecatch_srgb_200427_step8_11

 

するとサイトキーとシークレットキーが発行されます。

これをWordPressで使用するので、コピーできるようにウィンドウを開いたままにしときます。

eyecatch_srgb_200427_step8_12

 

WordPress の管理画面に移動し「お問い合わせ」→「インテグレーション」ページを開きます。

eyecatch_srgb_200427_step8_13

 

先ほど取得したサイトキーとシークレットキーを登録します。そして「変更を保存」をクリック。

eyecatch_srgb_200427_step8_14

 

ブログサイトを表示して設定できているか確認してみましょう。設定できていると、ブラウザウィンドウの右下にreCAPTCHA v3のアイコンが表示されるようになります。マウスオーバーすると、「reCAPTCHA で保護されています。」と表示されます。

eyecatch_srgb_200427_step8_15

 

以上で、reCAPTCHA v3の設置は完了です。

お疲れさまでした!

 

3. まとめ:WordPressのお問い合わせフォーム作成方法についておさらいしましょう!

今回は、ワードプレスのお問い合わせフォーム作成方法について紹介させていただきました。

本記事の内容を要約しておきます。

まとめ

1. 「Contact Form 7」があると、自分のメールアドレスを非公開でお問い合わせ窓口を簡単に設置でき、サイトの信頼度もアップする!

2. 「reCAPTCHA v3」はCookieなどから利用者がbotかどうかを判断してスパムを防いでくれる便利なプラグイン!「Contact Form 7」と相性が良い。

次回は最終回!

アフィリエイト広告の設置に挑戦します。

ではでは。

(・o・)/

《人気関連記事》初心者できた!ワードプレスブログ始め方Step9【アフィリエイト始め方編】

《人気関連記事》初心者できた!ワードプレスブログ始め方Step1【すぐ開設!準備編】

-BLOG for BEGINNERS, CREATIVE, SKILLS