{% extends 'default_frame.twig' %}{% form_theme form 'Form/form_div_layout.twig' %}{% block stylesheet %} <link rel="stylesheet" href="{{ asset('assets/css/contact.css', 'user_data') }}" />{% endblock %}{% block javascript %} <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> <script> // 郵便番号が入力されたら、都道府県のプルダウンの文字カラーを変更する document.getElementById('contact_postal_code').addEventListener('blur', function() { var pref_code = document.getElementById('contact_address_pref').value; if ( pref_code ) { document.getElementById('contact_address_pref').style.color = '#000'; } }); const contactAddressPref = document.getElementById('contact_address_pref'); if (contactAddressPref) { const value = contactAddressPref.value; if (value !== "") { contactAddressPref.style.color = '#000'; } } </script>{% endblock javascript %}{% block main %} <div class="common-bg"> {{ include('@admin/alert.twig') }} <div class="content__wrapper"> <form method="post" action="{{ url('contact') }}" class="h-adr" novalidate> <span class="p-country-name" style="display:none;">Japan</span> {{ form_widget(form._token) }} <section class="contact"> <h1 class="h__ttl02">{{ 'お問い合わせ'|trans }}</h1> <div class="contact__txt content__txt"> {{ '内容によっては回答をさしあげるのにお時間をいただくこともございます。また、休業日は翌営業日以降の対応となりますのでご了承ください。'|trans|nl2br }} </div> <div class="contact__item__wrap"> <div class="contact__item"> <p class="contact__label"> <span class="contact__required">必須</span>お名前 </p> <div class="contact__name{{ has_errors(form.name.name01, form.name.name02) ? ' error' }}"> {{ form_widget(form.name.name01, {'attr': { 'placeholder': '姓', 'class': 'contact__input' }}) }} {{ form_widget(form.name.name02, {'attr': { 'placeholder': '名', 'class': 'contact__input' }}) }} </div> </div> <div class="contact__item"> <p class="contact__label"> <span class="contact__sub-required">任意</span>お名前(フリガナ) </p> <div class="contact__name{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error' }}"> {{ form_widget(form.kana.kana01, {'attr': { 'placeholder': 'セイ', 'class': 'contact__input' }}) }} {{ form_widget(form.kana.kana02, {'attr': { 'placeholder': 'メイ', 'class': 'contact__input' }}) }} </div> </div> <div class="contact__item"> <input type="hidden" class="p-country-name" value="Japan"> <p class="contact__label"><span class="contact__sub-required">任意</span>ご住所</p> <div class="{{ has_errors(form.postal_code) ? ' error' }}"> {{ form_widget(form.postal_code, {'attr': { 'placeholder': '郵便番号（例：1234567）', 'class': 'contact__input contact__small-input p-postal-code' }}) }} </div> <div class="form__input quantity{{ has_errors(form.address.pref) ? ' error' }}"> {{ form_widget(form.address.pref, {'attr': { 'class': 'contact__input is-empty contact__small-input contact__select p-region-id', 'onchange': 'changeColor(this)' }}) }} </div> <div class="contact__small-input contact__small-input02{{ has_errors(form.address.addr01) ? ' error' }}"> {{ form_widget(form.address.addr01, { 'attr': { 'placeholder': '市区町村名（例：大阪府大阪市福島区）', 'class': 'contact__input p-locality p-street-address' }}) }} </div> <div class="contact__small-input contact__small-input02 contact__small-input03{{ has_errors(form.address.addr02) ? ' error' }}"> {{ form_widget(form.address.addr02, { 'attr': { 'placeholder': '番地・ビル名（福島1丁目3-15）', 'class': 'contact__input p-extended-address' }}) }} </div> </div> <div class="contact__item"> <p class="contact__label"><span class="contact__sub-required">任意</span>電話番号</p> <div class="{{ has_errors(form.phone_number) ? ' error' }}"> {{ form_widget(form.phone_number, { 'attr': { 'placeholder': '012-345-6789', 'class': 'contact__input' }}) }} </div> </div> <div class="contact__item"> <p class="contact__label"><span class="contact__required">必須</span>メールアドレス</p> <div class="{{ has_errors(form.email) ? ' error' }}"> {{ form_widget(form.email, { 'attr': { 'placeholder': 'nihon_taro@nihon.co.jp', 'class': 'contact__input' }}) }} </div> </div> <div class="contact__item"> <p class="contact__label"><span class="contact__required">必須</span>お問い合わせ内容</p> <div class="{{ has_errors(form.contents) ? ' error' }}"> {{ form_widget(form.contents, { 'attr': { 'class': 'contact__textarea recruit__textarea' }}) }} </div> </div> {# エンティティ拡張の自動出力 #} {% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %} {% if f.vars.eccube_form_options.form_theme %} {% form_theme f f.vars.eccube_form_options.form_theme %} {{ form_row(f) }} {% else %} <dl> <dt> {% set label_class = f.vars.label_attr.class is defined ? f.vars.label_attr.class : '' %} {{ form_label(f, f.vars.label, { 'label_attr': {'class': label_class ~ ' ec-label' }}) }} </dt> <dd> <div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}"> {{ form_widget(f) }} {{ form_errors(f) }} </div> </dd> </dl> {% endif %} {% endfor %} </div> <div class="contact__under__txt">※{{ 'ご注文に関するお問い合わせには、必ず「ご注文番号」をご記入くださいますようお願いいたします。'|trans }}</div> <div class="common__btn"> <button type="submit" name="mode" value="confirm" class="common__btn__inner">{{ '入力した内容の確認画面へ'|trans }}</button> </div> </section> </form> </div> </div>{% endblock %}