神風さんの呟きBlog

神風がその時々の新着情報について書いていくBlog

WordPress

WordPress設定 - 専用のコンタクトフォームを作成する。

2017/05/02

はい、神風です。

今回は私の様にコメントへの返信をしない(Spamかどうか判断が面倒臭いので敢えて返信しない人も含みます)人にも、とにかく自分のメールアドレスだけを晒して、変なメールとかSpamとかが送られてくるのが嫌だ!って人向けのものを実装しようと思います。

Contact Form 7

引用元:wordpress.org

こういう時にはwordpressは便利ですね。

ちょっとした事をしたい時に「こんな事とか出来ないかなぁ?」とか思いながらPlugInを検索すると結構あったりします。

という事で、今回はPlugInの「Contact Form 7」を導入していきます。

では、いつもの様に入れていきましょう。

プラグイン ⇒ 新規追加 ⇒ Boxに「Contact Form 7」と入力 ⇒ 「今すぐインストール」ボタンを押す。

はい、いつもの様に有効化を押します。

↓クリックで開きます↓

左メニュー「お問い合わせ」 ⇒ 「新規追加」をクリック

↓クリックで開きます↓

新しくコンタクトフォームの雛形を作っていきます。

今回はデフォルトのまま使います。

  • 名前
  • メールアドレス
  • 内容

この3つがあれば使用に問題がないからですね。

もし、別の用途や追加で入れたい項目があれば各自追加しましょう。

今回は管理人の私に対する「お問い合わせ」という事で、私に意見を言うフォームって事で。

お問い合わせ」という題名にしておきます。

次の設定にいきます。

メールタブ

↓クリックで開きます↓

  • 送信先 - お問い合わせメールを受け取るメールアドレスです。
  • 送信元 - お問い合わせメールを送るメールアドレス。

基本、デフォルトで使います。

上記2点だけ確認しておきましょう。

上記の2点が間違えていると、正常にお問い合わせが届きません!

一旦ここで保存をします。

下の「保存」ボタンを押します。

↓クリックで開きます↓

タイトルの下に青いBOXの中にコードが出て来ます。

このコードをページに入力すると、今設定したフォームを入れこむ事が出来ます。

お問い合わせページを作る

今回はお問い合わせページを固定ページで作っていきます。

当サイトの場合、テーマがStinger Plusというのを使っています。

このテーマだと、サイトのTOPページの画像と本文の間に固定ページが並ぶ仕様の様です。

丁度良いのでここに並べてしまいましょう。

左メニュー「固定ページ」 ⇒ 「新規追加」をクリック

↓クリックで開きます↓

こういう感じで色々と書いて、最後に先ほどのコードを入れておきます。

最後に問題がなければ公開しましょう。

この記事を書いている時はGoogleにインデックスを禁止していて、公開しても実害がないので公開しています。既にサイトを公開していて誰でも見る事が出来る場合で下記の工夫を実践したい場合は公開しないで下さい。その場合は保存をしましょう。

SpamやBotメールを防止する認証を導入する

はい。

上記まででコンタクトフォーム自体は出来上がりなんですが、このままだとSpamやBotが大量に迷惑メールを送って本来チェックするべきメールが埋もれてしまう可能性があります。

なので、人間だけがメール送信を出来る様に画像認証を入れます。

reCAPTCHAを使う

気付いた方居ますかね?

実は先程のコンタクトフォームを作成していたパージの真ん中辺りに「reCAPTCHA」というボタンがあったのを。

まぁ、今は別に確認する必要はないです。

兎に角、画像認証をページに実装するにはreCAPTCHAが必要で、これを使うにはGoogleアカウントが必要だと言う事です。

元がどこなのかは知りませんけど、現在はGoogleのサービスで出来る様です。

このサービスはGoogleのサービスなので、Googleアカウントを登録する必要があります。

何かと使えるのでサイト運営をするなら最低1つは取得しておくと便利ですよ。

https://www.google.com/recaptcha/admin

↓クリックで開きます↓

上記画面はGoogleアカウントを既に取得している上に既にログインが完了している状態で上のURLにアクセスした場合です。

項目を埋めましょう。

Label

任意の文字を入力。自分が分かりやすい名前を付けましょう。

Choose the type of reCAPTCHA

良く分からないと思います。私も良く分かりませんでした。調べましたので詳しく書きます。

reCHAPTCHA V2」と「Invisible reCHAPTCHA」の2つのチェックがあります。

これはどちらかを選ぶって事らしいですよ。

つまりこういう事です。

reCHAPTCHA V2

こちらを選ぶと見覚えのある窓の中にチェックする所が出て来ます。

その後に類似画像を選んだり、色々とあるみたいです。

Invisible reCHAPTCHA

こちらにはチェックする所が無い様ですね。

その後に色々あるのかは知らない。だってやってないし!

気になる人は使ってみればいいよ。

私の今回のケースでは上記を選びます。

Domains

上の選択チェックを選ぶと出て来ます。

自分が使いたいサイトのドメインを入力します。

Accept the reCAPTCHA Terms of Service.

利用規約に同意するかどうかのチェックです。

読んでチェックをします。

全ての入力が終わったら、下のRegisterボタンを押します。

↓クリックで開きます↓

登録完了しました。

モザイク掛かってますが、ここにあるSite keySecret keyは後で使いますので保存しておいて下さい。

WordPress管理画面に戻ります。

左メニュー「お問い合わせ」 ⇒ 「インテグレーション」をクリック

↓クリックで開きます↓

キーを設定する」ボタンを押します。

↓クリックで開きます↓

  • サイトキー - 先程メモしたreCHAPTCHAのSite keyを入力。
  • シークレットキー - 先程メモしたreCHAPTCHAのSecret keyを入力。

入力が終わったら下の「保存」ボタンを押します。

↓クリックで開きます↓

これでフォームでreCHAPTCHAを使う準備が整いました。

次は実際にフォームで使える様に設定していきましょう。

左メニュー「お問い合わせ」 ⇒ 「コンタクトフォーム」をクリック

先程自分で作ったフォームを編集します。私の場合は「お問い合わせ」ですね。

まず、reCHAPTCHAを設置する場所にカーソルを合わせます。

先にこれをしないと送信ボタンの後ろに設置されて変な見た目になってしまいますよ!

私は送信ボタンの直前に設置、その後に改行を入れて気持ち見た目を考えました。

真ん中位にある「reCHAPTCHA」のボタンを押します。

↓クリックで開きます↓

テーマやサイズを指定します。

私はデフォルトでそのままにしています。

設定が終わったら「タグを挿入」ボタンを押します。

↓クリックで開きます↓

こんな感じになりました。

最後に全ての設定が終わったら下にある保存ボタンを必ず押しましょう。

↓クリックで開きます↓

お疲れ様でした。

-WordPress
-, , ,