WordPressにお問い合わせフォームを設置する

WordPress

WordPressにお問合せフォームを設置したので、その手順をメモしておきます。

Contact Form 7 のインストール

まずWordPressにログインし、左のメニューから「プラグイン」→「新規追加」を選びます。
検索欄に「Contact Form 7」と入力すると、一番左上に「Contact Form 7」が現れるのでインストールした後、有効化します。

お問い合わせフォームの設定

左のメニューに「お問い合わせ」が追加されているはずなので「お問い合わせ」→「コンタクトフォーム1」をクリックして設定画面を開きます。

ここでは初期設定のまま設置したいと思います。

保存をクリックしたら、ショートコードをコピーします。

後は「固定ページ」→「新規追加」をクリックし、先程のショートコードをコピペします。

reCAPTCHA の設定

reCAPTCHA とは

reCAPTCHAとは、ボット (bot) による攻撃を防ぐためにGoogleが提供しているサービスです。何も対策をしないと、ボット (bot) によるスパムなどが問題になるので reCAPTCHA を設定することを強くおすすめします。

reCAPTCHA のサイトキーとシークレットキーを取得する

まず、以下のサイトにGoogleアカウントでログインします。Googleアカウントをお持ちでない場合は、新しくアカウントを作ってください。

Sign in - Google Accounts


ラベル: 自分が分かりやすい名前で大丈夫です
reCAPTCHA タイプ: reCAPTCHA v3
ドメイン: reCAPTCHAを利用するドメイン (ご自身のサイトのドメインを入力してください)

reCAPTCHA 利用条件に同意する」と「アラートをオーナーに送信する」にチェックを入れ「送信」をクリックします。

reCAPTCHA タイプは、Contact Form 7 のバージョンが5.1以降であれば reCAPTCHA v3、それ以前であれば reCAPTCHA v2 を選択するんですが、新規インストールした Contact Form 7はバージョン5.1以降なので reCAPTCHA v3 を選んでください。

自分は最初何も知らずに reCAPTCHA v2 を選んでしまい、フォームが上手く機能せず、結局 reCAPTCHA v3 で登録し直すことになりました…。

reCAPTCHA API の現在の最新バージョンは v3 です。バージョン 5.1 以降の Contact Form 7 はこの reCAPTCHA v3 API を使用します。

注意: reCAPTCHA v3 と v2 の API キーはそれぞれ別のものです。v2 のキーは v3 の API では機能しません。再度サイトを登録して v3 のキーを新規に入手しましょう。

https://contactform7.com/ja/recaptcha/


サイトキー」と「シークレットキー」をメモ帳などにコピペしてメモしておきます。

WordPressで reCAPTCHA を設定する

WordPressにログインし「お問い合わせ」→「インテグレーション」を選択し
一番下の reCAPTCHA の「インテグレーションのセットアップ」をクリックします。

先程メモしておいた「サイトキー」と「シークレットキー」を入力し「変更を保存」をクリックします。

ヘッダーのメニューに「お問い合わせ」を追加

最後に「外観」→「メニュー」に移動します。次に「サビゲーション(ヘッダーメニュー)」を選択し、固定ページボックス内にある「お問い合わせ」にチェックを入れメニューに追加します。

メニューを保存」をクリックし設定を保存し、最後に「固定ページ」→「固定ページ一覧」→「お問い合わせ」をクリックし、編集画面に入りお問い合わせページを公開します。

お問い合わせフォームからメールが届くか確認する

お問い合わせフォームからメールがちゃんと送信されて、自分のメールアドレスに届くか確認するためにテストメールを送ります。氏名、メールアドレス、題名、メッセージ本文はすべて適当で構いません。



無事にテストメールが届いたら成功です。お疲れ様でした。

参考にさせていただいたサイト様

WordPressのお問い合わせフォームを10分で作る方法【Contact Form 7】
こんな疑問にお答えします。 本記事の内容 ・お問い合わせを設置すべき理由・お問い合わせフォームの作り ...
reCAPTCHA v2 と v3 の違い - Qiita
この記事では reCAPTCHA v2 と v3 の違いについて説明します。reCAPTCHA v2 には、Invisible、Checkbox、Android の3種類があります。この記事では …
Just a moment...


コメント