Snow Monkey Formsでできること

今回は、WordPressで作成したサイトに「お問い合わせフォーム」を設置する方法をお伝えします。

難しく感じる方もいらっしゃるかもしれませんが、WordPressで作成したサイトであれば、「Snow Monkey Forms」というプラグインを使って、簡単にお問い合わせフォームを設置することができます。

この記事では、Snow Monkey Formsのインストールから、お問い合わせフォームの基本的な作成手順、さらには自動返信メールの設定やセキュリティ対策まで解説していきます。

Snow Monkey Formsでできること

まずはじめに、Snow Monkey Formsを使ってできることを簡単にお伝えしておきます。

• お問い合わせフォームの作成：名前やメールアドレス、メッセージ本文といった基本的な項目を備えたフォームを簡単に作れます。
• フォーム項目のカスタマイズ：テキスト入力欄だけでなく、チェックボックスやドロップダウンメニュー、ファイル添付など、様々な項目を自由に追加できます。
• 通知メールの設定：フォームから問い合わせがあった際に、サイト管理者宛にメールで通知を送ることができます。
• 自動返信メールの設定：問い合わせてくれたユーザーに対し、「お問い合わせを受け付けました」という内容の確認メールを自動で送信できます。

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

ここからは、Snow Monkey Forms（スノーモンキーフォームズ）というプラグインを使って、お問い合わせフォームを作っていきます。プラグインのインストールから、フォームの作成、確認画面の設定までを、順番に進めます。

STEP 1Snow Monkey Formsをインストールする

まず、お問い合わせフォームを作るためのプラグイン「Snow Monkey Forms」を入れます。管理画面の左メニューから「プラグイン」→「新規プラグインを追加」を開きます。

右上の検索欄に「Snow Monkey Forms」と入力します。検索結果に「Snow Monkey Forms」が表示されるので、「今すぐインストール」をクリックします。

インストールが終わると、ボタンが「有効化」に変わります。これをクリックします。プラグインは、入れる（インストール）だけでは働かず、有効化してはじめて使えるようになります。

有効化すると、左メニューに「Snow Monkey Forms」という項目が増えます。ここが、これからフォームを作ったり、設定を変えたりする場所です。

STEP 2フォームを作成する

左メニューの「Snow Monkey Forms」を開くと、作ったフォームの一覧が表示されます。まだ何も作っていないので、最初は空です。「新規投稿を追加」をクリックして、新しいフォームを作ります。

新しいフォームの編集画面が開きます。ここには最初から、「お名前」「Eメール」「メッセージ」の3つの入力欄が用意されています。お問い合わせフォームとしては、この3つがあれば十分です。今回は、この項目のまま進めます。

いちばん上の「タイトルを追加」に、フォームの名前を入れます。ここでは「お問い合わせフォーム」としました。この名前は管理用のもので、あとで固定ページにフォームを置くとき、どのフォームかを選ぶ目印になります。

STEP 3確認画面を設定する

お問い合わせフォームは、送信までが3つの画面に分かれています。入力画面（内容を書き込む画面）、確認画面（書いた内容を見直す画面）、完了画面（送信が終わったことを知らせる画面）の3つです。

まん中の確認画面は、訪問者が入力画面で「確認画面へ」を押したときに表示され、自分が入力した内容をもう一度見せてくれます。メールアドレスの打ち間違いや、書きかけのまま送ってしまうといったミスに、送信の前に本人が気づけます。この確認画面を、使う設定にしておきます。

編集画面の右上にある「フォーム設定を開く」をクリックします。すると、右側に設定のパネルが開きます。

「確認画面を使用する」をオンにします。あわせて「プログレストラッカー」もオンにすると、いま入力画面・確認画面・完了画面のどこにいるかを示す帯が、フォームの上に表示されるようになります。

これで、お問い合わせフォームの基本の形と、確認画面の準備ができました。続いて、届いた問い合わせを受け取るためのメール（通知メールと自動返信メール）を設定していきます。

通知メールと自動返信メールを設定する

お問い合わせフォームができたら、届いた問い合わせをメールで受け取れるように設定します。設定するメールは2種類です。ひとつは、問い合わせがあったことをサイトの管理者（自分）に知らせる通知メール。もうひとつは、問い合わせてくれた相手へ自動で送る自動返信メールです。どちらも、フォームの編集画面で「フォーム設定を開く」を押したときの、右側のパネルで設定します。

メールの件名や本文には、波かっこで囲んだ「変数」を使えます。フォームに入力された値が、送信されるときにそこへ差し込まれます。よく使うのは次の4つです。

• {fullname}：お名前の欄に入力された名前が入ります。
• {email}：Eメールの欄に入力されたメールアドレスが入ります。
• {message}：メッセージの欄に入力された本文が入ります。
• {all-fields}：入力されたすべての項目を、まとめて差し込みます。

STEP 1通知メール（管理者宛）を設定する

まず、問い合わせを自分が受け取るための通知メールです。「管理者宛メール」の欄で、宛先・件名・本文・返信先の4つを設定します。

宛先（To）には、問い合わせを受け取りたい自分のメールアドレスを入れます。

件名は、受け取ったときにひと目で内容が分かるものにします。ここでは「【mt-style.com】お問い合わせ通知」としました。先頭にサイト名（【mt-style.com】）を付けているのは、複数のサイトを運営していると、件名だけではどのサイト宛の問い合わせか分かりにくくなるためです。サイト名を入れておくと、見分けがつきます。

本文（Body）には、問い合わせが届いたことと、その中身を、読みやすく並べて書きます。ここで変数（{fullname} のような波かっこの部分）を使うと、送信されたときに、実際に入力された名前・メールアドレス・メッセージが、その場所に差し込まれます。たとえば、次のように書いておきます。

コピー

お問い合わせがありました。

お名前: {fullname}
メールアドレス: {email}
お問い合わせ内容: {message}

この文面は、そのままコピーして貼り付けて使えます。こうしておくと、届いた通知メールには「お問い合わせがありました。」に続けて、入力された名前・メールアドレス・お問い合わせ内容が順に並びます。項目ごとに整理されるので、内容がひと目で読み取れます。

最後に、Reply-To（返信先）に {email} を入れます。こうしておくと、届いた通知メールにそのまま返信するだけで、問い合わせてくれた相手に返事が届きます。

FROM（送信元）は空欄のままでよい

FROM（送信元）は、空欄のままでかまいません。空欄のときは、サイトと同じドメインのアドレス（wordpress@自社ドメイン）から送られます。ここに自分のGmailなどの別のドメインのアドレスを入れてしまうと、迷惑メールと判定されたり、うまく送れなかったりする原因になります。FROMには何も入れないでおきましょう。

STEP 2自動返信メールを設定する

次に、問い合わせてくれた相手へ自動で送る、自動返信メールです。「自動返信メール」の欄で設定します。

宛先（To）は {email} のままにします。フォームに入力されたメールアドレス宛に届く、という意味です。件名は、受け取った相手に分かるように整えます。ここでは「【mt-style.com】お問い合わせを受け付けました」としました。

本文（Body）には、お礼と、受け付けた内容を書きます。冒頭で {fullname} を使うと、相手の名前で始まるあいさつになります。次の文面を、そのままコピーして使えます。

コピー

{fullname}様

この度は、お問い合わせいただき、ありがとうございます。

以下の内容でお問い合わせを受け付けました。

お名前：{fullname}
メールアドレス：{email}
お問い合わせ内容：{message}

担当者より、追ってご連絡いたします。
今しばらくお待ちくださいませ。

https://mt-style.com/

----- このメールは自動で送信されています。

「https://mt-style.com/」の部分は、自分のサイトのURLに置き換えてください。こうしておくと、相手には、その人の名前で始まるあいさつと、送信された内容の控えが届きます。問い合わせた人が、たしかに受け付けられたと分かって安心できます。

送信者（差出人名）には、サイトの窓口の名前を入れておきます。ここでは「【mt-style.com】運営事務局」としました。受け取った相手に、差出人としてこの名前が表示されます。

自動返信メールの返信先には {email} を入れない

自動返信メールのReply-To（返信先）とFROM（送信元）は、空欄のままでかまいません。とくに、Reply-Toに {email} を入れないよう気をつけます。このメールは相手に宛てて送るものなので、Reply-Toに {email} を入れると、返信先が相手自身になってしまい、意味がなくなります。返信を受けたい連絡先があるときだけ、そのアドレスを入れます。

これで、問い合わせを受け取る通知メールと、相手へお礼を伝える自動返信メールがそろいました。続いて、作ったフォームを公開して、固定ページに設置していきます。

フォームを公開して固定ページに設置する

メールの設定まで終わったら、フォームを公開して、実際にサイトへ置きます。まずフォームを公開し、そのあとでお問い合わせ用の固定ページを作って、そこにフォームを埋め込みます。お問い合わせのように、いつも同じ場所に置いておきたいページは、投稿ではなく固定ページで作ります（「投稿」と「固定ページ」の違い でもふれています）。

STEP 1フォームを公開する

フォームの編集画面の右上にある「公開」ボタンを押します。

確認の小窓が出たら、もう一度「公開」を押します。これで公開が確定します。

フォームが公開されると、ボタンが「保存」に変わります。これで、フォームを固定ページに置けるようになりました。

STEP 2固定ページを作ってフォームを置く

左メニューの「固定ページ」→「固定ページを追加」を開いて、新しい固定ページを作ります。

いちばん上のタイトルを「お問い合わせフォーム」にします。

本文にフォームを埋め込みます。左上の「＋」ボタンを押して、ブロックを追加します。

検索欄に「snow」と入力すると、「Snow Monkey Form」というブロックが出てきます。これをクリックして、本文に追加します。

ブロックが追加されると、その中に「フォームを選択してください」というプルダウンが出ます。

プルダウンを開いて、さきほど作った「お問い合わせフォーム」を選びます。

次に、このページのURL（スラッグ）を整えます。いったん「下書き保存」を押すと、右側の設定に「スラッグ」の欄が出てきます。最初は日本語のタイトルがそのまま入っています。

スラッグを、半角の英字で contact に変えます。こうすると、このページのURLは「（サイトのドメイン）/contact/」の形になり、分かりやすく覚えやすいアドレスになります。

補足：スラッグとは

スラッグとは、そのページのURLの末尾になる文字列のことです。ここで contact にしたので、このページのURLは「https://（サイトのドメイン）/contact/」になりました。短くて、何のページかがひと目で分かります。

スラッグは日本語のままでも設定できます。ただし、日本語はURLの中では「%E3%81%93%E3%82%93…」のような記号の並びに変換される仕組みになっていて、そのままでは長く読みにくいURLになります。SNSやメールで人に伝えるときにも、何のページか分かりづらくなってしまいます。

こうした理由から、スラッグは英数字で、短く意味の分かるものにしておくのがおすすめです。検索エンジンにも、内容の分かる英数字のスラッグのほうが伝わりやすいとされています。日本語のスラッグが大きな問題になるわけではありませんが、共有のしやすさと分かりやすさのために、英数字で決めておくと安心です。

スラッグが contact になったのを確認したら、右上の「公開」ボタンを押します。

フォームのときと同じように、確認の小窓が出たら、もう一度「公開」を押します。

公開できたら、実際のページを開いて、フォームがきちんと表示されているか確認します。お名前・Eメール・メッセージの入力欄と、送信の前に見直す確認画面への「確認画面へ」ボタンが並んでいれば、設置は完了です。

これで、お問い合わせフォームがサイトに設置できました。訪問者がこのページから送信すると、通知メールが自分に届き、相手には自動返信メールが送られます。

固定ページの見た目を整える

「お問い合わせフォーム」などの固定ページで作成するページは、通常、シェアされることはほとんどないので、表示されるシェアボタンが邪魔に感じる方もいらっしゃるかもしれません。使用しているテーマが「Cocoon」であれば、「Cocoon設定」→「SNSシェア」で、固定ページのシェアボタンを非表示にできます。

「表示ページ」という項目で、「固定ページ」のチェックを外せば、シェアボタンは表示されなくなります。

また、シェアボタンの設定画面は「トップシェアボタン設定」と「ボトムシェアボタン設定」の2つに分かれています。「トップシェアボタン設定」が反映されるのが画面上部のシェアボタンで、「ボトムシェアボタン設定」が反映されるのが画面下部のシェアボタンという仕組みになっています。

ページ下部のシェアボタンも外したい場合は、さらに「ボトムシェアボタン設定」の「表示ページ」項目まで画面を下にスクロールさせて、「固定ページ」のチェックを外しておきましょう。

「トップシェアボタン設定」「ボトムシェアボタン設定」、両方ともシェアボタンを非表示にする設定を行うと、このように、すっきりとしたお問い合わせフォームになります。

さらに、画面下の「フォローボタン」も非表示にすることができます。「SNSフォロー」→「表示ページ」のチェックを外すと非表示になります。

なお、画面右下には、このページを作成した人を意味する「投稿者名」が表示されていますが、こちらも非表示にすることができます。「投稿者名」を非表示にするには、まず「本文」のタブを選択して、画面を下にスクロールさせます。

画面の下の方にある「投稿関連情報」という項目で、「投稿者名を表示する」のチェックを外せば非表示になります。

ただし、「シェアボタン」や「フォローボタン」の場合と異なり、この設定は「固定ページ」機能で作ったページだけでなく、「投稿」機能で作ったページにも反映されます。つまり、メインで更新しているブログ記事やコラム記事、レビュー記事などに「投稿者名」が表示されなくなるのです。

ただ、私は「投稿者名」だけを表示させることに有用性を感じていませんし、別の方法で投稿者の情報を表示させることもできるので、ここではいつも非表示にしています。

最後に、画面右上の「日付」ですが、こちらも非表示にできます。設定場所は、先ほどの「投稿者名」と同じく、「本文」→「投稿関連情報」にあります。

こちらも「投稿者名」と同じく、非表示にすると「投稿」機能で作成するブログ記事やコラム記事、レビュー記事なども日付が表示されなくなります。

記事に日付を表示するかどうかは考え方が分かれるところですが、私は基本的に非表示でもよいと考えています。というのも、場合によっては、日付があることで「古い情報」と見なされてしまい、せっかく内容がよいものであっても読まれずに終わってしまう可能性があるからです。もちろん、情報の鮮度が大事な記事を主に発信しているのであれば、日付を表示すべきです。ご自身のサイトの運営スタイルによって、日付を表示するかしないかを決めるとよいと思います。

なお、「追加CSS」という機能を使うと、「投稿ページには日付を表示させ、固定ページには日付を表示させない」ということもできます。「追加CSS」の機能を使うには、まず画面左側の「外観」→「カスタマイズ」をクリックします。

次に「追加CSS」をクリックします。

「追加CSS」の画面が表示されたら、画面左側を下にスクロールさせます。左側に数字の「1」と書かれた入力欄があるので、この入力欄に「CSSコード」を入力することで、固定ページの日付だけを非表示にするなど、細かい設定が行えます。

具体的な手順としては、次のCSSコードを入力して、「公開」ボタンをクリックすると、固定ページの投稿日、更新日、投稿者名が非表示になります。

投稿ページでは日付や投稿者名を表示させ、固定ページは日付や投稿者名を表示させたくない場合は、次のCSSコードを、そのままコピーしてお使いください。「日付だけ非表示にさせて投稿者名は表示させる」といったことも可能なので、いくつかのパターンのCSSコードも記載しておきます。必要に応じて使い分けてください。

/*固定ページの投稿日、更新日、投稿者名を非表示にする*/
.page .date-tags,
.page .author-info {
    display: none;
}

/*固定ページの投稿日、更新日を非表示にする*/
.page .date-tags {
    display: none;
}

/*固定ページの投稿日を非表示にする*/
.page .post-date {
    display: none;
}

/*固定ページの更新日を非表示にする*/
.page .post-update {
    display: none;
}

/*固定ページの投稿者名を非表示にする*/
.page .author-info {
    display: none;
}

これで、お問い合わせページの見た目が整いました。続いて、フォームに届く迷惑な自動送信（スパム）を防ぐ、セキュリティの設定を行っていきます。

フォームのセキュリティ設定（Cloudflare Turnstile）

お問い合わせフォームを設置すると、残念ながら海外からの迷惑メール（スパム）が届くことがあります。原因の多くは、人間ではなく自動で動くプログラムがフォームに入力して送信してくるためです。

こうした不正なアクセスを防ぐために設定しておきたいのが「Cloudflare Turnstile（クラウドフレア ターンスタイル）」です。これは、サイトに訪れたユーザーが人間か、それとも迷惑メールを送りつけるようなプログラムかを判別してくれる、Cloudflare社が提供する無料のセキュリティサービスです。

Snow Monkey Forms は、この Cloudflare Turnstile に標準で対応しています。ここでは、Cloudflareでアカウントを作成してキーを取得し、Snow Monkey Forms に設定するまでの手順を解説していきます。

まずはじめに、Cloudflareの公式サイト（https://dash.cloudflare.com/sign-up）にアクセスし、アカウントを登録します。Googleアカウントをお持ちであれば、入力の手間なく簡単に登録できますので、今回はその方法をご紹介します。

すでにブラウザでGoogleアカウントにログインしている場合は、そのまま使いたいアカウントを選択するだけで登録が完了します。

もしログインしていない場合は、メールアドレスとパスワードを入力してログインしましょう。

続いて、CloudflareがGoogleアカウントの基本情報（名前やメールアドレスなど）にアクセスするための許可画面が表示されますので、「次へ」をクリックします。

これで登録が完了し、自動的にCloudflareの管理画面に移動します。

次に、Turnstileの設定画面を開きます。画面左側のメニューから、「保護と接続」の中にある「アプリケーション セキュリティ」をクリックします。

「アプリケーション セキュリティ」の下にメニューが開きます。その中の「Turnstile」をクリックします。

「Turnstile ウィジェット」の画面が表示されます。「ウィジェットを手動で追加」をクリックします。

「ウィジェットを追加」の画面が表示されます。まず「ウィジェット名」に、自分でわかりやすい名前を入力します。あとで見分けるための名前なので、何でも大丈夫です（例：mt-style お問い合わせ）。

名前を入力したら、その下の「ホスト名管理」で、このウィジェットを使うサイトのドメインを登録します。「ホスト名の追加」をクリックします。

「ホスト名の追加」の画面が開きます。「カスタム ホスト名を追加する」の欄に、Turnstileを導入したいサイトのドメイン名を入力し、「追加」をクリックします。

このとき入力するのは「ドメイン名」です。「https://」から始まるURLをそのまま貼り付けると、「有効なドメインを入力してください」というエラーが出て追加できませんので、ご注意ください。

ドメインを追加すると、「選択されたホスト名」に、入力したドメインがチェックされた状態で表示されます。そのまま「保存」をクリックします。

ウィジェットの設定画面に戻ります。「ホスト名管理」に、追加したドメインが表示されているのを確認します。その下の「ウィジェット モード」は、推奨の「管理」が選ばれたままで問題ありません。さらに下の「事前クリアランス」も、初期状態（オフ）のままで大丈夫です。最後に、画面右下の「作成」をクリックします。

「作成」をクリックすると、「サイトキー」と「シークレットキー」の2つが発行されます。このあと Snow Monkey Forms 側で入力するので、どちらもコピーしておきましょう。シークレットキーは、あとからでももう一度表示できます。

キーをコピーできたら、WordPressの管理画面に移動します。左メニューの「Snow Monkey Forms」にマウスを合わせ、開いたメニューから「Cloudflare Turnstile」をクリックします。

「Cloudflare Turnstile」の設定画面が表示されます。「Site Key」に先ほどのサイトキーを、「Secret Key」にシークレットキーを、それぞれ貼り付けます。「ウィジェットの位置」は、初期設定の「フォームの後」のままで問題ありません。入力できたら「変更を保存」をクリックします。

「設定を保存しました。」と表示されれば、設定は完了です。

最後に、お問い合わせフォームを設置したページを開いて、動作を確認しましょう。フォームの下にCloudflareのウィジェットが表示され、「成功しました！」と緑色のチェックがついていれば、Turnstileは正しく機能しています。これで、迷惑メールを送りつける自動プログラムをブロックできるようになりました。

以上で、Cloudflare Turnstile によるフォームのセキュリティ設定は完了です。お問い合わせフォームを、より安心して運用できるようになりました。

お問い合わせフォームをサイトに設置する

お問い合わせフォームを固定ページとして公開しただけでは、サイトを訪れた方はそのページにたどり着けません。フッター（サイトの最下部）やヘッダー（サイトの上部）などのメニューに設置することで、はじめて訪問者が使えるようになります。

ここでは、まず一般的に設置されることが多いフッターメニューへの追加方法からお伝えします。

WordPressの管理画面の左メニューから、「外観」→「メニュー」をクリックします。

「メニュー」画面が表示されます。この画面でメニューを作成していきます。

まず「メニュー名」の入力欄に、作成するメニューの名前を入力します。自分がわかりやすいものであれば何でもよいのですが、今回は「フッターメニュー」と入力します。続いて、「メニュー設定」の「メニューの位置」で「フッターメニュー」にチェックを入れます。

「メニューの位置」の「フッターメニュー」にチェックが入ったのを確認して、「メニューを作成」をクリックします。

メニューが作成されました。次に、左側の「メニュー項目を追加」の「固定ページ」から、先ほど作った「お問い合わせフォーム」にチェックを入れ、「メニューに追加」をクリックします。

右側の「メニュー構造」に「お問い合わせフォーム」が追加されます。このままでもかまいませんが、メニューに表示される文字は短いほうがすっきりするので、今回は「お問い合わせ」に変えてみましょう。追加された項目の右側にある「▼」をクリックします。

項目の詳細が開きます。「ナビゲーションラベル」という欄が、実際にメニューに表示される文字です。初期状態では「お問い合わせフォーム」となっています。

「ナビゲーションラベル」を「お問い合わせ」に書き換え、下の「メニューを保存」をクリックします。

「フッターメニュー を更新しました。」と表示されれば、保存は完了です。

実際のサイトを表示してみると、フッター（サイトの最下部）に「お問い合わせ」が表示されています。

続いて、ヘッダーメニューも作成してみましょう。画面上部に表示されている「新しいメニューを作成しましょう」というリンクをクリックします。

フッターメニューを作成したときと同じ要領で、「メニュー名」に「ヘッダーメニュー」と入力します。今回は「メニューの位置」で「ヘッダーメニュー」と「ヘッダーモバイルメニュー」にチェックを入れ、「メニューを作成」をクリックします。

フッターのときと同じように、「固定ページ」から「お問い合わせフォーム」を追加し、ラベルを「お問い合わせ」に整えてから、「メニューを保存」をクリックします。

実際のサイトを表示すると、今度はヘッダー（サイトの上部）に「お問い合わせ」が表示されます。まだメニューが1つしかないので中央に表示されていますが、今後メニューが増えると位置も変わってきます。

続いて、トップページに戻るための「TOP」というメニューも追加してみましょう。「TOP」メニューは、「カスタムリンク」を使って作成します。左側の「メニュー項目を追加」から「カスタムリンク」をクリックします。

「URL」の入力欄に、自分のサイトのトップページのURLを入力します。「リンク文字列」には「TOP」と入力し、「メニューに追加」をクリックします。

右側の「メニュー構造」に「TOP」が追加されます。ここに並んでいるメニューは、上にあるものほどサイトでは左側に表示されます。「TOP」は一番左に表示させたいので、ドラッグ＆ドロップで一番上に移動させます。

「TOP」が一番上、その下に「お問い合わせ」という並びになったら、「メニューを保存」をクリックします。

実際のサイトを表示すると、ヘッダーに「TOP」「お問い合わせ」の2つのメニューが並んで表示されます。

これで、お問い合わせフォームへの入り口が、フッターとヘッダーの両方に用意できました。訪問者が、どのページからでも迷わずお問い合わせページにたどり着けるようになりました。

おわりに

ここまで、WordPressに「お問い合わせフォーム」を設置する手順を、一通りご紹介してきました。

最初は「なんだか難しそう…」と感じた方もいるかもしれませんが、Snow Monkey Forms を使えば、基本的なフォームは意外とシンプルに作成できます。慣れてくると、通知メールや自動返信メールの設定、スパム対策なども自然と扱えるようになり、ぐっと安心感のあるサイトに仕上がっていきます。

お問い合わせフォームは、サイトを訪れてくれた方との大切なやり取りの入り口です。ちょっとした工夫を加えるだけで「きちんと対応してくれそう」という信頼につながり、結果的にサイト全体の印象を良くすることにもつながります。

ぜひ今回の内容を参考にしながら、ご自身のサイトに合ったお問い合わせフォームを整えてみてください。