問い合わせフォーム等でinput、selectにclassを設定する方法

FormType内で設定する方法

フォームの各項目はEccube/Form/Type内にあるFormTypeクラスで設定されています。
ContactType.phpの中では次のように「問い合わせ内容」項目が設定されています。

$builder
->add('contents', 'textarea', array(
                'help' => 'form.contact.contents.help',
                'constraints' => array(
                    new Assert\NotBlank(),
                ),
))

これにクラス名を付けるにはattr配列を付け足します。class_nameを付けたいクラス名に変更してください。

->add('contents', 'textarea', array(
                'help' => 'form.contact.contents.help',
                'constraints' => array(
                    new Assert\NotBlank(),
                ),
                'attr' => array(
                    'class' => 'class_name'
                ),
            ))

Twig内で設定する方法

ContactTypeでnameやaddressは子要素を持つ集合体として定義されています。
これにclassを設定しても子要素には反映されません。
その場合はTwigテンプレート内で直接子要素にclassを設定しましょう。

<dd class="form-group input_name">
{{ form_widget(form.name.name01) }}
{{ form_widget(form.name.name02) }}
{{ form_errors(form.name.name01) }}
{{ form_errors(form.name.name02) }}
</dd>

この部分を次のように書き換えます。

<dd class="form-group input_name">
{{ form_widget(form.name.name01, {attr : {class : 'class_name'}}) }}
{{ form_widget(form.name.name02) }}
{{ form_errors(form.name.name01, {attr : {class : 'class_name'}}) }}
{{ form_errors(form.name.name02) }}
</dd>

これでInputに対してクラスが設定できたはずです！

この方法ではクラスだけでなくIDやdata-属性も付与できますので、ECCUBE３をご利用の方はぜひお試しください。

EC-CUBEゴールドパートナー EC-CUBEは株式会社イーシーキューブの商標です

ECCUBE制作トップへ

EC-CUBEカスタマイズに関するお問い合わせはこちら

[重要]現在公式にセキュリティサポートが切れていないPHPは8.1以上、MySQLは8.0以上で、対応しているEC-CUBEバージョンは4.2以上です。古いEC-CUBEを使っている方は適切なタイミングでバージョンアップをご検討ください。