今回は無料プラグインSnow Monkey Formsを使ってお問い合わせフォームを作成する方法を解説します。
Snow Monkey Formsを使えばブロックエディター上でお好みデザインのフォームを簡単に作ることができるので、初心者にも扱いやすくおすすめです。
また、Snow Monkey Formsは人気有料テーマ「Snow Monkey」でシンプルなフォームを作りたい方は検討してみてください。
◾️動画解説版
- 問い合わせフォーム作成基本編 00:50
- フォームデザイン調整 03:32
- メール送信調整 07:20
- フォーム部品追加(テキスト・TEL・ラジオボタン・チェックボックス) 16:32
- 問い合わせ完了画面調整 27:22
- スパム対策(Google recaptcha設定) 29:00
- まとめ 31:58
本記事は、Snow Monkey Forms 6.0.5、Snow Monkey 25.2.6、WordPress6.4.1の環境での画面・操作になります。ご利用の環境によって操作画面など異なる場合がありますのでご了承ください。
Snow Monkey Formsをインストールする方法
Snow Monkey FormsはWordPressの公式ディレクトリに登録されている無料プラグインのため、WordPressの管理画面からインストールができます。
「プラグイン＞新規プラグインを追加」をクリックします。
検索窓で「Snow Monkey Forms」と入力し、出てきた以下のプラグインを今すぐインストールします。
「有効化」をクリックします。
これでSnow Monkey Formsがインストール・有効化されました。左サイドバーを見ると新たに「Snow Monkey Forms」という項目が追加されているのが確認できます。
Snow Monkey Formsを使ってシンプルなフォームを作る方法
「名前」「メールアドレス」「お問い合わせ」のみのシンプルなフォームは以下の手順で作成できます。
◾️Snow Monkey Formsを使ってシンプルなフォームを作る方法
- STEP. 1：フォームを新規追加する
- STEP. 2：フォームを表示させたいページでブロックを追加する
STEP. 1：フォームを新規追加する
まずはフォームを新規追加しましょう。
「Snow Monkey Forms＞新規投稿を追加」をクリックします。
そうすると、お問い合わせフォーム作成のエディター画面が表示されます。
ここではタイトルに「お問い合わせフォーム1」（タイトルは任意のものでOK）を入力し「フォーム設定を開く」をクリックします。
そうするとブロックタブの中に管理者宛メールの設定項目があるので、こちらにフォームが送信された際に通知メールを受け取りたいメールアドレスを入力します。
画面右上の「公開」をクリックします。
「公開してもよいですか？」と確認画面が表示されるので、「公開」をクリックします。
これでフォームの新規追加ができました。
STEP. 2：フォームを表示させたいページでブロックを追加する
フォームの新規追加ができたらフォームを表示させたいページでSnow Monkey Formのブロックを追加します。
今回は「固定ページ＞新規固定ページを追加」からお問い合わせ用のページを作成しておいたので、こちらにフォームを表示させてみます。
「+（ブロックを追加）」をクリックします。
検索窓で「Snow Monkey Form」と検索し、出てきたこちらのブロックを追加します。
そうすると「フォームを選択してください」と記載の画面が表示されるので、プルダウンメニューから先ほど作成したフォームを選択し、「公開（すでに公開中の場合は「更新」）」をクリックします。
固定ページを開きます。以下のようなフォームが表示されているので試しに問い合わせしてみてください。
なお、実際にフォームが送信されるとデフォルトでは管理者とフォームを入力したユーザー宛に、それぞれ以下のような通知メールが届くようになっています。
◾️管理者宛に届く通知メール
◾️フォーム入力ユーザーに届く通知メール
これだとメールタイトルや本文が機械的で不親切な印象なので、詳しい変更方法は「メール送信の設定方法」箇所で解説します。
フォームデザインの変更方法
Snow Monkey Formsで作ったフォームはフォームスタイルを変更したり、フォーム送信前に確認画面を表示させたりといった設定ができます。
「Snow Monkey Forms＞Snow Monkey Forms」をクリックし、フォームデザインを編集したいフォームの上で「編集」とすることで、再度フォームの編集画面を開いておきましょう。
フォームの編集画面が開いたら「フォーム設定を開く」をクリックし、右サイドバー上にフォームの設定項目を表示させておきます。
フォームスタイルの変更
Snow Monkey Formsで追加したフォームはデフォルトでは、かなりシンプルな見た目となっています。
このフォームデザインを変更したい場合は、「フォームスタイル」項目の下にあるプルダウンメニューを変更します。
下記はフォームを変更した例です。ここでは「ビジネス」を選択しておきます。
確認画面の表示・非表示切り替え
「確認画面を使用する」にチェックを入れると、フォームが送信される前に確認画面が表示されるようになります。
実際にフォームを追加している固定ページを見てみると、確認画面が表示されていることがわかります。
また、「プログレストラッカーを使用する」にチェックを入れると、フォーム送信プロセスにおいて今自分がどこにいるのかが確認できるトラッカーが表示されるようになります。
◾️実際に表示されるプログレストラッカー
必要に応じて表示・非表示を切り替えると良いでしょう。
フォーム送信完了画面のテキスト・装飾変更
デフォルトではフォームが送信されると、完了画面として「完了しました。」と簡単なテキストが表示されるだけになっています。
このテキスト・装飾を変更したい場合は、お問い合わせフォーム入力画面を下にスクロールしたところにある完了画面の中身を編集してあげましょう。
完了画面の中には通常のブロックが使用できるので、見出しやテキスト、画像などを追加して自分好みにカスタマイズが可能です。
メール送信の設定方法
Snow Monkey Formsではフォームが送信されるとサイト管理者とフォームを入力したユーザー宛に自動返信メールが送信されます。
以下では「管理者宛への通知メール」「ユーザーへの自動返信メール」の設定変更方法を詳しく解説します。
管理者への通知メールの設定
管理者への通知メールの設定は、フォーム設定の「管理者宛メール」項目より設定ができます。
設定できる項目の意味やおすすめの設定は以下の表の通りです。
| 項目 | 意味 | ||
|---|---|---|---|
| To（メールアドレス） | 通知を受け取りたいメールアドレスを指定します。
|
||
| 件名 | 管理者宛に届くメールの件名を指定します。
デフォルトでは「管理者通知」とのみ記載されていますが、これだと分かりづらいので「ホームページからお問い合わせがありました。」のように修正してあげるのがおすすめです。
|
||
| BODY | 管理者宛に届くメール本文を指定します。
デフォルトでは、{all-fields}というメールタグ（※1）が記載されていますが、これだと入力されたすべての値がただ表示されるだけになっています。 そこで、メールの本文を自分好みにカスタマイズするには入力された値を別個に取り出せるメールタグを使って以下のように記載します。
メールタグについては以下の「Snow Monkey Formsのメールタグについて」にて詳しく解説します。 |
||
| REPLY-TO（メールアドレス） | 届いた通知メールに対し返信ボタンを押すと、返信先として設定したメールアドレスがセットされます。
基本は空欄で問題ありません。
|
||
| From（メールアドレス） | 通知メールの送信元となるメールアドレスを指定できます。
何も設定していない場合は「wordpress@ドメイン名」というメールアドレスからメールが届きます。 必要に応じて「info@ドメイン名やcontact@ドメイン名」などよくある名前に変更しましょう。必要に応じてレンタルサーバー側でもそのメールアドレスを発行しておきましょう。
(※)なお、送信元は「xxx@サイトドメイン名」にしておきます。webst8.netにWordPressをインストールしている場合は、xxx@webst8.netなどになります。 |
||
| 送信者 | 通知メールの送信者の名前を指定できます。
何も設定していない場合は「WordPress」が送信者名となっているので、会社名・団体名を入れておくのがおすすめです。
|
（※1）Snow Monkey Formsのメールタグについて
Snow Monkey Formsで作成したフォームの各項目には、name属性と呼ばれるものが指定されています。（name属性はフォーム入力欄を選択すると右サイドバーから確認できます。）
このname属性の値を波括弧{}で囲い、メール本文中で使用することで、そのフォームに入力された値を取得することができます。
また、{all-fields}というメールタグを使用すると入力されたすべての値を取り出すことができます。
ユーザーへの自動返信メールの設定
ユーザーへの自動返信メールの設定は、管理者宛メールの設定項目より下にスクロールしたところにあります。
設定できる項目の意味は管理者メールアドレスと同様ですが、以下でおすすめの設定を紹介していきます。
| 項目 | 意味 | ||
|---|---|---|---|
| To（メールアドレス） | 自動返信先となるメールアドレスを入力します。ここはデフォルトで入力されている{email}のままでOKです。
{email}のようにメールタグを使用すると、ユーザーが入力した情報をそのままメール本文などで使用できます。 Snow Monkey Formsのメールタグについては前述の「Snow Monkey Formsのメールタグについて」で詳しく解説しています。 |
||
| 件名 | 自動返信メールの件名を指定します。
デフォルトでは「自動返信通知」となっており一見何のメールか分かりにくいため、「お問い合わせありがとうございました。」などとしておくのがおすすめです。
|
||
| BODY | 自動返信メールの本文を指定します。
デフォルトでは、{all-fields}というメールタグが記載されていますが、これだと入力されたすべての値がただ表示されるだけになっています。 そのため、管理者メールの際と同様、入力内容を個別に取り出せるメールタグを用いてより親切な内容に変更してあげましょう。
メールタグについては「Snow Monkey Formsのメールタグについて」にて詳しく解説します。 |
||
| REPLY-TO（メールアドレス） | 届いた自動返信メールに対し返信ボタンを押すと、返信先として設定したメールアドレスがセットされます。
基本は空欄で問題ありません。
|
||
| From（メールアドレス） | 自動返信メールの送信元となるアドレスを指定できます。
何も設定していない場合は「wordpress@ドメイン名」と設定されます。 サーバー上で「info@ドメイン名」といったようなメールアドレスをすでに作成していて、メールアドレスを使って直接返信を受け取っても良いという場合は、「info@ドメイン名」と設定しておくのがおすすめです。
逆に、返信メールを受け付けない場合は「noreply@ドメイン名」としたり、メール本文内に「このメールは配信専用です。このメールに返信はできませんのでご了承ください。」などと記載しておくと良いでしょう。 (※)送信元は「xxx@ドメイン名」にしておきましょう。 |
||
| 送信者 | 通知メールの送信者の名前を指定できます。
何も設定していない場合は「WordPress」が送信者名となっているので、会社名・団体名を入れておくのがおすすめです。
|
フォーム部品の追加方法
フォーム部品を追加したい場合は、フォーム間にカーソルを合わせると出てくる「項目を追加」ボタンをクリックします。
項目が追加されたら左側にはラベルの入力欄（テキストのみ）、右側にはブロックが挿入できるスペースが追加されます。
以下ではテキスト入力欄やラジオボタンなど、異なるフォーム部品ごとの追加方法を解説します。
テキスト入力欄（例: 会社名など）を追加する方法
会社名などを取得するために、新たにテキスト入力欄を追加するには「テキスト」を選択します。
これでテキストボックスが追加されます。
追加されたテキストボックスのname属性にはランダムな値が自動生成されるので、フォームの内容と関連性のある任意かつ一意の値に変更しておきましょう。
また、入力を必須にしたい場合はバリデーションの「必須」にチェックを入れておきましょう。
あとは、ラベルにテキストを追加しておきます。
フォームを追加したら必ず先ほどの管理者宛メール・自動返信メールの設定で本文に下記のように追加しておきましょう。
◾️管理者宛メールの編集（※ユーザー宛メールも同様に編集が必要）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
ホームページから下記のお問い合わせがありました。 ========== お名前: {fullname} 会社名: {company-name} ← ここを追加 Eメール: {email} メッセージ: {message} ========== ...(以下省略) |
電話番号の入力欄を追加する方法
電話版番号を追加するには、「Tel」を選択します。
電話番号入力欄が追加されるので、一意のname属性を指定し、必要に応じてバリデーションを設定しましょう。
なお、見た目は「テキスト」と同じですが、「Tel」を使用することでスマホなどで入力欄を選択した際、数字キーボードが先に開かれるようになります。
フォームを追加したら必ず先ほどの管理者宛メール・自動返信メールの設定で本文に下記のように追加しておきましょう。
ラジオボタン（例: 性別など）を追加する方法
複数の選択肢から1つを選ばせることができるラジオボタンを追加するには、「ラジオボタン」をクリックします。
ラジオボタンが追加されたら、任意のname属性と指定し、必要に応じてバリデーションにチェックを入れましょう。
デフォルトでは、「value1」「label2」「label3」と3つの選択肢が並んでいますが、これは「OPTIONS」から設定できます。
改行を入れて1行づつ記載することで、複数の選択肢を設定できます。
フォームを追加したら必ず先ほどの管理者宛メール・自動返信メールの設定で本文に下記のように追加しておきましょう。
（参考）value:labelの書き方について
また、他の形式の書き方として"男性":"Male""女性":"Female"のように記述することもできます。
こうすることで、フォーム上では:（コロン）後に記載のある「Male」と「Female」を表示させ、メール本文内では「男性」「女性」という値で受け取ることができます。
チェックボックスを追加する方法
複数の選択肢から複数の選択肢を選ばせることができるチェックボックスを追加するには、「チェックボックス」をクリックします。
チェックボックスが追加されたら任意かつ一意のname属性を設定し、必要に応じてバリデーションを設定します。
また、選択肢はラジオボタンと同様でOPTIONSから設定できます。改行を入れて選択肢を記載することで、好きな数だけ選択肢を増やすことができます。
フォームを追加したら必ず先ほどの管理者宛メール・自動返信メールの設定で本文に下記のように追加しておきましょう。
フォームが作成できた後に忘れずやっておくべきこと
フォームの作成が終わったら、以下の2点を忘れずにやっておきましょう。
フォーム部品を追加したあとはメール本文の修正を行う
フォーム部品を追加したあとはメール本文の修正を行いましょう。
フォーム部品が正しく追加できても、メールタグを用いて入力された内容を取得するよう設定していないと情報を受け取れません。
フォーム部品を追加した場合は「管理者宛メール」「ユーザー宛自動返信メール」を編集することを忘れないようにしましょう。
必須項目と任意項目が目で見てわかるようにしておく
ユーザー目線で必須項目と任意項目が目で見てわかるように、必須項目には赤文字で「必須」などといったマークをつけておきましょう。
【スパム対策】Google reCAPTCHAを設定する方法
Snow Monkey Formsのように自動返信機能がついているフォームはスパム被害の対象になりやすいです。
そこでフォームができたらGoogle reCAPTCHAという無料サービスを使ってスパム対策をしておきましょう。
Google reCAPTCHAによるスパム対策設定方法は以下の通りです。
◾️Google reCAPTCHAを設定する方法
- STEP.1：Google reCAPTCHAのサイトキー・シークレットキーを取得する
- STEP.2：Snow Monkey Formsと連携する
メールアドレス欄に他人のメールアドレスをランダムに入れて大量送信することで、自分のお問い合わせフォーム経由でいろいろな人に自動返信メールが届けられてしまいます。
これはプログラムの脆弱性というよりも、自動返信の仕様を悪用した不正利用です。最近特に多いようで、各レンタルサーバー会社から注意喚起のニュースが流れています。
お問い合わせフォームに自動返信機能がついている場合は、特にGoogleのreCAPTCHAサービスなどと連携しておくようにしましょう。
STEP.1：Google reCAPTCHAのサイトキー・シークレットキーを取得する
まずはGoogle reCAPTCHAのサイトキー・シークレットキーを取得しましょう。
以下のURLをクリックしてGoogle reCAPTCHAにアクセスします。
https://www.google.com/recaptcha/about/
「v3 Admin Console」をクリックします。
Googleアカウントにログインします。
以下のような画面が記載されているので、各項目を入力・選択し、利用規約の同意チェックボックスをチェックしたら「送信」をクリックします。
| 項目 | 意味 |
|---|---|
| ラベル | サイトを容易に識別できるようラベルを設定します。会社名やドメイン名を入力します。 |
| reCAPTCHAタイプ | reCAPTCHAタイプを選択します。ここでは最新版のスコアベース(v3)を選択します。
reCAPTCHAタイプのバージョンの違いは以下の通りです。
|
| ドメイン | サイトのドメインを設定します。設定されたドメインとサブドメインが登録対象となります。 |
以上でサイトキーとシークレットキーが表示されるので、それぞれをコピーしておきます。
誤ってサイトキーとシークレットキーのコピーをしないままreCAPTCHAを閉じてしまった場合は、以下の方法でサイトキー・シークレットキーを確認できます。
Google reCAPTCHAにアクセスします。
https://www.google.com/recaptcha/about/
「v3 Admin Console」をクリックします。
該当のドメイン名（あるいは会社名）が表示されているのを確認してから、右上の設定アイコンをクリックします。
「reCAPTCHのキー」と書かれた隠しメニューを開くと、サイトキー・シークレットキーの確認ができます。
STEP.2：Snow Monkey Formsと連携する
次にSnow Monkey FormsとreCAPTCHAを連携します。
「Snow Monkey Forms＞reCAPTCHA」をクリックします。
サイトキーとシークレットキーを入力し、変更を保存します。
以上で設定は完了です。正しく設定ができていれば、サイトの右下にreCAPTCHAのアイコンが表示されているはずです。
まとめ
今回はSnow Monkey Formsを使ってお問い合わせフォームを作成する方法と、スパム対策としてGoogle reCAPTCHAを導入する方法を解説しました。
Snow Monkey Formsを使えばブロックエディター画面から簡単にフォーム項目の追加やメール設定ができます。
また、フォームスタイルがいくつか用意されており手軽に見栄えの良いメールフォームを作れます。
◾️動画解説版
あわせて読みたい関連記事
今回は以上になります。最後までご覧頂き、ありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
