どうも！こんにちは！タカノリです！
少し前に触るようになったWordPressのテーマSnow Monkey。
とっても使いやすくて皆さんにオススメしたい！
「どんな味付けにも染まる。高級お出汁のような WordPress テーマです。」
Snow Monkey公式HPより
いやあ本当にワクワクするようなWordPressのテーマです！（ワクワクは大事！）
今回は、サイト制作等で必ずといっていいほど設置される、お問い合わせフォームのカスタマイズのやり方について説明したいと思います。
まずは基礎の基礎といった最低限の説明をしますので、もっとカスタムしたいという方は、この記事を基本にしてググったりしてみてください！
カスタマイズがうまくいかない場合は、こちらで対応もできます（有料となります）ので、下記のリンクより依頼してください！
お問い合わせフォームを最適なものにすることが、受注や問い合わせ数の増加の第一歩になるとも言われているので、色々なカスタマイズができるようしたいところですね。
Snow Monkey Formsとは？
Snow Monkey Formsとはブロックエディター用のお問い合わせフォームのプラグインです。
Snow Monkeyを使っている方であればSnow Monkey Formsを利用されている方が多いと思います。
逆にまだ利用していない方は今回の記事を読んで採用してみて下さい！
クラシックエディターでは使えない＆Snow Monkey以外のテーマだとデザイン調整が必要になるとのことです。
ちなみにこのサイトはSWELLというテーマで作っていますが、問題なく使えています！
では、さっそくSnow Moneky Formsでお問い合わせフォームを作成してみましょう！
Snow Monkey Formsをインストール
まずはここからスタート
WordPressの管理画面のプラグイン➡新規追加➡右上のプラグインの検索から「Snow Monkey Forms」を検索して、「今すぐインストール」をクリックしましょう。
そして「有効化」するのを忘れずに。
ただしくできていれば以下のように管理画面に「Snow Monkey Forms」が出てきます。
デフォルトのお問い合わせフォームを確認
Snow Monkey Formsのデフォルトのお問い合わせフォームを確認してみよう。
まずデフォルトのお問合せフォームの確認をしましょう。
以下の通りです。
すでに基本的な項目は設定されていますね。
カスタマイズしたあとのお問い合わせフォームの確認
今回カスタマイズした後のお問い合わせフォームを事前に確認しましょう。
お問い合わせフォームの設定をする
お問い合わせフォームの設定は「フォーム設定を開く」から行います。
管理画面のSnow Monkey Formsのメニューの「新規追加」をクリックすると、下記のような問い合わせフォームの設定画面が出てきます。
まず「タイトルを追加」に「CONTACT」と入力しましょう。
カスタマイズするときは「フォーム設定を開く」をクリックすると右側に設定画面が出てくるので、そこで設定をしていきます。
「お名前」の項目の設定
「CONTACT」と入力したら「お名前」の項目の設定をしていきます。
まず「お名前」の下のブロックをクリックすると右側の設定画面に「バリデーション」「属性」などの設定項目が出てきます。
こちらを設定していきます。
- バリデーション➡必須
- name➡fullnameと入力
- value➡今回は入力不要
- placeholder➡今回は入力不要
- maxlength➡0
- size➡0
- id➡今回は入力不要
- class➡今回は入力不要
バリデーションとは入力が必須項目なのか、必須項目ではないのかを設定するものです。今回、「お名前」は必須項目にしたいので、上の画像通り、必須にしてください。
「Eメール（メールアドレス）」の項目の設定
次はEメール部分の設定です。
こちらですが、Eメールと入力されている部分をクリックして「メールアドレス」と書き換えましょう。
下の画像のとおりです。
その後は「お名前」と同様に入力欄の設定をしていきます。
- バリデーション➡必須
- name➡emailと入力
- value➡今回は入力不要
- placeholder➡今回は入力不要
- maxlength➡0
- size➡0
- id➡今回は入力不要
- class➡今回は入力不要
「メッセージ（お問い合わせ内容）」の項目の設定
こちらも「お問い合わせ内容」とタイトルを書き換えて、あとはデフォルトの状態で大丈夫です。
- バリデーション➡必須
- name➡messageと入力
- rows➡5
- value➡今回は入力不要
- placeholder➡今回は入力不要
- maxlength➡0
- size➡0
- id➡今回は入力不要
- class➡今回は入力不要
ここまででデフォルトの項目の設定は、ほぼ終わりました。
次は新しい項目を追加していきます。
「会社名」の項目を追加と設定
ちょっとわかりにくいのですが、「お名前」の下の「＋」マークの「ブロックの追加」の下にカーソルを合わせると出てくる「＋」マークの「項目を追加」をクリックします。
そうすると以下の画像のようなブロックが出てくるので「説明」の上あたりをクリックして「会社名」と入力する。
「会社名」と入力したら、その下の「＋」をクリックしてブロックを選択する画面が出てくるので「すべて表示」をクリックしてSnow Monkey Formsのブロックを探す。
以下の画像ですね。
ここからテキストのブロックを選択。
選択後は入力欄の設定をします。
- バリデーション➡必須にしない（=任意）
- name➡companyと入力
- value➡今回は入力不要
- placeholder➡今回は入力不要
- maxlength➡0
- size➡0
- id➡今回は入力不要
- class➡今回は入力不要
「お問い合わせ項目」の追加と設定
最初は「会社名」と同様に進めます。
「お問い合わせ項目」というタイトルを入力してください。
その後は「Snow Monkey Forms」のブロックから「ラジオボタン」をクリックして以下の画像のような状態にします。
お問い合わせ項目にラジオボタンができるので、ボタンの文言を入力していきます。
設定はバリデーションや属性を設定した右側の設定欄で行います。
ボタンの文言はoptions部分を入力していくことで設定します。
optionsは以下の画像のように入力していきます。
- バリデーション➡必須
- options➡上で設定したとおりです
- value➡今回は入力不要
- ブロック設定➡方向を横、説明は今回は不要
ここまで完了したら下書き保存しましょう。
今まで設定した項目タイトルの横に「必須」「任意」と入力
今まで設定した項目によって、それが必須なのかそうでないのか入力していきます。
まずは「お名前」の左横に「必須」と入力してみましょう。
以下のようになります。
必須を選びつつ文字色、背景色を変更します。
猿マーク？名前がわからないですが、こちらをクリックして、好みの文字色、背景色にしてください。
今回はこんな感じにしました⬇
ここまでできたらフォームの設定をしていきます。
まずは今まで入力してきた画面の「フォームの設定を開く」をクリックします。
こちらです⬇
もう右側にあるサイドバー（設定する場所）が出てきている場合は、そのままで大丈夫です。
まず確認画面をオンにする
こちらはお問い合わせから送信する前に、確認ページが開きます。
普通は送信前に確認したいと思うのでONにしましょう。
プログレストラッカーをオンにする
プログレストラッカーもONにしましょう。
お問い合わせしたい人が今、どの処理中なのか確認できます。
あとは見た目が個人的にスキなので、僕はほぼONにします。
設定すると、こういうふうになります⬇
フォームスタイルを設定する
フォームスタイルは４種類。
今回はLetterで設定してみました。
いろいろ試してみてお好きなのをお使い下さい。
参考に、今、表示させると、こんな感じになっています。
管理者宛メールの設定
次は管理者宛メールの設定をしましょう！
右のサイドバーに下のような部分があります。
こちらは管理者つまりサイト運営者に送られるメール設定ですね。
ではサクサク設定していきます！
- To（メールアドレス）➡あなたのメールアドレスを登録して下さい※そこに届きます！
- 件名➡僕であれば[coddee]お問い合わせがはいりました※自分がわかるような件名にしましょう。
- Bodyは以下の通りです。
■お名前：{fullname}➡各項目で設定した属性のnameで入力したものです。
■会社名：{company}
■メールアドレス：{email}
■お問い合わせ項目：{category}
■お問い合わせ内容：{message}
他は入力しなくても大丈夫です。
Bodyはわかりにくいかもしれませんが、メールの内容です。この設定だと■お名前：コーディー太郎・・・というふうに自分が管理しやすいようにメールが届きます。わかりやすいように工夫してみて下さい！
自動返信メールの設定
次はその下の「自動返信メール」設定です。
ちょっと細かいので大変ですが、サクサク行きます。
こちらはお問い合わせをしてくれた方への自動返信メールです。
- To（メールアドレス）➡{email}
- 件名➡【coddee】お問い合わせありがとうございます（自動返信）
- Bodyは以下の通り。
{fullname}様
この度はお問い合わせいただきありがとうございます。以下の内容で受け付けました。
基本的なことしか書いてませんが、ここらへんの自動返信メールの設定はお問い合わせしてくれた方へ失礼のないように設定してみてくださいね。
こちらで中身の設定は終わりです！
色々触ってみて、最適なお問い合わせフォームを作ってみて下さい！
素敵なフォームを作った方は、こそっと教えて下さい〜。
フォームの表示の仕方
最後はフォームの表示の仕方です！
表示したい場所で「Snow Monkey Forms」のブロックを探して下さい。
クリックすると「フォームを選択して下さい」とでてくるので、その部分から今回作った「CONTACT」を選択すればOKです！
お疲れさまでした！！！
まとめ
長かったですね！
お疲れさまでした。
もっと細かい設定もあるので、いつか時間があれば説明しようと思います。
ただこれだけでも最低限のお問合せフォームができているはず！
ここらへんはお客様との接点になる部分なので慎重にやらないといけないですね。
ホームページの公開前にテスト送信等はしましょう〜〜〜。
以上、ありがとうございました！
