【クリニックホームページ作成】お問い合わせ＋reCAPTCHAの設定

お問合せは、HPをもっているほとんどのクリニックで作成しているのではないでしょうか？

wordpressには、コメントという機能はありますが、いまひとつなのでお問い合わせはプラグインに頼ったほうが120億倍楽チンです。

また、お問合せを設置すると気になるのが、botによる荒らし（ロボットによる連続投稿など）です。

その予防のため、reCAPTCHAの設置をお勧めします。

wordpressのデフォルトでは投稿は一種類しかなく、ここを「お知らせ」として機能させようと思います。（実は増やせるのですが、難しくなるのでここでは話しません）

前回までの記事

2021年12月13日【制作過程公開】クリニック向けホームページデモサイト！！プラグイン・テーマについて

2021年12月16日【クリニックホームページ作成】top画面の表示と「お知らせ」の設置

お問合せは設置しといて反応なしが、最悪ですから普段からよくみるメールアドレスに届くように設定することをお勧めします。

お問い合わせの設置

これも、かなり有名なプラグインですが「Contact Form 7」が圧倒的にお勧めです。

このプラグインは、日本人の方が作成されていますので日本語対応もバッチリです。

他にも、

reCAPTCHAの設定にも対応
フォームの内容・項目の設定も簡単
フォーム送信後の自動メール返信機能も充実
フォーム送信時にコメントを発生させることも可能
フォーム送信があったことを知らせるメールも設定可能

など、かなり機能が充実しています。

設定方法もかなり簡単

プラグインをインストール＋有効化
wordpress編集画面に「お問合せ」ができるので、そこから「新規追加」を選択して設定していく
「フォーム」タブを押して、必要なパーツを設置して、必須のところには「＊」をいれる
「メール」タブを押して、ユーザーがお問合せを送信した後に、自動でユーザーに送信されるメールの本文を設定する
「メッセージ」タブを押して、フォームを送信した際などに　HP上に表示されるコメントを編集
完成したら、ショートコードをコピーして、ブロックコンテンツから「ショートコード」を選択してペーストすると設置完了

です。

こだわりがない人は「メール」タブと「メッセージ」タブはいじらなくてもいいと思います。

reCAPTCHAの設定

こちらは、Google側と、wordpress側両方の設定が必要です。

google recaptchaを使用するサイトを登録する必要があります。こちらから行いましょう。

ラベルは自由に設定（後から自分がなんのサイトかわかるようにするためだけ）
おすすめはV3
ドメインは、サイトのメインドメインでいいと思います。（私のデモサイトならorthopaedic-surg.net）

これが終わると「サイトキー」と「シークレットキー」が発行されます。

これをコピーして、wordpressの編集画面に戻ります。

お問い合わせ>インテグレーション>reCAPTCHACAPTCHAインテグレーション設定、と進み、先ほどコピーした２つのキーをペーストして設定します。

reCAPTCHA v3の問題点

v３は、設置するとサイトにロゴマークが表示されてしまいます。

これは、デスクトップでの表示ではそれほど問題になりませんが、モバイルになるとただでさえ表示画面が小さいのに、ロゴが付いてきて非常に邪魔です。

そこで、公式が出しているロゴマークを非表示にする設定を追加します。

動画は、ややもたもたしていてすいません。

参考にしているURLはこちらです。

このサイトにもありますが、

.grecaptcha-badge { visibility: hidden; }

をwordpressの編集画面、外観＞テーマエディター＞style.cssに追加します。

ちょっと、テーマエディタの編集は、注意喚起画面が多くて怖いという人は、SANGOの場合は、カスタマイズの中にも「追加CSS」というのがありますので、そちらに追記されても同じ結果になります。

＊テーマエディタ含めた編集は自己責任でお願いします。

動画でもしていますが、キャッシュを削除して、ロゴが消えることを確認してください。

次は、いよいよ、予約フォームについてです。