Snow Monkey Forms│必須マークをつける方法

2024.04.29

お問い合わせフォームをブロックで設定できるのが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;
}