Snow Monkey Formsでお問合せフォームを作成する

WordPressにSnow Monekey Formsでお問合せフォームを設置しました。

Snow Monkey Formsは、有料テーマSnow Monkeyに合わせて作られたプラグインですが、シンプルな機能、デザインで他のテーマでも使えます。

Emi

当HPで使用中の「SWELL」でも問題なく設定できました。

この記事ではSnow Monkey Formsでお問合せフォームを作成する手順を紹介します。

Snow Monkey Formsの特徴

WordPress.org 日本語

Snow Monkey Forms Snow Monkey Forms はブロックエディターのためのメールフォームプラグインです。

確認画面付きのシンプルなお問合せフォームを使いたい方におすすめです。

Snow Monkey Formsでお問合せフォームを作成する手順

1. 入力画面でお問い合わせフォームの項目を追加する
2. フォーム設定でデザイン／確認画面の有無などフォームの設定をする
3. フォーム設定で自動送信メールを設定する
4. 投稿／固定ページにお問い合わせフォームを埋め込む

プラグインのインストール

プラグインからSnow Monkey Formsをインストールすると、管理画面のメニューにSnow Monkey Formsが追加されます。

お問合せフォームの作成

管理画面 > Snow Monkey Forms > 新規追加

Snow Monkey Formsのメニューから新規追加をすると、お問合せフォームの作成画面にうつります。

初期表示ではお名前、Eメール、メッセージの入ったお問合せフォームが作成されます。

タイトルは「ブログお問い合わせフォーム」など、わかりやすい名前をつけておきましょう。

入力項目を追加する

1. ブロックを追加することでお問い合わせの行を追加します
2. 入力項目のラベルを入力します
3. 内側の＋を追加し、Snow Monkey Formsブロックを追加します

Snow Monkey Formsで用意されている入力項目

入力項目のバリデーションや属性を設定

続いて、入力欄のブロックを設定して、右上の歯車ボタンをクリックしましょう。

必須入力チェック

必須入力にしたい場合はバリデーション：必須にチェックを入れましょう。

属性

属性
name欄に入力されている文字列は、自動返信メールに使います。

初期の入力項目は

• 名前→fullname
• Eメール→email
• メッセージ→message

となっています。

新しく項目を追加した場合は、属性「name」に、忘れず名前を変更しておきましょう。
自動返信メールの文面で使用します。

そのほか、属性に設定できる項目

セレクトボックス／チェックボックス／ラジオボタンの選択肢の設定

セレクトボックスなど複数の選択肢がある入力項目は、歯車をONにして右側の設定欄で選択肢を入れていきます。

完了画面の設定

入力画面の下に完了画面のメッセージ欄があります。

クリックすると、ブロックエディターで編集できます。

完了画面のメッセージ例

お問い合わせいただきありがとうございました。
折り返し、担当者よりご連絡いたしますので、恐れ入りますが、しばらくお待ちください。

ご入力いただいたメールアドレス宛に受付完了メールをお送りしましたのでご確認ください。
完了メールが届いていない場合には、メールアドレスが誤っているか、迷惑メールフォルダ等に振り分けられている可能性がありますので、再度ご確認をお願いいたします。

フォーム設定を開く

フォーム設定は、入力画面の右にある「フォーム設定を開く」ボタンをクリックすると、右側に表示されます。

フォーム設定では確認画面、プログレストラッカー、自動返信メールの設定ができます。

確認画面／プログレストラッカー

確認画面を使用する：送信前に、確認画面を表示します。

プログレストラッカーを使用する：入力→確認→完了と進行状況を表示できます。

プログレストラッカー、確認画面を追加するとこのような表示になります。

自動返信メール

問い合わせ者宛と管理者宛に自動送信されるメールの内容を設定できます。

To

自動返信メールの宛先のメールアドレスを入力します

件名

自動返信メールの件名を入力します

Body(本文)

メールの本文を入力します。入力値の属性(name)を使うと、入力値を本文内に表示できるようになります。

From(メールアドレス)

初期設定では「wordpress＠ドメイン名」になっています。お好みのメールアドレスに変更できます。

送信者

初期設定では「wordpress」になっています。お好みの名前に変更できます。

件名には自動返信メールのタイトルを入力します。

件名の記載例

【株式会社XXX】お問い合わせありがとうございました。

Body（メールの本文）は初期値は{all-fields}となっています。

そのままだとこのように簡素なメール文章になってしまいます。

fullname: 
〇〇〇

email: 
〇〇〇

message: 
〇〇〇

入力項目の属性値の名前を使って、わかりやすいメールの文章にしましょう。

Body(本文)の記載例

※このメールはシステムからの自動返信です

{fullname} 様

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

送信いただきました内容を確認の上、担当者よりご連絡差し上げます。
なお送信いただいた内容は、以下のとおりです。

———————————————-
■お名前
{fullname}
■フリガナ
{furigana}
■メールアドレス
{email}
■お問い合わせ内容
{message}
———————————————-

以上、よろしくお願い致します。

株式会社　XXX
Email: info@XXX.co.jp
Web: https://XXX.co.jp

管理者宛の通知メールも同様に設定できます。

To

自動返信メールの宛先のメールアドレスを入力します

件名

自動返信メールの件名を入力します

Body(本文)

メールの本文を入力します。入力値の属性(name)を使うと、入力値を本文内に表示できるようになります。

From(メールアドレス)

初期設定では「wordpress＠ドメイン名」になっています。お好みのメールアドレスに変更できます。

送信者

初期設定では「wordpress」になっています。お好みの名前に変更できます。

件名の記載例

【HP】お問い合わせ受付のお知らせ

Body(本文)の記載例

HPから問い合わせがありました。
※このメールはシステムからの自動返信です

———————————————-
■お名前
{fullname}
■フリガナ
{furigana}
■メールアドレス
{email}
■お問い合わせ内容
{message}
———————————————-

お問い合わせフォームをページに追加

お問合せフォームを追加したい投稿／固定ページの編集画面を開きます。

「Snow Monkey Forms」のブロックを追加します。

プルダウンから作成したフォームを選択します。

お問合せフォームがページに埋め込まれます。

お問い合わせフォームの上に、注意事項などを書いておくといいかもしれませんね。

デザインの変更

フォームスタイル

フォーム設定のフォームスタイルから基本のデザインを選ぶことができます。

デザインは「Simple Table 」「Business」「Letter」と３種類用意されています。

Simple Table

Business

Letter

Google Recaptchaの設定

お問合せフォームのスパム対策のため、Google reCAPTHCAを設定します。

Google reCAPTCHAのサイトにアクセスします。

v3Admin Consoleをクリックします。

reCAPTHCAを導入するサイトの情報を入力します。

ここで、サイトキーとシクレットキーをコピーします。

Snow Monkey Forms > reCAPTCHA

コピーしたサイトキーとシクレットキーを貼り付けて、保存して完了。

以上で、お問合せフォームの設置は完了です。
ブロックエディタでお問合せフォームの項目を作成できるのがいいですね♪