先日の機能追加でフォームの必須項目に「必須」のテキストを表示するようになりましたが、これと同じように、任意項目にも「任意」のテキストを表示することができます。

任意項目に「任意」のテキストを表示するには、[フォーム] - [設定] の「カスタムCSS」項目に以下の CSS を挿入し「変更を保存」ボタンをクリックします。

.badge-optional { visibility: visible; display: inline; }
基本的に、「任意」のテキストは非表示となっているので、「visibility: visible;」と記載することで非表示となっている部分を表示するように設定できます。

また、フォームの「必須」、「任意」のテキストは色を変えたり、背景色をつけたりと見せ方を変えることができます。 例えば、「必須」テキストは「カスタムCSS」項目に以下のように記載することでテキスト背景を赤、テキストを白にし、より目立たせることが可能です。

.badge-required { color:#ffffff; background-color:#ff0000; }

「必須」テキストの表示される要素名は「.badge-required」、「任意」テキストの表示される要素名は「.badge-optional」となりますので、それぞれの要素に対してカスタムCSSで指定を行うことで見せ方を工夫してみてください。