お問い合わせフォーム作成(+ロリポップメールの注意点) ― ホームページ作成記のようなもの《6》

きちんとしたホームページを作るにあたって必要なものといえばまずこれです。

目次

お問い合わせフォームを作ろう

WPFormsプラグインのインストール&有効化

1から作ると大変なので、プラグインを利用します。

ググるとすぐ出てきたのが「WPForms」というプラグイン。
とりあえずインストールして有効化

インストールすると、なぜか「WPForms Lite」になっていました。
おそらく無料版ということかな?
とりあえず機能には問題ないようです。

スパム対策にreCAPTCHAを導入

「私はロボットではありません」というアノgoogleサービスです。
目標としては、reCAPTCHAに登録して「サイトキー」「シークレットキー」を入手し、「WPForms」⇒設定にコピペすること。

これに関しては、googleアナリティクスのgoogleアカウントでログインして進めていけばサクサク行けます。
流れとしては

googleアナリティクスのgoogleアカウントでchromeにログインしておく。

reCAPTCHA ⇒ v3 Admin Console
ラベル:自サイトのアドレス
タイプ:v3
ドメイン:自サイトのドメイン
オーナー:ログインしていれば自分のgmailが表示されているはず
設定がおわったら下にある「送信」ボタン
これで問題なければ、2種類のキーが表示されるはずです。

③WPForms ⇒ 設定にキーをコピペして「設定を保存」

WPFormsでお問い合わせフォームを作成(reCAPTCHAを有効化)

WPForms(⇒すべてのフォーム)から、新規追加 ⇒ 簡単なお問い合わせフォームの「テンプレートを使用」

フィールドタブでreCAPTCHAをクリックすると、「このフォームで無効化になっています」というポップアップウィンドウが表示されますが

その後、右上にアイコンが出てれば有効化されています。
不穏なポップアップをみたくなければ「設定」⇒「スパム対策とセキュリティー」からgoogle v3 reCAPTCHAを有効化をONでもできます。

こちらからでも設定可能。

WPFormsでお問い合わせフォームを作成(通知設定の確認)

ここは基本的に確認するだけでOKですが、メール宛名を変更したければ「フォーム名」を設定しましょう
メール件名に関しても、好きに変更してもらってOK。

送信先メールアドレス/送信元メールアドレスに記載されている{admin_email}はwordpressの設定に記載してる「管理者メールアドレス」のことなので、基本的にはそのままで。

設定が終わったら忘れずに「保存」

ショートコードを固定ページに張り付ける

①WPForms⇒すべてのフォームのショートコードをコピー

②固定ページ⇒新規作成で文中にペースト(そのまま張り付けるだけ)


固定ページを「公開」にして、「外観」⇒「メニュー」に今回作成した固定ページを設定します。

簡素なお問い合わせページではありますが完成。
一度自分で使ってみて、きちんとメールが受け取れるかチェックしましょう。

実際に自分で使ってみよう(ロリポップメーラーはHTML文書が読めない)

これで基本的には終わりなのですが、「ロリポップ」のwebメーラーを使う場合は問題が発生します。

見出しの通り、ロリポップで受信すると、めちゃくちゃ読みづらいです…
これは、ロリポップのwebメーラーがHTML形式に対応していないのが原因
設定で変更できるかと思ったら、HTML形式はNGとのことで…

しょうがないのでフリーのメールアプリを使うのがよさそうです。
よくよく考えたら、毎回ロリポップのwebメーラーのページに行かずに済むのでこちらの方が便利、というかおそらくほとんどの方はそうしてるから問題にならないのですね。

Thunderbirdで受け取れるように設定したところ、問題なく見ることができました。
ちょっと古いバージョンですが、設定方法に関してはこの記事が参考になります。

受け取れました~まさかHTML形式のメールに対応していないとは…

ほんとうは、プライバシーポリシーの導入も記載しようかとおもったのですが、プライバシーポリシーはネットでひな型を調べて、自分のサイト用に文章をカスタマイズするだけなので割愛します。
この流れで作成して、ヘッダーメニューに記載しました。

実際の本サイトのプライバシーポリシーはこちらになります。

コメント

コメントする

目次