おすすめ！フォーム用プラグインSnow Monkey Formsの使い方

WordPressで作られたWebサイトのお問い合わせフォーム用プラグイン、
どれを使うか迷ったり悩んだりしていませんか？

有名なフォーム系プラグインだと、mw wp form（開発終了）と Contact Form 7 が2大定番かなと思います。
Contact Form 7 は機能も豊富で多くの要望に応えられるプラグインですが、mw wp form はすでに開発が終了しており、実質的に選択肢がほぼ1つだけというのは少し不安がありました。

また個人的には追加プラグインなしで確認画面が付けられるmw wp formを好んで使っていました。
そこで気になっていたのが、mw wp form の開発者・キタジマさんが作られたフォームプラグイン
「Snow Monkey Forms」

ブロックエディタタイプのフォームなので、あまり自由が効かないのかな…と勝手に思い込んでいたのですが、
実際に使ってみると、かなり良かったです！

Snow Monkey Formsについて、特徴や使い方についてご紹介していきます。

Snow Monkey Formsの良かった点

• mw wp formと同じく追加プラグインなしで確認画面が付けられる
• 見た目のデザインをCSSで問題なく細かく再現できる
• 添付の画像やファイルを確認画面が必要な場合も使用できる（Contact Form 7の場合、追加プラグインで確認画面を付けると添付が使えない）
• 個人的に使いやすかったmw wp formの管理画面のUIが似ている
• 開発やサポートフォーラムが活発

■WordPressのフォームプラグイン比較

※mw wp formは開発が終了しているため、新規での使用は推奨しません。

Snow Monkey Formsの使い方

Snow Monkey Formsの使い方について詳しく解説していきます。

インストール

プラグインの検索欄に「Snow Monkey Forms」と入力
「今すぐインストール」ボタンをクリック
「有効化」ボタンに変わるのでクリックして有効化する

管理画面メニューに「Snow Monkey Forms」が追加されるのでクリック

「投稿を追加」ボタンクリックでフォーム作成画面が出てきます。

フォーム作成

まずタイトルを入力します。今回は「お問い合わせ」にしました。

「フォーム設定を開く」ボタンをクリックすると右側に設定画面が出てきます。

①確認画面を作る時は、ここでオンにするだけでOK
②プログレストラッカーを表示したい場合はここで設定できます

③フォームスタイルは4タイプから選択可能

フォームスタイルは4タイプから選択できます。
・デフォルト
・シンプルテーブル
・ビジネス
・レター

実装したいデザインに近いものを選んで、細かい部分はCSSで調整していく形が良いと思います。
今回はシンプルテーブルで作成します。

④各ボタンのラベルを編集できます。

それではフォームを作成していきましょう。

フォーム項目の追加

デフォルトで入っている項目以外に必要なブロックを追加していきます。

追加したい項目の下にカーソルを合わせ左側の＋マークから「項目」ブロックを追加し、
ラベルに「フリガナ」等、追加したい項目名を入力します。

※カーソルを合わせても＋マークが中々出てこない場合は、今ある項目ブロックを選択し、3点リーダーから「後に追加」をクリックします。
そのあと「項目」ブロックを選べばOKです。

「項目」ブロック内の「＋」ボタンをクリック、または左側のブロックメニューの下の方にある「Snow Monkey Forms」から入力欄のブロックを選びます。

今回はフリガナ欄を追加したいので「テキスト」を選びます。

右側の設定画面でname属性、プレースホルダー、必須設定などを入力していきます。

name属性はメール本文に出力する時にも使うので、英数字でわかりやすい名前を付けておくと後から管理しやすいです。

例）
お名前 → fullname
フリガナ→kana
メールアドレス → email
電話番号 → tel
お問い合わせ内容 → message

セレクトボックス・ラジオボタンの設定

セレクトボックスやラジオボタンを追加した場合は、右側の設定画面で選択肢を入力します。

選択肢は、以下のように入力します。

"選択肢1" : "選択肢1"
"選択肢2" : "選択肢2"
"選択肢3" : "選択肢3"

左側が送信される値で、右側が画面に表示される文字です。

セレクトボックスで先頭に「選択してください」を表示したい場合は、以下のように左側の値を空にします。

"" : "選択してください"
"選択肢1" : "選択肢1"
"選択肢2" : "選択肢2"
"選択肢3" : "選択肢3"

メール設定

フォーム項目を作成したら、続いてメール設定を行います。
「フォーム設定を開く」をクリックし、右側の設定画面から設定します。

管理者宛てメール

管理者宛メールは、サイト運営者側に届くメールです。

TO（メールアドレス）には、問い合わせ内容を受け取りたいメールアドレスを入力します。

件名は、管理しやすいように分かりやすいものを入力します。

BODYには、デフォルトで

{all-fields}

が入っています。

{all-fields} は、フォームに入力された内容をまとめて出力してくれるタグです。

そのままでも送信内容は確認できますが、表示内容を調整したい場合は、各項目で設定したname属性を使って本文を作成します。

（例）

■お名前
{fullname}

■フリガナ
{kana}

■メールアドレス
{email}

■電話番号
{tel}

■お問い合わせ内容
{message}

自動返信メール

フォームを送信した人にメールを送りたい場合は、「自動返信メール」も設定します。

TO（メールアドレス）には、メールアドレス欄で設定したname属性を入力します。

メールアドレスのname属性を email にしている場合は、

{email}

と入力します。

件名、BODY、FROMなども必要に応じて設定します。

本文には、管理者宛メールと同じようにname属性を使って入力内容を表示できます。

完了画面の設定

メール設定の下にある「完了画面」欄で、送信後に表示する内容を設定できます。

初期状態では完了メッセージが入っていますが、必要に応じて文言を変更します。

お問い合わせフォームであれば、

「お問い合わせありがとうございました。
内容を確認のうえ、担当者よりご連絡いたします。」

のような内容を入れておくと良いと思います。

入力した内容は、フォーム送信後の完了画面に表示されます。

よくあるつまずきポイント

① 受信メールに入力内容が表示されない

タグを設定したのに受信メールで空欄になっている場合、タグ内のname属性を確認してみてください。

{ の直後にスペースが入っていたり、フォームのフィールドで設定したname属性と一致していないと、入力内容が表示されません。

✗ { fullname} ← {の直後にスペース
✗ {full_name} ← フィールドのname属性はfullname
✓ {fullname} ← スペースなし・name属性と一致

スペルミスやアンダースコアの有無など、1文字違うだけで動作しないので注意してみてください。

② ローカル環境で完了画面が確認できない

MAMPなどのローカル環境でフォームを確認している場合、送信ボタンを押してもエラーが表示され、完了画面まで進めないことがあります。
これはローカル環境ではそのままではメール送信ができないためです。
ローカル環境で完了画面の表示を確認したい場合は、検証中のみメール送信をスキップするコードを追加します。

// ローカル確認用：管理者宛メール送信をスキップ
add_filter(
'snow_monkey_forms/administrator_mailer/skip',
function () {
return true;
}
);

// ローカル確認用：自動返信メール送信をスキップ
add_filter(
'snow_monkey_forms/auto_reply_mailer/skip',
function () {
return true;
}
);

自動返信メールを設定していない場合は2つ目のコードは省いてもOKです。
このコードを追加すると、実際にはメールは送信されませんが、送信完了画面の表示を確認できるようになります。

※※本番環境ではメールが送信されなくなってしまうため、公開前に必ず削除してください。

WordPressのカスタマイズについては、ACF Proでカスタムブロックを作成する方法もあわせて参考にしてください。

まとめ

今回は、フォーム用プラグイン「Snow Monkey Forms」についてご紹介しました。

確認画面付きのフォームを追加プラグインなしで作れるので、通常のお問い合わせフォームであればかなり使いやすいと思います。

mw wp formの代わりになるプラグインを探している方は、ぜひ一度使ってみてください。

ENVY DESIGNではWordPressを使ったホームページ制作を承っています。
フォーム設計を含めたサイト構築についてはお気軽にご相談ください。