お問い合わせフォームをブロックで設定できるのがSnow Monkey Formsプラグインですが、
ブロックだからこそ、ちょっとクセがあります。
たとえばバリデーションを必須にしても出力されるHTMLは全く変化しません。
変化しないということは必須かどうかを判断できません
CSSやJSで動的に必須マークをつけたくても難しいのが現状です。
ここで必須マークをつけるには2種類の方法があります。
- すべてに必須マークをつけて、項目順を指定して非表示にする
- 必須項目に追加のCSSを入れる
ここで前者の場合は設定は楽ですが、フォームの項目の変更に影響があるのでおすすめしません。
地味ですが後者のやり方で実装してみました。
目次
Snow Monkey Formsで必須マークをつける方法
やり方はシンプルです。
必須の項目に専用のクラスを追加、そこにCSSの装飾を加えるだけです。
追加CSSクラスを追加
Snow Monkey Formsの必須を表示したい項目の部分を選択。
追加CSSクラスにrequired
を追加しましょう。
必須マークを加えたい項目すべてにrequired
を追加しましょう。
CSSの追加
あとは装飾を加えるだけです。
.smf-item__label__text {
position: relative;
}
.required .smf-item__label__text::after {
position: absolute;
top: 50%;
right: -50px;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 40px;
height: 23px;
border-radius: 4px;
content: "必須";
font-size: 12px;
color: #fff;
background: #ff0000;
}
確認
最後に確認してみましょう。
いい感じに必須が表示されました。
まとめ
いろいろ探ったのですが、結局クラスを追加してCSSを足すという基本的なやり方が一番良さそうでした。
よく使う表示だと思うのでSnow Monkey Formsが改善されることを望みます。