対象フォームを囲むグループの追加CSSクラスに waza-required を指定し、必要な例を1つだけ追加CSSへ貼り付けます。マークは通常の文字の流れに配置します。
お問い合わせフォームをブロックで設定できるのがSnow Monkey Formsプラグインですが、
ブロックだからこそ、ちょっとクセがあります。
バージョンによって必須設定を示すHTMLが異なります。data-validations属性がある版では、その値を確認して表示を分けられます。
SMF 13.0.0では、必須設定のある入力要素に data-validations="required" が出力されます。
バージョン8系以降の例は、この属性を持つ項目だけをCSSで選択します。
data-validations属性がある場合は属性方式、ない場合は手動でクラスを指定する例を参照してください。
- 現在の属性方式では、必須設定を変更するとマークの対象も変わります。
- 旧版の手動方式では、必須設定とは別に項目へ
requiredクラスを追加します。
項目順を指定してマークを隠す方法は、項目の追加や並べ替えで対象がずれるため使いません。
SMF側で必須を有効にし、その設定に合わせて以下の例を1つ選びます。
Snow Monkey Forms の設定・カスタマイズ方法はこちらにまとめています。
Snow Monkey Formsで必須マークをつける方法（バージョン8系以降）
v8.0.0からdata-validations 属性を追加されdata-validations="required"というような必須項目のアタリが表示されました。
data-validations属性を使うと、CSSで必須項目を選択できます。
例1
.waza-required .smf-item__label__text {
position: relative;
}
.waza-required .smf-item:has([data-validations~="required"]) .smf-item__label__text::after {
display: inline-flex;
vertical-align: middle;
margin-inline: .5em;
padding: .15em .5em;
place-items: center;
border-radius: 4px;
content: "必須";
font-size: 12px;
color: #fff;
background: #a30000;
}項目の前につけたい場合
.waza-required .smf-item__label__text {
position: relative;
}
.waza-required .smf-item:has([data-validations~="required"]) .smf-item__label__text::before {
display: inline-flex;
vertical-align: middle;
margin-inline: .5em;
padding: .15em .5em;
place-items: center;
border-radius: 4px;
content: "必須";
font-size: 12px;
color: #fff;
background: #a30000;
}
必須項目以外にラベルを付ける
.waza-required .smf-item:not(:has([data-validations~="required"])) .smf-item__label__text::before {
display: inline-flex;
vertical-align: middle;
margin-inline: .5em;
padding: .15em .5em;
place-items: center;
border-radius: 4px;
content: "任意";
font-size: 12px;
color: #fff;
background: #666;
}例2
.waza-required .smf-item__label__text {
position: relative;
}
.waza-required .smf-item:has([data-validations~="required"]) .smf-item__label__text::after {
content: " *";
display: inline-block;
margin-left: .5em;
color: var(--color_main);
font-size: 1.2em;
}Snow Monkey Formsで必須マークをつける方法（バージョン7系以前）
やり方はシンプルです。
必須の項目に専用のクラスを追加、そこにCSSの装飾を加えるだけです。
追加CSSクラスを追加
Snow Monkey Formsの必須を表示したい項目の部分を選択。
追加CSSクラスにrequiredを追加しましょう。
必須マークを加えたい項目すべてにrequiredを追加しましょう。
CSSの追加
あとは装飾を加えるだけです。
.waza-required .smf-item__label__text {
position: relative;
}
.waza-required .required .smf-item__label__text::after {
display: inline-flex;
vertical-align: middle;
margin-inline: .5em;
padding: .15em .5em;
place-items: center;
border-radius: 4px;
content: "必須";
font-size: 12px;
color: #fff;
background: #a30000;
}確認
最後に確認してみましょう。
いい感じに必須が表示されました。
実フォームで必須・任意マークを確認する
追加CSSへ貼る例は1つに絞り、必須欄と任意欄を1つずつ用意してマークが付く側を確かめます。
必須欄を空にして確認へ進み、SMFの入力エラーが表示されることを確認します。
入力後に確認画面へ進み、戻る操作の後でもマークの位置が変わらないことを確認します。
2026年10月2日、SMF 13.0.0・WordPress 7.1.2・SWELL 2.19.0の実フォームで5つの掲載CSSを別々に適用し、PC幅1280pxの入力・確認・戻るとスマホ幅375pxの入力・確認を検証しました。
同じCSSを読み込んでも waza-required で囲まないフォームにはマークが付かず、長い項目名でもページの横はみ出しはありませんでした。
手動クラスの例もSMF 13.0.0で表示を確認したもので、旧版7系本体での動作や読み上げソフトによる伝達は未検証です。
まとめ
SMF 13.0.0では属性方式で対象を自動判別します。手動クラス方式では、対象項目にクラスを付けて表示を揃えます。
手動クラスは必須設定を変更しても自動で外れないため、フォーム編集時に両方を見直します。
疑似要素は見た目の目印で、必須設定そのものや支援技術への伝達を保証しません。SMF側の必須設定を有効にし、項目名にも「必須」と記載する方法を検討してください。未入力エラー・長いラベル・スマホ表示を確認します。戻す場合は今回のCSSと waza-required クラスを削除します。
長いラベルでの表示見本
表示だけの見本です。メール送信やSMFの検証処理は含みません。「必須」は項目名にも記載しています。
