じゃんきー 
こんにちは！じゃんきーです。
今回はSnowMonkeyのプラグインの一つである
SnowMonkeyFormsを使って
お問い合わせページを作成していきたいと思います。
できるお問い合わせページはこのような感じです↓
全体的なデモサイトの作成方法は
こちらの記事に書いてますので、
こちらもぜひご活用ください↓↓↓
では、さっそくやっていきましょう！
プラグインのインストール
まずはプラグインをインストールしていきます。
①管理画面左側の「プラグイン」→「新規追加」
②検索窓で「snow monkey」と検索
③SnowMonkeyFormsを「今すぐインストール」→「有効化」
有効化すると管理画面左側に「Snow Monkey Forms」というメニューが作られます。
お問い合わせフォームの設定
お問い合わせフォームの設定をしていきます。
①WordPress管理画面左側メニューの「Snow Monkey Forms」→「新規追加」
②「フォーム設定を開く」をクリック
②「確認画面を使用する」を設定
③「プログレストラッカー」を設定
④フォームスタイル「Business」を選択
⑤管理者宛メールアドレスに管理する方のアドレス入力
プログレストラッカーとは、
現在の進捗状況がわかりやすく示される
ユーザーの手助けになるものです。
こんな感じのものです↓↓↓
お問い合わせフォームのアレンジ
ここからお問い合わせフォームの見た目を作っていきます。
すでに成形されたお問い合わせフォームができてますが、自分好みに少しアレンジします。
ラベルの追加
①タイトルを入力
今回は「お問い合わせ」と入力しました。
②「メッセージ」枠外の＋をクリック
③フォーム左側のラベルに「郵便番号」「都道府県」「市区町村以降」「番地・建物名など」と1つずつ追加
④「メッセージ」は一番下に移動しましょう。「メッセージ」全体が囲まれるように選択
⑤青丸の下矢印をクリックして下へ移動する
テキストの追加
①フォーム右側にある＋をクリック→「すべて表示」をクリック
②左の項目にある「SNOW MONKEY FORMS」から「テキスト」を選択
③ ②を先ほど追加したラベルにすべていれる
④「市区町村以降」「番地・建物名など」の入力範囲が狭いため変更します。 テキストブロックを選択
⑤右側の項目にある「size」に「100」と 入力
プレイスホルダーの設定
①「お名前」ラベルのテキストを選択
②右にある「placeholder」に「例）山田 太郎」というように、問合せ者が入力しやすいように例を記載
③今回は郵便番号から住所の自動入力がされるように設定するので
「郵便番号」のテキストには
「半角数字7桁」というようなプレイスホルダーを記載しました。
nameの設定
新しく追加したラベルに「name」を設定していきます。
①郵便番号のテキストを選択
②右の項目「name」に「postnumber」と入力
③同じように
都道府県→「pref」
市区町村以降→「city」
番地・建物名→「address」
それぞれnameの設定をしてください
idの設定
後ほどご紹介するプラグインを使用することで
idの設定により住所の自動入力ができます。
①郵便番号のテキストを選択
②右の項目「id」に「zip」と入力
③同じように
都道府県→「pref」
市区町村以降→「city」
それぞれidの設定をしてください
必須であることを明示
ユーザーが入力必須の項目をわかりやすくします。
①ラベルの下にある「説明」をクリック
②「※必須」と入力
③「※必須」を範囲選択して、スノモンアイコンをクリック
④「文字色」をクリックし、赤を選択する
⑤これをすべてのラベルの下に入力する
バリデーションの設定
バリデーションを設定することで、必須項目が空欄だと、
「入力してください」とアラートが出るようにします。
①お名前のテキストを選択
②画面右側にある項目の「バリデーション」を有効にする
③今回はすべてのラベルにこれを設定してみてください
お問い合わせ完了メッセージの設定
お問い合わせ送信後のサンキューメッセージの設定をします。
①下にある「完了画面」を選択
②文言を「お問い合わせありがとうございました。」と編集
これでお問い合わせフォームの設定は完了です。
右上にある「公開」をクリックして保存してください。
zipaddr-jpプラグイン導入
お問い合わせで郵便番号を入力すると
住所も自動的に入力されるということを経験したことがあると思います。
今回はプラグインを導入して、それを実現していきます。
このプラグインは使用中のWordPressのバージョンとの互換性が認められているものではないようです。使用は自己責任でお願いします。私個人が使ってみて良かったものをオススメしています。
①WordPress管理画面→「プラグイン」→「新規追加」をクリック
②「zipaddr」と検索
③プラグインを「今すぐインストール」→「有効化」
これで郵便番号から住所を自動入力されるようになります。
めちゃめちゃ楽ですねw
お問い合わせページの作成
固定ページでお問い合わせページを作成していきます。
①WordPress管理画面の左側にある「固定ページ」→「新規作成」をクリック
②タイトルを入力
ここでは「CONTACT」にしてます。
③左上にある青い＋をクリック
④「SNOW MONKEY BLOCKS【セクション】」の「セクション」を選択
⑤タイトルに「お問い合わせフォーム」と入力
⑥画像の青い丸のあたりをクリック後、左上の青い＋をクリック
⑦「SNOW MONKEY FORMS」の「Snow Monkey Forms」を選択
⑧ドロップダウンから作成したお問い合わせフォームを選択
以上で終了です！
保存して、サイトの表示などで実際に挙動を確認してみてください。
まとめ
今回はSnowMonkeyFormsの使い方とお問い合わせページの作成方法をお伝えしました。
シンプルなお問い合わせフォームであれば比較的簡単に設置することができたと思います。
Twitter(@thumiage_ot)もやってるので、良かったらDMなどで絡んでください。
また、あなたもブログを始めてみませんか？
僕もWEB制作の備忘録として始めたブログですが、たくさんの人に読んでいただけるようになりました。
あなたが悩み、解決したことをブログとして残しておけば確実に役に立てることがあります。
さらに収益を生み出す可能性も高く、僕も月5桁の収益化を達成しました。
ぜひあなたの知見を資産として残してください。
ブログを始めて行きたい方は『【ConoHa WING】ゼロからWordPressブログを始める方法』という記事を参考にどうぞ。
