Snow Monkey Formsの基本的な使い方を徹底解説
こんにちは、りょうへい(@ooorrr123456)です。
このブログでは、Snow Monkey Forms の詳しい使い方がわからない、実際の案件でどのように使うのかをを知りたいというかたに向けてブログを書いていきます。
このブログを読めばSnow Monkey Formsの基本的な使い方から実際の案件で使った設定などを紹介していきます。
また、今回のブログでは自動返信メールのテンプレも公開いたしますのでぜひ読んでみてください！
それでは早速作り方を見ていきましょう。
→Snow Monkey をまだインストールしていない方はこちら
【ポートフォリオ掲載OK！】Snow Monkeyでプログラミング教室風サイトを作ってみよう
このブログではSnowMonkeyを使ってみたいけど何を作っていいかわからない、SnowMonkeyを使ってポートフォリオサイトを作りたいという方におすすめです。SnomMonkeyを使って、一緒にプログラミング教室風サイトを作っていきましょう！
Snow Monkey Formsをインストールしよう
ここではSnow Monkey Forms をインストールしていきます。
管理画面から「プラグイン」→「新規追加」→検索欄で「Snow Monkey」と検索します。
そこからSnow Monkey Formsを「今すぐインストール」→「有効化」をクリック。
管理画面に「Snow Monkey Forms」と表示されたらインストール完了です。
Snow Monkey Forms を設定していこう
管理画面から「Snow Monkey Forms」→「新規追加」をクリック。
①タイトルに「お問い合わせ」と入力。
②Eメールの欄を「メールアドレス」に変更。
③「お名前」と「メールアドレス」の欄の下に赤い文字で「※必須」と入力。
赤文字にするには「※必須」を選択して、赤い丸のサルのマークをクリック。
そこから「文字色」を選択して、「レッド」を選択で赤い字になります。
最終的にこうなれば完成です。
項目を追加しよう
次は、このフォームに電話番号の入力欄を追加します。
①先程作ったSnow Monkey Formsの「お問い合わせ」からメッセージの下の「＋」をクリックして「すべて表示」をクリック
②追加したら、ラベルの欄に「電話番号」、説明の欄に赤文字で「※必須」と入力。
それから、入力した欄の右側のプラスをクリックして「すべて表示」から「Snow Monkey Forms」の「Tel」を選択。
③追加出来たら、右側のリストから下の画像のように変更します。
バリデーションルールを必須にする。
属性を「tell」に変更。
※バリデーションルールと属性についてはこのあと解説します。
④メッセージのうえに移動する。
⑤更新をおして完了です。
バリデーションルールについて
なぜ「お名前」と「メールアドレス」に「※必須」と入力したのかというと、Snow Monkey Formsのバリデーションルールがデフォルトで「必須」に設定されているからです。
バリデーションルールを設定するには、
①「フォーム設定を開く」を押す。
②確認したい入力欄をクリック。
③するとバリデーションルールという欄があるのでそこで設定可能です。
バリデーションルールとは、その入力欄に入力しないとお問い合わせを送信できないように設定することです。
なので今回のお問い合わせフォームの場合は「お名前」と「メールアドレス」と「電話番号」を入力しないと送信ができないということになります。
管理者宛メールを設定しよう
まずは、管理者宛メールを設定していきます。
①「フォーム設定を開く」を押して、右側に出てくるリストから「管理者宛メール」へ。
そこに画像のように入力します。
管理者宛メールは、お問い合わせがあったときに入力された情報がブログ運営者に向けて送られるメールです。
②「To（メールアドレス）」に自分のメールアドレスを入力。
③「件名」に「お問い合わせがありました。」と入力
④「Body」の欄に
「お名前 {fullname}
メールアドレス {email}
電話番号：｛tell｝
お問い合わせ内容
{message} 」
と入力。
このfullname,email,tell,messageとはなにかというと、入力された情報を取得するためのショートコードという感じです。
先程のバリデーションルールの下にある「属性」という欄から設定可能です。
ここで確認しながら「Body」の欄に入力していきましょう！
自動返信メールを設定しよう
次に自動返信メールの設定をしていきましょう！
自動返信メールは、お問い合わせをしたお客様へ送信されるメールです。
早速設定していきましょう。
①「フォーム設定を開く」を押して、右側に出てくるリストから「自動メール」へ。
そこに画像のように入力します。
②「To（メールアドレス）」に先程紹介した、メールの入力欄の属性を入力します。
③「件名」に「お問い合わせありがとうございます。」と入力。
③「Body」に
「{fullname}様
この度はお問い合わせありがとうございます。
以下の内容で受け付けました。
メールアドレス： {email}
電話番号：｛tell｝
お問い合わせ内容：
{message}
内容を確認し、ご連絡いたしますのでしばらくお待ちください。」
と入力。
これで完了です。
固定ページで表示させよう！
次に固定ページで実際に表示させます。
①「管理画面」から「固定ページ」の「新規追加」をクリック。
②タイトルを「お問い合わせ」と入力。
③「黒い＋」を押して、「すべて表示」をクリック。
④左側のリストから「Snow Monkey Forms」を選択。
⑤ドロワーメニューから先程作成したフォームを選択してください。
※番号はそれぞれ別の番号になります。
ここまで出来たら「公開」をクリックして確認してみましょう。
このように表示されたら完了です。
デザインを変更しよう
ここからデザインを変更していきます。
①管理画面から「Snow Monkey Forms」を選択。
②先程作った「お問い合わせ」をクリック。
③「フォーム設定を開く」から「フォーム設定」へ。
④「確認画面を使用する」と「プログレストラッカーを使用する」を有効にする。
⑤「フォームスタイル」を「Business」に変更。
⑥更新を押して、表示を確認。
このように表示されれば完了です。
まとめ
今回はSnow Monkey Formsの基本的な使い方について解説しました。
このブログでは、Snow Monkeyの使い方や高校生がWeb制作でどう稼いでいるかなどを発信していきます。
→Snow Monkeyでプログラミング教室風サイトを作ってみよう
→高校生が家にあったパソコンを使って独学10か月で月7万稼いだ方法
もしよろしければほかの記事も読んでみてください！
最後までありがとうございました！