Snow Monkey Formsでお問い合わせフォームを作る方法

この記事のレベル

初心者 (3.5)
重要度 (3.0)
難しさ (2.0)

こんにちは、編集長のカワウソです!

「ホームページ制作にWordPressを使用しているけど、お問い合わせフォームの作り方が分からない……」と悩んでいませんか?

確かに、お問い合わせフォームは「入力項目」や「自動送信メール」などの設定が含まれるため、ややこしく感じてしまいますよね。

そこで今回は、初心者の方向けに『Snow Monkey Forms』という無料のプラグインを用いて、お問い合わせフォームを作る方法を解説します。

カワウソ

この記事は次のような人におすすめ!

  • はじめて企業ホームページを作る人
  • WordPressでホームページを作る人
  • シンプルな内容のお問い合わせフォームを作りたい人

この記事を読めば、最短1時間〜2時間程度で、実用的なお問い合わせフォームが作れますよ。

さらに、お問い合わせフォームのスパムメール対策なども解説しているので、ぜひチェックしてみてください。

それではどうぞ!

Snow Monkey Formsとは

Snow Monkey Forms

▲出典:wordpress.org

『Snow Monkey Forms』は、お問い合わせフォームが作れる、無料のプラグインです。

WordPressの「ブロックエディタ」に対応しているため、初心者の方でも簡単に扱えます。

ブロックエディタ(Gutenberg)とは

ホームぺージのテキストや画像を「ブロック単位」で編集できる機能。HTMLやCSSの知識がなくてもWebページを編集できるため、初心者の方でも扱いやすいのが特徴です。

フォームの項目タイプとしては、以下を設定することが可能です。

項目 説明 用途例
テキスト 一行のみ 名前、会社名、
住所(市区郡以下)
メールアドレス メールアドレス メールアドレス
電話番号 電話番号 電話番号
URL URL URL
ファイル ファイル添付が可能
(JPG、PNG、PDF、ZIPなど)
履歴書
テキストエリア 複数行に対応 お問い合わせ内容
チェックリスト プルダウンで選択肢が隠れた状態 生年月日や都道府県など
選択肢が多いもの
ラジオボタン 選択肢が表示された状態で、
一つのみ選択可能
性別や当社を知ったきっかけ
チェックボックス 選択肢が表示された状態で、
複数選択可能
当社の商品で興味のあるもの

もちろんこれらは、必須項目として設定できます。

そのほか、自動送信メールにも対応しているので、シンプルなお問い合わせフォームであれば、十分これ一つで賄えるでしょう。

メモ

『Snow Monkey Forms』以外にも、ホームページのデザインに役立つ『Snow Monkey Blocks』やブログ機能を充実化させる『Snow Monkey Editor』などのプラグインもあります。

どれもWordPressテーマ『Snow Monkey』と一緒に使うことで、相乗効果を発揮します。

カワウソ

『Snow Monkey Forms』はもちろん、『Snow Monkey Blocks』と『Snow Monkey Editor』は、『Snow Monkey』以外のテーマでも使えるプラグインなので、ご安心ください。

Snow Monkey Formsのメリットとデメリット

ここでは私カワウソが、実際に『Snow Monkey Forms』を試用して感じた、メリットとデメリットを解説します。

『Snow Monkey Forms』の魅力や注意点が分かるので、ぜひご覧ください。

カワウソ

体験談ということもあり、多少の主観が入ることをご了承ください。

Snow Monkey Formsのメリット

『Snow Monkey Forms』のメリットは、以下の3つです。

メリット
  1. すべての設定が簡単
  2. フォームのスタイルを4つから選べる
  3. 確認画面と完了画面を表示できる

すべての設定が簡単

何よりも驚いたのが、すべての設定が簡単だったことです。

ブロックエディタ対応ということもあってか、WordPressの「投稿」や「固定ページ」と同じような画面で編集できるため、どこを触ればよいかが直感的に分かります。

Snow Monkey Formsの編集画面

『Snow Monkey Forms』の編集画面

それもそのはず、開発者は日本人のキタジマ タカシさんで、過去にお問い合わせフォームを作った経験があるとのこと。

ただクライアントの要望を聞いているうちに、高機能なフォームになってしまい、メンテナンスが大変になってしまったようです。

そこで、「サクッとフォームを用意したい」というニーズを意識して作られたのが、この『Snow Monkey Forms』。

詳しくは、公式ホームページに記載されているので、気になる方はチェックしてみてください。

フォームのスタイルを4つから選べる

『Snow Monkey Forms』は、テンプレートが用意されているため、初心者の方でも簡単に、実用的なデザインのお問い合わせフォームを作れます。

フォームのスタイルは、以下の4つから選ぶことが可能です。

フォームのスタイル
  1. デフォルト
  2. Simple table
  3. Letter
  4. Business
デフォルトのフォームスタイル

デフォルト

Simple tableのフォームスタイル

Simple table

Letterのフォームスタイル

Letter

Businessのフォームスタイル

Business

プラグインのなかには、高機能とはいえ、デザインは別途CSS(スタイルシート言語)で装飾する必要があるものもあります。

CSSコードを記述するのは、初心者の方にとってハードルが高いですよね。

『Snow Monkey Forms』なら、そのような心配は無用です。

確認画面と完了画面を表示できる

『Snow Monkey Forms』では、デフォルトで「確認画面」と「完了画面」を表示させることが可能です。

確認画面は、ユーザーの誤送信を防止するのに役立ちます。

完了画面は、ユーザーに送信完了を明確に提示できるため、「ちゃんと問い合わせできていますか?」といったような、電話の問い合わせを減らせるメリットがあるでしょう。

お問い合わせフォーム用プラグインのなかには、「確認画面」と「完了画面」を表示させるために、プログラミングによりカスタマイズしたり、別途プラグインをインストールしたりする必要のあるものもあります。

しかし、『Snow Monkey Forms』ならそのような手間が発生しません。

『Snow Monkey Forms』なら、実用的なお問い合わせフォームが、比較的短時間で作れるのです。

Snow Monkey Formsのデメリット

『Snow Monkey Forms』のデメリットは、以下の2つです。

デメリット
  1. 項目の追加方法が分かりづらい
  2. コンバージョンが計測しづらい

項目の追加方法が分かりづらい

初見では、お問い合わせフォームの項目を追加する方法が分かりませんでした。

というのも、公式ホームページの内容と実際の画面が異なっていたためです(2023年3月30日時点)。

項目を追加するには、以下の青枠の内容(ラベル、説明、ブロックの選択)をセットで表示させるのですが、それには多少コツが必要でした。

項目セット(ラベル、説明、ブロックの追加)

ただ、知ってしまえばなんでもないことですので、このあと紹介する内容を参考にしていただければ問題ありません。

コンバージョンが計測しづらい

初心者の方がアクセス解析ツールなどでコンバージョンを計測するときは、少し手こずるかもしれません。

というのも、アクセス解析ツールの多くは、コンバージョンの計測に完了画面(サンクスページ)のURLを指定することが多いです。

しかしながら『Snow Monkey Forms』は、入力画面、確認画面、完了画面がすべて同じページ(URL)。
完了画面特有のページ(URL)が存在しないため、コンバージョン計測に工夫がいるのです。

たとえば、「Google タグ マネージャー」を用いて、「完了メッセージが表示されたら」という条件で、コンバージョンタグを発火(起動)させれば、計測はできます。

しかし、「Google タグ マネージャー」の導入が前提となるため、多少なりとも難易度が上がるでしょう。

Google タグ マネージャーとは

計測タグやコンバージョンタグなどを、まとめて管理できる無料のツール。URLやページのHTML要素(ID属性または CSSセレクタ)など、さまざまな条件でタグを発火させることができる。

メモ

公式ホームページでは、WordPressテーマ『Snow Monkey』とカスタマイズ用プラグイン『My Snow Monkey』を使用中の方向けに、別途用意した完了画面に遷移させる方法が案内されています(参考:Snow Monkey「Snow Monkey Formsの完了画面を別ページに設定するには」)。

Snow Monkey Formsでお問い合わせフォームを作る方法

ここからは実際に、『Snow Monkey Forms』でお問い合わせフォームを作る方法を、具体的に解説します。

今回は題材として、BtoB(企業間取引)向けのお問い合わせフォームを作るので、あらかじめ完成形をご覧ください。

この記事で作るお問い合わせフォームの完成形

完成形イメージ ※クリックで拡大

手順は、以下の7つに分けて解説しますね。

なお本記事の制作環境は、以下のとおりです。

制作環境によって、画面が異なることがありますので、あらかじめご了承ください。

ポイント
  • WordPressのバージョン:6.1.1
  • Snow Monkey Formsのバージョン:バージョン 5.0.4
  • テーマ:Twenty Twenty-Three(バージョン: 1.0)※WordPressデフォルトテーマ

Snow Monkey Formsのインストールおよび有効化

まず、『Snow Monkey Forms』をインストールしましょう。

STEP1
『Snow Monkey Forms』の検索

WordPressのメインナビゲーション「プラグイン > 新規追加」をクリックしたあと、『Snow Monkey Forms』を検索します。

Snow Monkey Formsの検索
STEP2
『Snow Monkey Forms』のインストール

『Snow Monkey Forms』の今すぐインストールをクリックしてください。

Snow Monkey Formsのインストール
STEP3
『Snow Monkey Forms』の有効化

続けて、そのまま有効化します。

Snow Monkey Formsの有効化
メモ

プラグインを有効化すると、WordPressのメインナビゲーションに、「Snow Monkey Forms」というメニューが追加されます。

フォーム項目の編集

次に、お問い合わせフォームの項目を編集していきましょう。

フォームを新規追加

STEP1
新規追加

まず、WordPressのメインナビゲーション「Snow Monkey Forms」から、新規追加をクリックします。

フォームを新規追加
STEP2
タイトルの入力

タイトルに「お問い合わせ」と入力したあと、ひとまず画面右上の下書き保存をクリックします。

タイトルの入力

お名前の編集

それではまず、デフォルトで用意されている「お名前」の項目を編集しましょう。

STEP1
ラベルの編集

ラベル「お名前」のあとにカーソルをあわせて、「(必須)」と追記します。

お名前:ラベルの編集
STEP2
必須の設定

次に、項目(ブロック)をクリックしてみてください。
画面右側にある、「バリデーションの必須設定」がすでに有効化されている状態ですよね。

今回はお名前を必須にするので、変更する必要はありません。

お名前:必須の設定
STEP3
入力例(PLACEHOLDER)の設定

今回のフォームでは、項目内に入力例を表示させるようにします。

メモ

入力例を表示させると、ユーザーが迷わなくなるので、フォームから離脱するのを防ぐ効果が期待できます。なお、フォームの最適化は「EFO(エントリーフォーム最適化)」と呼ぶので、覚えておきましょう。

項目(ブロック)をクリックした状態で、画面右側の「PLACEHOLDER」に、「山田 太郎」と入力してください。

お名前:入力例の設定
注意

「PLACEHOLDER」の上にある項目「VALUE」は、初期値です。設定した値が入力された状態になってしまうので、間違わないように注意しましょう。

VALUEは初期値
STEP4
自動送信メール用の値(NAME)の設定

ユーザーがフォームに入力した内容を、自動送信メールへ反映させるために必要となる「NAME」の値を設定します。
画面右側の属性「NAME」には、すでに「fullname」が入力されていますよね。

今回はこの「fullname」を活用するので、変更する必要はありません。

自動送信メール用の値(NAME)の設定
STEP5
完了

これでお名前の編集は完了です。

下書き保存をクリックしておきましょう。

会社名の追加

次に、「会社名」の項目を新しく追加します。

STEP1
項目の複製

画面左の上にある「リストを表示」をクリックします。

会社名:リスト表示

「フォーム」のすぐ下にある「項目」を選択して、「」から「複製」をクリックします。

会社名:項目の複製

これで「お名前(必須)」の項目がセット(ラベル、説明、項目ブロック)で複製されました。※説明は未入力の状態です。
この内容を会社名に変更していきます。

会社名:複製後の画面
STEP2
ラベルの編集

「お名前(必須)」を「会社名(必須)」に変更します。

会社名:ラベルの編集
STEP3
説明の追加

今回は会社名を必須にする代わりに、個人の方への配慮として、メッセージを添えます。説明」にカーソルを合わせて、以下のテキストを入力してください。

個人の方は「個人」とご記入ください。

会社名:説明の追加
STEP4
必須の設定

必須の設定は、「お名前」の項目を複製したので、すでに有効化されている状態です。
今回は会社名を必須にするため、変更する必要はありません。

会社名:必須の設定
STEP5
入力例(PLACEHOLDER)の変更

入力例を変更するため、画面右側の「PLACEHOLDER」に入力されている「山田 太郎」を「山田商事株式会社」に変更してください。

会社名:入力例の変更
STEP6
自動送信メール用の値(NAME)の変更

「NAME」の値は、「お名前」の項目を複製したので、「fullname」が入っています。
これを「companyname」に変更してください。

会社名:自動送信メール用の値(NAME)の変更
注意

「NAME」は、一意の値を入力してください。他の項目と同じ値は使用できません。

STEP7
完了

これで会社名の追加は完了です
下書き保存クリックしておきましょう。

電話番号の追加

次に、「電話番号」の項目を新しく追加します。

STEP1
項目の複製とラベルの編集

先ほどと同じ手順で、「会社名(必須)」の項目を複製して、ラベル名を「電話番号」に変更します。

電話番号:項目を複製してラベルを編集
STEP2
テキストタイプの項目(ブロック)を削除

「山田商事株式会社」が表示されている項目は、テキストタイプの項目(ブロック)です。
電話番号には使えないため、削除します。

項目(ブロック)をクリックして、キーボードの「BackSpace」を押してください。

電話番号:テキストタイプの項目を削除

削除したあと、ラベル「電話番号」にカーソルをあわせると、削除したところに「ブロックを選択するには~」が表示されます。

電話番号:ラベルを選択
STEP3
電話番号タイプの項目(ブロック)を追加

」ボタンをクリックして、「snow」と検索してください。
そして、「すべてを表示」をクリックします。

電話番号:ブロックの追加でSnowと検索

画面左側に、『Snow Monkey Forms』で追加できる項目(ブロック)が一覧表示されます。
このなかから、「Tel」をクリックします。

電話番号:telブロックを追加

これで、電話番号の項目(ブロック)を追加できました。

電話番号:telブロック追加後の画面
STEP4
必須の設定

電話番号の項目(ブロック)は新規で追加したため、必須の設定は無効化されている状態です。
今回は電話番号を必須にしないので、変更する必要はありません。

電話番号:必須の設定はオフ
STEP5
入力例(PLACEHOLDER)の設定

画面右側の「PLACEHOLDER」に、「000-000-0000」と入力します。

電話番号:入力例の設定
STEP6
自動送信メール用の値(NAME)の変更

自動送信メール用の「NAME」の値を「tel」に変更します。

電話番号:自動送信メールの値(NAME)の変更
STEP7
完了

これで電話番号の追加は完了です。
下書き保存をクリックしておきましょう。

メールアドレスの編集

次に、「メールアドレス」の項目を編集します。

STEP1
ラベルの編集

現状、ラベル名が「Eメール」なので、「メールアドレス(必須)」に変更します。
※「Eメール」のままでも構いません。

メールアドレス:ラベルの編集
STEP2
必須の設定

必須の設定は、すでに有効化されている状態です。
今回はメールアドレスを必須にするので、変更する必要はありません。

STEP3
入力例(PLACEHOLDER)の設定

画面右側の「PLACEHOLDER」に、「t-yamada@example.co.jp」と入力します。

メールアドレス:入力例の設定
STEP4
自動送信メール用の値(NAME)の設定

自動送信メール用の「NAME」の値は、このまま「email」を活用するので、変更する必要はありません。

メールアドレス:自動送信メール用の値(NAME)の設定
STEP5
完了

これでメールアドレスの編集は完了です。
下書き保存をクリックしておきましょう。

ホームページアドレスの追加

次に、「ホームページアドレス」の項目を追加します。

STEP1
項目の複製とラベルの編集

「リスト表示」から「メールアドレス」の項目を複製します。

ホームページアドレス:項目の複製

ラベルを「ホームページアドレス」に変更しましょう。

ホームページアドレス:ラベルの編集
STEP2
メールアドレスタイプの項目(ブロック)を削除

複製したメールアドレスタイプの項目(ブロック)を削除して、ラベル「ホームページアドレス」にカーソルを合わせます。

ホームページアドレス:メールアドレスタイプの項目を削除
STEP3
URLタイプの項目(ブロック)を追加

」ボタンから「snow」と検索し、URLタイプの項目(ブロック)を追加します。

ホームページアドレス:URLタイプの項目を追加
ホームページアドレス:項目追加後のイメージ
STEP4
必須の設定

URLの項目(ブロック)は新規で追加したので、必須設定は無効化されている状態です。
今回はホームページアドレスは必須にしないため、このまま変更する必要はありません。

ホームページアドレス:必須の設定はオフ
STEP5
入力例(PLACEHOLDER)の設定

画面右側の「PLACEHOLDER」に、「https://example.co.jp」と入力します。

ホームページアドレス:入力例の設定
STEP6
自動送信メール用の値(NAME)の設定

自動送信メール用の「NAME」の値は、「url」に変更してください。

ホームページアドレス:自動送信メール用の値(NAME)の設定
STEP7
完了

これでホームページアドレスの追加は完了です。
下書き保存をクリックしておきましょう。

お問い合わせ内容の編集

デフォルトでは、「メッセージ」という項目があります。

これを「お問い合わせ内容」に変更していきますね。

STEP1
ラベルの編集

ラベルを「お問い合わせ内容(必須)」に変更します。

お問い合わせ内容:ラベルの編集
STEP2
必須の設定

必須の設定は、すでに有効化された状態です。
今回はお問い合わせ内容を必須にするので、変更する必要はありません。

お問い合わせ内容:必須の設定
STEP3
入力例(PLACEHOLDER)の設定

お問い合わせ内容については、今回入力例を表示させないため、「PLACEHOLDER」は空の状態のままにしておきます。

お問い合わせ内容:入力例の設定
STEP4
自動送信メール用の値(NAME)の設定

「NAME」には、デフォルトで「message」が入っています。
今回はこの「message」を活用するので、変更する必要はありません。

お問い合わせ内容:自動送信メール用の値(NAME)の設定
STEP5

これでお問い合わせ内容の編集は完了です。
下書き保存をクリックしておきましょう。

個人情報の取り扱いについての追加

最後のフォーム項目として、「個人情報の取り扱いについて」を追加します。

STEP1
項目の複製とラベルの編集

「リスト表示」から「お問い合わせ内容」の項目を複製します。

個人情報の取り扱いについて:項目を複製

ラベルを「個人情報の取り扱いについて(必須)」に変更してください。

個人情報の取り扱いについて:ラベルの編集
STEP2
説明の編集

説明に以下を入力します。

お問い合わせの際には「個人情報の取り扱いについて」をお読みいただき、予め同意の上、お問い合わせください。

個人情報の取り扱いについて:説明の編集

「個人情報の取り扱いについて」のテキストには、プライバシーポリシー(個人情報保護方針)ページへのリンクを設置しましょう。
個人情報の取り扱いについてのテキストを選択した状態で、「リンク」をクリックします。

個人情報の取り扱いについて:テキストを選択したうえで、リンクをクリック

自社のプライバシーポリシーページのURLを入力したあと、「新しいタブで開く」を有効化し、「送信(矢印)」をクリックしてください。

個人情報の取り扱いについて:URLを入力して送信
STEP3
テキストエリアタイプの項目(ブロック)を削除

テキストエリアタイプの項目(ブロック)を削除して、ラベル「個人情報の取り扱いについて(必須)」にカーソルを合わせます。

個人情報の取り扱いについて:テキストエリアタイプの項目を削除
STEP4
チェックボックスタイプの項目(ブロック)を追加

「+」ボタンから、チェックボックスタイプの項目(ブロック)を追加してください。

個人情報の取り扱いについて:チェックボックスタイプの項目を追加
個人情報の取り扱いについて:項目追加後のイメージ

チェックボックスの項目(ブロック)をクリックして、画面右側の「OPTIONS」の中の「value1」を削除して「同意する」に変更します。

個人情報の取り扱いについて:Value1の値を変更

そのあと、2行目と3行目の値を削除します。

2行目と3行目を削除
STEP5
必須の設定

チェックボックスの項目(ブロック)は新規で追加したため、デフォルトでは必須の設定が有効化されていません。
個人情報の取り扱いについては、必須に設定する必要があるため、有効化してください。

個人情報の取り扱いについて:必須の設定
STEP6
自動送信メール用の値(NAME)の設定

自動送信メール用の「NAME」の値は、「policy」に変更してください。

個人情報の取り扱いについて:自動送信メール用の値(NAME)の設定
STEP7
完了

これで個人情報の取り扱いについての編集は完了です。
下書き保存をクリックしておきましょう。

確認画面の設定

ここからは、確認画面を表示させるための設定を行います。

STEP1
確認画面の設定

青文字のボタン「フォーム設定を開く」をクリックしたあと、画面右側の「確認画面を使用する」を有効化してください。

確認画面を使用する
STEP2
プログレストラッカーの設定

プログレストラッカーも有効化しましょう。

プログレストラッカーの設定

プログレストラッカーを有効化すると、入力→確認→完了のステップナビゲーションが表示されるようになります。

ステップナビゲーションの表示イメージ
メモ

ステップナビゲーションを表示させると、ユーザーが確認画面や完了画面の存在に気付くことができます。

STEP3
完了

これで確認画面の設定は完了です。
下書き保存しておきましょう。

完了画面の設定

確認画面の設定を終えたら、さきほど設定した「個人情報の取り扱いについて」の項目の下にある、完了画面も設定しましょう。

STEP1
内容を変更

デフォルトでは、以下のテキストが表示されるのみです。

完了しました。

そのため、今回は以下の内容に変更します。

この度はお問い合わせいただき、誠にありがとうございます。
追って担当者からご連絡いたします。

完了画面のメッセージ
STEP2
完了

これで完了画面の設定は完了です。
下書き保存しておきましょう。

フォームスタイルの設定

『Snow Monkey Forms』のメリットでもお伝えしたように、フォームのスタイルは4つから選べます。

今回は、「Business」を採用しますね。

STEP1
Businessを選択

青文字のボタン「フォーム設定を開く」をクリックして、画面右側のフォームスタイルから、「Business」を選んでください。

フォームスタイルの設定
STEP2
完了

これでフォームスタイルの設定は完了です。
下書き保存しておきましょう。

自動送信メールの設定

ここからは、自動送信メールの設定を行います。

自動送信メールの仕組み

自動通知メール(ホームページ管理者宛て)

まずホームページ管理者宛てに送信される、自動通知メールの設定を行います。

STEP1

青文字のボタン「フォーム設定を開く」をクリックします。

自動通知メール:フォーム設定を開く
STEP2

画面右側に「管理者宛メール」を表示させてください。

自動通知メール:管理者当てメールの表示
To(メールアドレス)

「To(メールアドレス)」には、自動通知メールを受け取りたい自社のメールアドレスを入力します。

自動通知メール:通知を受け取りたいメールアドレスを入力
件名

「件名」には、ホームページからの問い合わせであることが分かる内容の文言を入力します。

今回は、以下の内容を入力してください。

ホームページにお問い合わせが入りました

BODY

「BODY」は、メール本文のことです。

デフォルトでは、「{all-fields}」という値が入っています。

この値は、お問い合わせフォームの項目すべてを、自動通知メールに表示させるためのものです。

ここでは、以下に変更しますね。

【お名前】{fullname}
【会社名】{companyname}
【電話番号】{tel}
【メールアドレス】{email}
【ホームページアドレス】{url}
【お問い合わせ内容】{message}
【個人情報の取り扱いについて】{policy}

自動通知メール:本文の内容
FROM(メールアドレス)

「FROM(メールアドレス)」は、自動通知メールの送信元です。
自動通知メールは、ホームページ管理者宛てのため、とくに設定する必要はありません。

なお設定しない場合は、「wordpress@自社ドメイン」から自動通知メールが届きます。

送信者

「送信者」は、自動通知メールの送信者(送信元)の名称です。
自動通知メールは、ホームページ管理者宛てのため、とくに設定する必要はありません。

なお指定しない場合、「名称なし」もしくは「WordPress」という名称で、自動通知メールが届きます

以上で、自動通知メール(ホームページ管理者宛て)の設定は完了です。
下書き保存をクリックしておきましょう。

自動返信メール(ユーザー宛て)

同じ要領で、お問い合わせフォームを送信したユーザーに対して、自動で返信されるメールを設定していきます。

自動返信メール:自動返信メールの設定画面を表示
To(メールアドレス)

「To(メールアドレス)」は、自動返信メールの送信先。
つまり、ユーザーがお問い合わせフォームに入力したメールアドレスのことです。

デフォルトで、「{email}」が入っています。
今回は、メールアドレスのNAME値に、デフォルトの「email」を使用しているので、変更しないでください。

自動返信メール:NAME値
件名

「件名」には、以下の内容を入力してください。

【自動返信メール】お問い合わせいただきありがとうございます

自動返信メール:件名設定後のイメージ
ポイント

「早速担当者から返信があった」とユーザーに誤解を与えてはいけないので、件名もしくは本文で、自動返信メールであることを伝えたほうがよいでしょう。

BODY

「BODY」は、メールの本文です。
以下の内容を入力してください。

この度はお問い合わせいただき、誠にありがとうございます。
以下の内容で受け付けました。
【お名前】{fullname}
【会社名】{companyname}
【電話番号】{tel}
【メールアドレス】{email}
【ホームページアドレス】{url}
【お問い合わせ内容】{message}
【個人情報の取り扱いについて】{policy}
2営業日以内に、担当者からご連絡いたします。
※万が一連絡がない場合は、誠に恐れ入りますがお電話にてご連絡頂きますようお願い申し上げます。 

自動返信メール:本文の内容
メモ

このほか、メール本文の最下部には「社名」や「電話番号」などを記載した署名を添えておくとよいでしょう。

FROM(メールアドレス)

「FROM(メールアドレス)」は、自動返信メールの送信元です。

自動通知メールはユーザー宛てのため、自社の問い合わせ対応用メールアドレス(例:support@自社ドメイン)に変更してください。

自動返信メール:自社の問い合わせ対応用メールアドレスを設定

なお、ホームページと同じドメインのメールアドレスを設定しましょう。

注意

未設定もしくは、ホームページと異なるドメインのメールアドレスを指定した場合は、「wordpress@自社ドメイン)」から自動返信メールが(ユーザーに向けて)送られてしまいます。

「wordpress@自社ドメイン)」は普段使用しないため、仮にユーザーが自動返信メールに対して返信した場合、メールを受け取ることができません。

送信者

「送信者」は、自動返信メールの送信者(送信元)の名称です。
自社の社名やサービス名を設定しておきましょう。

注意

なお指定しない場合、自動返信メールが「WordPress」という名称で、ユーザーに送られてしまいます。ユーザーがどこから送られてきたか分からないので、必ず設定しましょう。

これで自動送信メールの設定は、完了です。

画面右上の公開をクリックしましょう。

公開をクリック
注意

公開状態でないと、次で紹介する「お問い合わせページにフォームを紐づけること」ができません。

お問い合わせページの作成(フォームの紐づけ設定)

最後に、お問い合わせページを作成して、フォームを紐づけます。

ここでは、お問い合わせページを作るところから、解説しますね。

STEP1
固定ページを新規作成

WordPressのメインナビゲーション「固定ページ > 新規追加」をクリックしてください。

WordPressメインナビゲーションの「固定ページ > 新規追加」
STEP2
タイトルの入力

固定ページのタイトルに「お問い合わせ」と入力してください。

タイトルの入力
STEP3
フォームの読み込み

本文の「」をクリックして、「snow」と検索したあと、「Snow Mokey Form」をクリックします。

Snow Monkey Formsブロックの読み込み

プルダウンから、先ほど作ったフォーム「お問い合わせ」を選んだあと、画面右上の下書き保存をクリックしてください。

下書き保存をクリック
メモ

お問い合わせページのURL(パーマリンク)は、「contact」などに変更しておきましょう。なお、URL(パーマリンク)は「下書き保存」もしくは「公開」したあとでないと、編集できません。

パーマリンクの変更
STEP4
完了

再度「下書き保存」すれば、お問い合わせページの作成(フォームの紐づけ設定)は完了です。プレビューしたあと、実際にお問い合わせフォームを入力および送信して、以下を確認しましょう。

ポイント
  • 必須にしたい項目が正しく設定されているか
  • 入力例は表示されているか
  • 個人情報の取り扱いについてのテキストリンク先が正しいか
  • 入力画面、確認画面、完了画面に遷移するか
  • 自動送信メールが届くか(管理者向けとユーザー向け)
  • 自動送信メールにフォームの入力内容が反映されているか

問題がなければ、お問い合わせページを公開してください。

お問い合わせフォームのスパムメール対策

お問い合わせフォームは、スパムメール対策を施しましょう。

対策しないと、以下のようなリスクを抱えてしまいます。

スパムメール対策をしない場合のリスク
  • 自動送信メールの機能が悪用され、大量のスパムメールが配信されてしまう
  • メール受信側で迷惑メールと判定される
  • メール受信側で受信数の制限がかかり、メールが届かなくなったり、届きにくくなったりする
  • ホームページやドメイン名が危険な情報を配信していると誤って判定される
  • ホームページやドメイン名の第三者信用評価(レピュテーション)が下がる

『Snow Monkey Forms』は、Googleの「reCAPTCHA」を設定することが可能です。

reCAPTCHAを導入すると、Googleのプログラムがスパムかどうかを判断して、自社のホームページを保護してくれます。

ここでは、2023年3月現在最新バージョンである「reCAPTCHA v3」の導入方法を解説しますね。

導入には「Googleアカウント」が必要なので、もし取得していない方はあらかじめ用意しておきましょう。

reCAPTCHAのAPIキーを取得

まずはreCAPTCHAのホームページにアクセスし、『Snow Monkey Forms』に接続するための「APIキー(認証コード)」を取得します。

STEP1

画面上部の「v3 Admin Console」をクリックしましょう。

v3 Admin Consoleをクリック
STEP2

必要事項を入力して、reCAPTCHAの利用登録を済ませます。

  • ラベル:名称を入力(ホームページを複数登録したときに識別するため)
  • reCAPTCHA タイプ:reCAPTCHA v3を選択
  • ドメイン:ドメインを入力(例example.com)
  • オーナー:登録するreCAPTCHAの管理者
  • reCAPTCHA 利用条件に同意する:内容を確認して同意
  • アラートをオーナーに送信する:チェックする(設定エラーや不審なトラフィックなどの通知)
情報を入力して送信
STEP3

登録すると「サイトキー」「シークレットキー」が表示されるので、それぞれコピーしてメモ帳に貼り付けておきましょう。

サイトキーとシークレットキーをコピー

Snow Monkey FormsにAPIキーをセットアップ

STEP1

WordPressの管理画面に戻り、メインナビゲーションの「Snow Monkey Forms > reCAPTCHA」をクリックします。

WordPressメインナビゲーションの「Snow Monkey Forms > reCAPTCHA」をクリック
STEP2

サイトキーとシークレットキーを貼り付けて、変更を保存をクリックしてください。

サイトキーとシークレットキーを貼り付けて変更を保存
STEP3

お問い合わせページにアクセスして、画面の右下に以下のアイコンが表示されていれば、正しく設定されています。

reCAPTCHAのアイコンが表示されることを確認

お問い合わせフォームに関するよくある質問

最後に、お問い合わせフォームに関する「よくある質問」をまとめました。

不明点が発生したときの参考にしてください。

フォームが表示されません

お問い合わせフォームが表示されない場合は、以下を確認しましょう。

確認事項
  • プラグインが有効化されているか
  • プラグインが最新バージョンに更新されているか
  • ページに追加した問い合わせフォームについて、意図したものを選んでいるか

自動送信メールが届きません

自動送信メールが届かない場合は、以下を確認しましょう。

確認事項
  • 送信先の設定が間違っていないか
  • メールが迷惑メールフォルダに振り分けられていないか

なお、自動送信メールが迷惑メールの判定を受けることは、少なくありません。

そのため、その回避策として「SMTPサーバー」を経由して送信することをおすすめします。

SMTPとPOP

メールを送信するためのプロトコル(通信規格)を「SMTP(Simple Mail Transfer Protocol)」、受信するためのプロトコルを「POP(Post Office Protocol)」と呼びます。同じく、送信用サーバーのことを「SMTPサーバー」、受信用サーバーのことを「POPサーバー」と呼ぶので覚えておきましょう。

たとえば「WP Mail SMTP」というプラグインでは、メールソフトの設定と同じようにSMTP情報を入力するだけで、「SMTPサーバー」を経由したメール送信が可能です。

SMTP情報は、レンタルサーバーのサーバーパネル(管理画面)などで確認できます。

メモ

弊社『エックスサーバー』のSMTP情報の調べ方は、以下のマニュアルを参考にしてください。
エックスサーバーマニュアル:メールソフトの設定

reCAPTCHAのロゴ(バッジ)を非表示にしたい

reCAPTCHAのロゴ(バッジ)は、ページに以下の文言(ソースコード)を記述すれば、削除可能です(参考:reCAPTCHA「よくある質問」)。

STEP1

This site is protected by reCAPTCHA and the GooglePrivacy Policy andTerms of Service apply.

ページ表示例

reCAPTCHAのブランド表示例

▲出典:reCAPTCHA「よくある質問」

STEP2

削除するには、以下のコードをCSSファイルに記述します。

.grecaptcha-badge { visibility: hidden; }

メモ

「追加CSS」の機能があるテーマの場合、簡単にCSSファイルにコードを記述することが可能です。

追加CSSにreCAPTCHAのロゴを消すCSSコードを記入

まとめ

この記事では、WordPressのプラグイン『Snow Monkey Forms』を用いて、お問い合わせフォームの作成方法を解説しました。

まとめ
  • 『Snow Monkey Forms』はブロックエディタ対応のため、フォームを作りやすい
  • 『Snow Monkey Forms』は無料で、『Snow Monkey』以外のテーマでも使える
  • 『Snow Monkey Forms』は、デフォルトで確認画面と完了画面を表示する機能がある
  • お問い合わせフォームのスパムメール対策には、「reCAPTCHA」がおすすめ

シンプルな内容のお問い合わせフォームなら、『Snow Monkey Forms』はおすすめです。

もし機能が不足する場合は、拡張性の高い『Contact Form 7』なども検討してみてください。

それでは、素敵なホームページの完成を願っております。

以上、最後まで読んでいただき、ありがとうございました。

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1のレンタルサーバーであり、20万社の導入実績があります。

2024年6月5日12時まで、サーバーが実質半額で利用できる『半額キャッシュバックキャンペーン』を開催中です!

今なら実質月額495円~とお得にホームページを開設できます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

※ 2024年5月時点、W3Techs調べ。

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

これから始める方はこちらのホームページの作り方をぜひご覧ください!

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!

カワウソ

当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。

URLをコピーしました!