ホームページやブログを作ったら、多くの場合、設置する『お問い合わせフォーム』。
Google Formsやformrun、formzuといったフォームシステムを提供している会社もありますが、利用料を無料で抑え、かつ、ホームページに埋め込んでデザイン的になじませたり、自由に項目を設定したり、余計な広告を表示させないことを考えると、ワードプレスのプラグインが選択肢にあがります。
ただ、たくさんあるプラグインの中から、どれを選ぶのか…が悩ましいですよね。今回は、ブロックエディター用のシンプルなフォームプラグイン『Snow Monkey Forms』をご紹介します。reCAPTCHAも設定することができ、安全性についても安心です。
Snow Monkey Formsの良いところ
ワードプレスのフォームプラグインというと、『Contact Form7』というプラグインが非常に有名です。多機能で信頼性も高く、ワードプレスのバージョン等にあわせたアップデートも行われていて、おすすめのプラグインです。
しかし、ここでは、下記の理由から『Snow Monkey Forms』をおすすめします。
- 設定画面がブロックエディターの画面風でわかりやすい。
- 確認画面を表示することができる。
- 送信後の完了画面が見やすい。
もう少し具体的にします。下図は各フォームの管理画面です。
Contact Form7
Snow Monkey Forms
ワードプレスのクラシックエディタを使っている・使っていた人なら、Contact Form7の画面も「なるほど」と思われるかもしれませんが、ブロックエディターに慣れている方は、Snow Monkey Formsの方がなじみやすいのではないでしょうか。
また、これは個々の好みにもなりますが、私はお問い合わせフォームを利用するときに、自分が入力した内容を確認してから送信したい派です。
Snow Monkey Formsは、管理画面で『確認画面を使用する』をオンにするだけで確認画面が設定できますが、Contact Form7はもともと確認画面機能がなく、確認画面を設定するには別のプラグインもいれなければいけません。
さらに、送信完了したときの表示が、Contact Form7は画面遷移がなく、送信ボタン下に「ありがとうございます。メッセージは送信されました」と表示されるだけで、ちゃんと送信できたかちょっとわかりにくいです。Snow Monkey Formsは、フォーム作成と同じようにブロックエディター風に完了画面が作成できる点もおすすめです。
まり子ワードプレスのフォームプラグインの比較で検索すると、Contact Form7以外でよく出てくるのが『MW WP Form』です。
私も以前はMW WP Formをおすすめしていましたが、このMW WP Formの作者さん（現在はMW WP Formの管理者は変更されています）がブロックエディター用のシンプルなフォームプラグインがほしいということで作ったのが『Snow Monkey Forms』なんですね。
なので、ダウンロード数は少ないですが、実績ある制作者さんなのもおすすめの理由です。
では、実際に設定方法を説明します。
プラグインをインストールする
「Snow Monkey Forms」をインストールします。「インストール済みプラグイン」に「Snow Monkey Forms」という表示がありましたら、インストール済みなので「Snow Monkey Formsの設定をする」へお進みください。
お問い合わせフォームを作ろう！
実際にお問い合わせフォームを作っていきます。
タイトルは、例えばお問い合わせフォームであれば、そのまま『お問い合わせフォーム』と入力で大丈夫です。項目は、『お名前』『Eメール』『メッセージ』の項目は初期設定で必須項目として入っています。この項目のみで良い場合、STEP3へお進みください。
追加する項目がある場合、追加する項目の箇所の「+」を押して追加します。例えば、Eメールとメッセージの間に『携帯電話』の項目を追加したい場合、下記の場所の「+」をクリックします。
『ラベル』等の項目が追加されるので、その横の『+』をさらにクリックし、表示されたメニューから『すべて表示』をクリックします。
すると、左側にブロック一覧が表示され、その中に『SNOW MONKEY FORMS』という項目があります。ここから必要な項目をクリックします。（ここでは携帯電話の項目を追加したいため、『Tel』をクリック）
するとこのように枠が入りました。
このままだと何の入力項目かわからないため、『ラベル』の箇所に『携帯電話番号』と入力します。
もし、携帯電話番号が入力必須の場合、右側のブロックメニューにある『バリデーション』のチェックを入れてください。もし、右側のブロックメニューが表示されていない場合、下図のピンクで囲ってあるボタンをクリックすると表示されます。
さらに、携帯電話番号とメッセージの間に『お問い合わせ種別』を追加してみたいと思います。
先ほどと同じように携帯電話番号とメッセージの間の『+』を押し、『ラベル』等の項目が追加されるので、その横の『+』をさらにクリックし、表示されたメニューから『すべて表示』をクリックします。
すると、左側にブロック一覧が表示され、その中に『SNOW MONKEY FORMS』という項目があります。ここから『セレクトボックス』をクリックします。
下図の点線で囲まれた部分のように項目が追加されるので、『ラベル』にまたわかりやすい名前（例えば『お問い合わせ種別』など）を入力します。
そして、プルダウンで表示される選択項目を設定します。『value1』と薄く表示されている項目をクリックし、右側に表示されたブロックメニューから『OPTIONS』の中身を修正します。（この項目も入力必須でしたら、『バリデーション』をチェックしてください）
入力形式は説明にあるとおり、『”value” : “lavel”』か『value』です。
例えば、『”選択1″ : “お問い合わせ”』と入力した場合、フォーム送信後に届くメールに記載されるのは『選択1』になります。『お問い合わせ』と入力した場合、フォーム送信後に届くメールに記載されるのは『お問い合わせ』になります。
私は後者の方がわかりやすいと思いますので、下図のように
お問い合わせ
無料相談
お申し込み
と入力しました（項目は例）。選択項目ごとに改行が必要です。
このように必要な項目を追加していきましょう。
フォーム設定画面をスクロールすると、下に送信完了画面の項目があります。初期設定で『完了しました』という一文が入力されています。このままでよければ、STEP4にお進みください。
完了画面の表示はお好みですが、私の場合は、このように設定しています。
- 『完了しました』を『送信しました』に修正。
- その下にリストブロックを使って、注意事項を明記。（『届くメールの送信元メールアドレスの提示』と『メールが届かなかった場合の対処方法』について）
- 『HOMEに戻る』ボタンを追加。
ブロックエディターの各項目が使って、お好みの表示になさってください。
ページ右上にある『フォーム設定を開く』ボタンをクリックします。
すると、右側にフォーム設定メニューが出てきます。最初に確認画面について設定しましょう。確認画面が不要な場合はスキップしてください。
『確認画面を使用する』をオンにすると、項目が増えますので、各ボタンに表示されるテキストを入力します。また、フォームスタイルはデザインが多少変わりますので、それぞれのスタイルに設定してみてお好みのデザインを選択してください。（私は『Letter』が見やすく、好きです）
さらにフォーム設定をスクロールすると、次に『管理者宛メール』項目が表示されます。
これは、フォームが送信された際に管理者（ホームページを運営している側）に届くメールです。なので、あまりメッセージ内容にこだわる必要はありません。下記の項目を設定しましょう。
- TO（メールアドレス）とFROM（メールアドレス）にご自身のメールアドレスを入力する。
- 『件名』にメールが届いたときにわかりやすいタイトルを付ける。
- 『送信者』はお好みですが、メールが届いたときの送信者のメールアドレス部分の表示が名前になっている方が良い場合、ご自身のお名前を入力します。
さらにフォーム設定をスクロールすると、次に『自動返信メール』項目が表示されます。
これは、フォームが送信された際にフォーム入力したお客様に届くメールです。なので、あまり『BODY』部分のメッセージ内容を丁寧にすることをお勧めします。下記の項目を設定しましょう。
- 『件名』にメールが届いたときにわかりやすいタイトルを付ける。
- BODYはご自身の文章のテイストに合わせて調整しましょう。例えば、私の場合、下記のように変更しています。
▼ サンプル ▼
{fullname}様
お申し込みいただきありがとうございます。
ディーイーエフ社 山田 花子です。
下記の内容で送信いたしました。
内容を確認の上、48時間以内にご返信いたします。
ご返信メールが届かない場合、恐れ入りますが、迷惑メールフォルダ等をご確認の上、” abc@def.com ”へお問い合わせください。
===
{all-fields}
===
◆————————————◆
ディーイーエフ社
代表 山田 花子
abc@def.com
https://def.com/
◆————————————◆
本メールはディーイーエフ社のお問い合わせ・申し込みフォーム（ https://def.com/form/ ）から送信されました。 - FROM（メールアドレス）にご自身のメールアドレスを入力する。
- 『送信者』はメールが届いたときの送信者のメールアドレス部分の表示になります。お客様にとっては、名前になっている方が安心する可能性があるため、ご自身のお名前を入力しましょう。
管理者宛メールや自動返信メール内に出てくる{fullname}といった{}で挟まれた表示は、フォームの入力項目を表します。確認場所は、フォームの各項目をクリックして表示されるブロックメニュー内の『name』になります。
デフォルトで設定されている名称がわかりにくい場合、自由に変更できますが、半角英数字で他の項目と被らない名称で設定してください。
なお、{all-fields}は、『入力項目すべて』という意味です。
すべての設定が終わりましたら、右上の『公開』ボタンを押します。
実際のお問い合わせページにフォームを設置します。ワードプレスの左側メニューから[固定ページ]-[新規追加]をクリックしてください。
新しい固定ページが作られますので、タイトルにフォーム名（ここでは『お問い合わせフォーム』）を入力し、本文に必要に応じてフォームの説明文を入力して、新規段落ですべてのブロックを表示させます。
左側に表示されたブロックの種類の『SNOW MONKEY FORMS』欄から『Snow Monkey Form』をクリックします。
すると、『フォームを選択してください』というプルダウンメニューが表示されるので、先ほど作成した『お問泡あせフォーム』を選択します。
すると、このようにフォームが挿入されます。正しいフォームが挿入されたことを確認して、ページを公開してください。（スラッグの設定はお好みですが、お問い合わせフォームの場合、『contact』や『form』が多いようです）
公開したページをブラウザで表示させて、実際にフォームに入力・送信して、ただしくメールが届くことを確認しましょう。
reCAPTCHAの設定もしよう！
reCAPTCHAというのは、フォームからのスパム攻撃やbot攻撃を防ぐGoogleの無料ツールです。簡単に設定できますので、ぜひ設定しておきましょう。
この画面は有料バージョンのエンタープライズ版の設定画面なので、無料版の設定画面に切り替えます。
まず、ラベルを入力します。ここは自分がわかるような名称を入れるだけで大丈夫です。（ここでは「お問い合わせフォーム用）にしました。
次に、reCAPTCHAタイプの選択です。これは「reCAPTCHA v3」にチェックを入れましょう。
続けて、ドメインを入力します。「https://」や最後の「/」を抜かしたドメインを入力し、エンターキーを押すと入力されます。ここでは、複数サイトの入力が可能です。
オーナー部分には、ログインしているアドレスが表示されています。
「reCAPTCHA利用条件に同意する」にチェックを入れましょう。
「アラートをオーナーに送信する」のチェックは自由ですが、何か問題があったときに通知された方がよいと思いますので、チェックを入れることをおすすめします。
最後に「送信」ボタンを押します。
サイトキーとシークレットキーが発行されます。これを『Snow Monkey Forms』に設定します。
WordPressにログインし、左側のメニューから「Snow Monkey Forms」内の「reCAPTCHA」をクリックします。
「Site Key」の項目にGoogleから発行されたサイトキーをコピーして貼り付け、「Secret Key」の項目にGoogleから発行されたシークレットキーをして貼り付け、「変更を保存」ボタンを押します。
フォームページ以外にもマークが表示されるため、デザインによっては邪魔に感じることもあると思います。その場合は、非表示にしましょう。
方法はGoogleの公式サイトにありますので、そのとおりに設定します。（公式サイトでの案内はこちら）
公式サイトの手順としては、まずreCAPTCHAを使用している旨の明記が必要とのことなので、お問い合わせフォームページを開き、最下部に「カスタムHTML」ブロックを追加し、下記をコピーして貼り付け、ページを更新します。
This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.- Googleの公式サイトには英語で書かれていますが、日本語に翻訳するとこのようになります。この表記でも問題ないと思います。
「このサイトは reCAPTCHA によって保護されており、Google プライバシーポリシーと利用規約が適用されます。」
実際のお問い合わせページを確認すると、最下部に赤枠の表示が追加されました。
次に、WordPress管理画面の左側のメニューから「外観」内の「カスタマイズ」をクリックします。
さらに「追加CSS」をクリックします。
入力可能な枠が表示されるので、そこに下記をコピーして貼り付け、右上の「公開」ボタンを押します。
.grecaptcha-badge { visibility: hidden; }ホームページをご覧になり、右下のreCAPTCHAマークが消えていることをご確認ください。なお、フォームページが複数ある場合は、すべてのフォームページにreCAPTCHAを使用している旨の明記を追記しましょう。
以上でフォームプラグイン『Snow Monkey Forms』の設定は完了です。お疲れさまでした！
