Written by TSUYOSHI

【簡単】 Snow Monkey Forms の使い方・設定方法 【WordPressお問合せフォーム】

WordPress

本記事では、WordPressプラグインの「Snow Monkey Forms」を使ったお問い合わせフォームを作る方法を解説しています。
基本的な設定方法や使い方を図解で分かりやすく説明しています。

この記事を書いている僕は、エンジニア歴が約4年で、WordPressのテーマ作成については、新規作成とメンテナンスを含めると100サイト以上は対応した経験があります。

本記事を読むことによって、「Snow Monkey Forms」を使い、ブロックエディターでお問い合わせフォームが簡単に作る方法がわかるようになります。

Snow Monkey Forms の使い方・設定方法


Snow Monkey Forms は無料で使えるWordPressプラグインで、お問い合わせフォームを簡単に作成することができます。

Snow Monkey Formsの設定方法を解説していきます。

Snow Monkey Formsの特徴

「Snow Monkey Forms」はGutenbergブロックエディター用のお問い合せフォームプラグインであり、クラシックエディターでは使えません。

よく使われるお問い合わせフォームプラグインの「Contact Form 7」や「MW WP Form」とは大きく違うところはないと思いますが、ブロックエディターを使って作成するところに違いがあります。

「MW WP Form」を作った作者 キタジマタカシ氏 の新しいプラグインで、MW WP Formよりは機能は少ないですが十分であり、最新のWordPressに対応していて安心です。

使う上での注意点

1. CSSで設定はした方がよい

製作者が販売しているWordPressテーマの「Snow Monkey」以外でも利用は可能です。ただし、CSSでの装飾が通常は必要になると思います。このあたりはどのプラグインを使っても調整はだいたい必要なので問題ないかと思います。

2. クラシックエディターでは使えない

Snow Monkey Formsはブロックエディターを使って対応するのでクラシックエディターでは使えません
納品用ならクライアントにクラシックエディターを使うかどうかを事前に確認した方がよいと思います。もしクラシックエディターを使う可能性があるクライアントの場合は、「MW WP Form」を使った方がよいかもしれないです。

大まかな流れは以下の通りです。

  • Snow Monkey Formsのインストール方法
  • Snow Monkey Formsの設定方法
  • Snow Monkey Forms用のお問い合わせページを作成する
  • Snow Monkey Formsの動作確認

それでは設定方法を順番に解説していきます。

Snow Monkey Formsのインストール方法

1. WordPress管理画面のプラグイン項目から「新規追加」にて、「Snow Monkey Forms」で検索して、「今すぐインストール」をクリックします。

2. プラグインを有効化します。

これで「Snow Monkey Forms」のインストールは完了です。

Snow Monkey Formsの設定方法

1. 管理画面の左メニューに「Snow Monkey Forms」が追加されているので選択し、「新規追加」をクリックします。

2. 「Snow Monkey Forms」の設定画面が出てきます。タイトルを入力します。
ここでは「お問い合わせフォーム」と入力して進めることにします。

項目を新たに追加する

デフォルトで表示されている「お名前」「Eメール」「メッセージ」以外に項目を追加する設定方法です。

今回は例として、「電話番号」を追加することにします。

項目を追加したい場合は、項目を追加したい位置でマウスを合わせるとホバーした表示で出てくる、中央の「項目を追加」をクリックします。

「ラベル」「説明」を入力します。

枠の外をクリックしてフォーカスを外すと、「文章を入力、または/でブロックを選択」の項目が出てくるので、このブロックをクリックします。

選択ブロックの右下に「+」アイコンがあるので、これをクリックすると、追加できるブロックのリストが表示されます。

「すべて表示」をクリックします。

そうすると今度は、左上の項目が開くので、「Snow Monkey Forms」の項目から、使いたいブロックを選択します。

選択できるブロック

  • email
  • チェックボックス
  • ラジオボタン
  • セレクトボックス
  • テキスト
  • テキストエリア
  • URL
  • Tel
  • ファイル

※今回は電話番号の項目追加をするので「Tel」ブロックを選択します。

「見つかりませんでした」の表示になる時の対処方法

もしここでブロックの項目で「見つかりませんでした」の表示になる時は、再度ブロックを作成し直します。

ブロックの設定にて、段落部分を選択してEnterキーを押し、段落「文章を入力、または/でブロックを選択」をもうひとつ追加します。その上で、「+」アイコンをクリックして、「すべて表示」を再度クリックすると、今度はきちんとブロックが表示されると思います。

これで項目の追加が完了しました。

必須バリデーション設定を追加する

設定項目を開きます。
右上の歯車アイコンをクリックして「ブロック」タブをクリックするか、「フォーム設定を開く」のボタンをクリックして設定を開きます。

今回は例として、「お名前」の項目を必須にしたいと思います。必須にしたいブロックを選択します。

右側の項目に「バリデーション」の項目があるので、「必須」項目をON/OFFするだけで設定が完了します。
※ちなみに「お名前」は初期設定で必須になっています

これで未入力の状態で、フォームから送信すると「入力してください。」とエラー表示が出るようになります。

ちなみに「Snow Monkey Forms」で利用できるバリデーションルールは必須のみのようです。
自作でJavaScriptで入力項目のチェックをすればリアルタイムバリデーションできますし、サーバサイドは「Snow Monkey Forms」で必須チェックのみというのはシンプルで個人的にはいいと思っています。

その他にも、name属性の変更やプレースホルダーの設定ができます。

管理者宛メールのメールアドレスを入力する

「管理者宛メール」項目内の「To(メールアドレス)」は必ず設定するようにします。ご自身のメールアドレスなど受信できるメールアドレスを設定します。

もし管理者宛メールのTo(メールアドレス)を設定をしないと、お問い合わせしてもエラーが表示され、お問い合わせが正常に動作しません。

ちなみに、ここでは詳細は解説しませんが、「管理者宛メール」や「自動返信メール」の詳細設定もすることができます。

送信完了画面のカスタマイズ

「送信完了」は初期設定で「完了しました。」になっているので、このままでもよいですし、必要に応じて修正すればその表示に変更できます。

設定したら、右上の「公開」ボタンをクリックして設定を保存します。

Snow Monkey Forms用のお問い合わせページを作成する

管理者画面の「固定ページ」 > 「新規作成」から、お問い合わせページを作成します。(今回は固定ページでお問い合わせページを作成するものとします)

タイトルを任意で入力します。

次にブロックの追加を行います。「+」アイコンをクリックします。

「Snow Monkey Forms」の項目から「Snow Monkey Forms」ブロックをクリックして追加します。

追加したブロックにプルダウンで選択肢が出てくるので、先ほど作成したフォームを選択します。

必要に応じてパーマリンクの設定を修正します。(右側「文書」タブの「パーマリンク」項目内「URLスラッグ」でスラッグ名を変更します。)

右上の「公開」ボタンをクリックして公開します。

作成したページにアクセスするとお問い合わせフォームができあがっています。

Snow Monkey Formsの動作確認

項目を入力して、確認画面に進みます。

送信完了すると、送信完了のメッセージが表示されます。

管理者にメールが届いています。

ユーザーへの自動返信メールも送られています。
(今回は特にカスタマイズしていないので本来はユーザー向けにもう少し文言を整えた方がよいかと思います。)

ちなみに入力画面にて、何も項目を入力しないと「必須」にした項目がエラーになります。

以上がSnow Monkey Formsの基本的な設定方法の解説でした。

今回利用して思ったのは、「Snow Monkey Forms」の使い勝手がよかったので、WordPressテーマの「Snow Monkey」も機会があれば、今後、購入してレビューしてみたいと思います。

Snow Monkey Formsのさらに詳細な設定については「Snow Monkey Formsのカスタマイズ 【確認画面・スタイルの変更など】」の記事も是非ご覧ください。

【追記】

「Snow Monkey Forms」制作者のキタジマさんに本記事を見てもらえたようでリツイートしてもらえました! 素晴らしいプラグインを無料で提供してもらえて感謝です!

ご参考になれば幸いです。

※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています