MENU
WEB制作の備忘録 | ぶろぐみ
お問い合わせ
　
  1. ホーム
  2. WEB制作
  3. 【有料級】Snow Monkey Formsの便利な小技・カスタマイズ

【有料級】Snow Monkey Formsの便利な小技・カスタマイズ

PR
WEB制作 ブログ運営

WordPressのフォーム作成プラグインで有名な「Snow Monkey Forms」。

確認画面やプログレストラッカー（ステップの表示）が簡単に作成できるため、よく使わせてもらっています。

今回は、アップデートで可能になった「必須ラベル」を自動的につける方法や、その他よく使うテクニックを記載したいと思います。

目次

自動で必須ラベルをつける

v8.0.0アップデートから項目ブロックにdata-validations属性が追加され、必須項目にはrequiredがつくようになりました。

これにより、data-validations属性にrequiredが含まれる場合にはラベルに「必須」をつけるといったことが容易になります。

CSSの記述例

/* 必須ラベル */
.smf-item:has([data-validations~="required"]) label::after {
	content: "必須";
	display: inline-block;
	padding: 5px 6px;
	color: #fff;
	background-color: crimson;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	margin-left: 1em;
	border-radius: 4px;
}

data-validations属性には他の値が複数入ることもあるため、~=（含まれる場合）と指定する必要があります。

従来まで、手動で必須ラベルを個別につけるか、全てに必須ラベルをつけてx番目は非表示にするといった遠回りのことをしてきましたが、その手間もなくなります。

以前からこの手法を取り入れたかったため、公式フォーラムで要望を出させていただいたところ、開発者（キタジマタカシさん）に実装してもらうことができました。（ありがとうございます）

画面切り替え時にページトップから表示させる

Snow Monkey Formsは、確認画面や完了画面の時にページ遷移せずその場で切り替わるため、「ページ遷移したように見せたい」といった場合には不向きでした。

しかし、フォーカスポイントを上部にずらすことで、アクション時にページトップに移動させることができます。

/* 確認・完了切り替え時の表示位置をページトップに */
.smf-focus-point {
  top: -9999px;
}

smf-focus-pointは切り替わった時の位置をJavaScriptで制御しており、デフォルトだとtop:-100px（フォームの100px上）に設定されています。

ほぼ力技ですが、動作に影響なく実装することができます。

画面切り替え時のスタイル変更

Snow Monkey Formsで確認画面や、完了画面の時のスタイルを変更したいと思った時に役立つテクニックです。

formタグにはdata-screen属性がついており、各画面を示す値が与えられています。

<!-- 入力画面の時の例 -->
<form class="snow-monkey-form" data-screen="input">

これにより、CSSを以下のように記述することで、各画面に対するスタイル指定が可能です。

/* 入力画面の時のスタイル */
[data-screen="input"] {

}

/* 戻るボタンを押した時のスタイル */
[data-screen="back"] {

}

/* 確認画面の時のスタイル */
[data-screen="confirm"] {

}

/* 完了画面の時のスタイル */
[data-screen="complete"] {

}

/* 送信失敗した時のスタイル */
[data-screen="systemerror"] {

}

応用で、:has()擬似クラスを使えば、フォームの外にあるテキストなどを切り替えることも可能です。

/* お問い合わせフォームの上のテキスト切り替え */
.contact-text,
.contact-confirm-text {
  display: none;
}
body:has([data-screen="input"]) .contact-text,
body:has([data-screen="back"]) .contact-text,
body:has([data-screen="confirm"]) .contact-confirm-text {
  display: block;
}

「以下をご記入ください」「以下をご確認ください」などの表示切り替えや、デザインの変更も自由自在です。

ボタンにアイコンをつける

擬似要素でアイコンをつける方法です。

/* 基本ボタンアイコン */
.smf-button-control__control::before {
  content: "";
  background: url(/wp-content/themes/xxx/xxx/xxx-icon.png)
    no-repeat center center / contain;
  width: 24px;
  height: 24px;
  display: inline-block;
}

確認画面のボタンアイコンを個別に変更したい場合は、以下も追加。

/* 戻るボタンアイコン */
.smf-button-control__control[data-action="back"]::before {
  background: url(/wp-content/themes/xxx/xxx/xxx-icon.png)
    no-repeat center center / contain;
}

/* 送信ボタンアイコン */
.smf-button-control__control[data-action="complete"]::before {
  background: url(/wp-content/themes/xxx/xxx/xxx-icon.png)
    no-repeat center center / contain;
}

通知メールの雛形

毎回メール設定をするのは面倒なので雛形を作っておきます。

管理者宛メール

TO（メールアドレス）xxx@gmail.com（自分のメールアドレス）
件名ホームページからお問い合わせ
Body以下の内容が送信されました。
====================
■お名前：
{fullname}
■メールアドレス：
{email}
■電話番号：
{tel}
■法人・一般：
{category}
■会社名：
{company}
■お問い合わせ内容：
{message}
====================
株式会社xxx
https://xxx.com
Reply-To（メールアドレス）なし（任意）
From（メールアドレス）no-reply@xxx.com
送信者株式会社xxx（自分の名前）

※bodyの{name 属性値}は、各項目のブロックで設定したNAMEが入ります。

自動返信メール

TO（メールアドレス）{email}
件名【自動返信メール】お問い合わせありがとうございます
Bodyこの度はお問い合わせいただき、誠にありがとうございます。
以下の内容で受け付けました。
====================
■お名前：
{fullname}
■メールアドレス：
{email}
■電話番号：
{tel}
■法人・一般：
{category}
■会社名：
{company}
■お問い合わせ内容：
{message}
====================
お問い合わせ内容を確認し折り返し連絡いたしますので、今しばらくお待ち下さい。
※本メールアドレスへは直接返信できませんのでご了承ください。
====================
株式会社xxx
https://xxx.com
Reply-To（メールアドレス）なし（任意）
From（メールアドレス）no-reply@xxx.com
送信者株式会社xxx（自分の名前）

※bodyの{name 属性値}は、各項目のブロックで設定したNAMEが入ります。

Snow Monkey Formsで時短

確認画面やプログレストラッカーがあるフォームで、サクッと簡単に実装できるのはSnow Monkey Formsくらいじゃないでしょうか。

国産であることの安心感と、フォーラムで真摯に相談に乗っていただけた開発者のおかげもあり、Web制作ではデフォルトのフォームプラグインとなりそうです。

あわせて読みたい
セキュリティ系プラグイン「XO Security」と「 BBQ Firewall」の組み合わせが最高 セキュリティ対策とユーザビリティ（利便性）はトレードオフです。 あまりにセキュリティをガッシリ強化してしまうと、ログインのたびに通知が来たり、何度もパスワード…

おすすめWEBスクール

WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ！
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。

＼ クリックしてジャンプ！ ／

WEB制作 ブログ運営
CSS WordPress
役に立ったら他の方にシェア

お気軽にコメントどうぞ

コメントする

目次