{% extends 'default_frame.twig' %}{% form_theme form 'Form/form_div_layout.twig' %}{% block stylesheet %} <style type="text/css"> p.required{ display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; gap: 0 1rem; } p.required:after{ content: "【必須】"; font-size: 1.2rem; color: #db0000; margin-top: 0.5rem; } .horizontal{ display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; } .address .error-empty{ position: relative!important; top: unset!important; } .horizontal .form-check{ padding-left: 0; margin-right: 2rem; } .ec-form-inquiry__group .table table tr td:nth-child(2) .fill.horizontal label input{ margin-left: 0; } .ec-form-inquiry__group .table table tr td:nth-child(2) .fill.horizontal label input[type="text"]{ max-width: 100px; } .ec-form-inquiry__group .table table tr td:nth-child(2) .fill.horizontal label span{ margin-right: 2rem; } {# .ec-form-inquiry__group .step-content { display: block; /*Debug*/ } #} </style>{% endblock stylesheet %}{% block javascript %} <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> <script type="text/javascript"> $(function() { $('.postal_code').click(function(event) { AjaxZip3.zip2addr('loan[postal_code]', '', 'loan[address][pref]', 'loan[address][addr01]'); return false; }); $('.employed_postal_code').click(function(event) { AjaxZip3.zip2addr('loan[employed_postal_code]', '', 'loan[employed_address_pref]', 'loan[employed_address_addr01]'); return false; }); $('.guarantor_postal_code').click(function(event) { AjaxZip3.zip2addr('loan[guarantor_postal_code]', '', 'loan[guarantor_address_pref]', 'loan[guarantor_address_addr01]'); return false; }); $('.guarantor_company_postal_code').click(function(event) { AjaxZip3.zip2addr('loan[guarantor_company_postal_code]', '', 'loan[guarantor_company_address_pref]', 'loan[guarantor_company_address_addr01]'); return false; }); }) </script> <script> $(document).ready(function() { $('form, input, select').attr('autocomplete', "off"); $('input[name="loan[spouse]"]').change(function() { var selectedValue = $('input[name="loan[spouse]"]:checked').val(); if (selectedValue == "有り") { $('select[name="loan[spouse_job]"]').attr('required', 'required'); } else { $('select[name="loan[spouse_job]"]').removeAttr('required'); $('select[name="loan[spouse_job]"]').closest('td').find('.error-empty').remove(); } }); $('input[name="loan[household_paying]"]').change(function() { var selectedValue = $('input[name="loan[household_paying]"]:checked').val(); if (selectedValue == "有り") { $('input[name="loan[household_paying_amount]"]').attr('required', 'required'); } else { $('input[name="loan[household_paying_amount]"]').removeAttr('required'); $('input[name="loan[household_paying_amount]"]').closest('td').find('.error-empty').remove(); } }); //Chỉ check phần trên hoặc phần dưới của お勤め先・ご収入について $('#employed input, #employed select, #employed textarea').change(function(event) { $('#pensioner td').find('.error-empty').remove(); }); $('#pensioner input, #pensioner select, #pensioner textarea').change(function(event) { $('#employed td').find('.error-empty').remove(); }); var step_number = Number($('.ec-form-inquiry__group__step__item.active').data('step')); $('#btn-back').click(function(event) { $("span.error-empty").remove(); if (step_number > 1) { step_number--; stepActive(step_number); } $('body,html').animate({ scrollTop: 250 }, 300, 'swing'); }); $("#btn-confirm").click(function(event) { $("span.error-empty").remove(); var employed_has_error = false; var pensioner_has_error = false; var has_error = false; if (step_number == 2) { // お勤め先・ご収入について chi check 1 phan $('#employed select[required], #employed input[required], #employed textarea[required]').each(function() { var input = $(this); if (input.attr('type') == 'radio' || input.attr('type') == 'checkbox') { var radio_name = input.attr('name'); if ($('input[name="' + radio_name + '"]:checked').length == 0) { employed_has_error = true; } } else if (input.val() == ""){ employed_has_error = true; } }); $('#pensioner select[required], #pensioner input[required], #pensioner textarea[required]').each(function() { var input = $(this); if (input.attr('type') == 'radio' || input.attr('type') == 'checkbox') { var radio_name = input.attr('name'); if ($('input[name="' + radio_name + '"]:checked').length == 0) { pensioner_has_error = true; } } else if (input.val() == ""){ pensioner_has_error = true; } }); } if (step_number != 2 || (employed_has_error == true && pensioner_has_error == true)) { $('.step-content.step-' + step_number + ' .table select[required], .step-content.step-' + step_number + ' .table input[required], .step-content.step-' + step_number + ' .table textarea[required]').each(function() { var input = $(this); var input_empty = $("<span>").addClass("error-empty").text("※この項目は必須項目です"); if (input.attr('type') == 'radio' || input.attr('type') == 'checkbox') { var radio_name = input.attr('name'); if ($('input[name="' + radio_name + '"]:checked').length == 0) { input.before(input_empty); has_error = true; } } else if (input.attr('type') == 'email' && validateEmail(input.val()) === false) { input.before($("<span>").addClass("error-empty").text("※正しくメールアドレスを入力してください")); } else if (input.val() == ""){ input.before(input_empty); has_error = true; } else { input_empty.remove(); } input.on("change", function() { if (input.attr('type') == 'radio' || input.attr('type') == 'checkbox') { input.closest('td').find('.error-empty').remove(); } else { input_empty.remove(); } }); }); } if (has_error) { var position = $(".error-empty").eq(0).offset().top - 250; $('body,html').animate({ scrollTop: position }, 300, 'swing'); return false; } // chi xu ly tab, khong submit form if (step_number != 4) { step_number++; stepActive(step_number); $('body,html').animate({ scrollTop: 250 }, 300, 'swing'); return false; } if (employed_has_error == false) { $('#pensioner select[required], #pensioner input[required], #pensioner textarea[required]').removeAttr('required'); } if (pensioner_has_error == false) { $('#employed select[required], #employed input[required], #employed textarea[required]').removeAttr('required'); } }); }); /** * Xu ly Tab */ function stepActive(step_number) { $('.ec-form-inquiry__group__step__item').removeClass('active'); $('.step-content').removeClass('active'); $('.ec-form-inquiry__group__step__item.step-' + step_number).addClass('active'); $('.step-content.step-' + step_number).addClass('active'); if (step_number > 1) { $('#btn-back').addClass('active'); } else { $('#btn-back').removeClass('active'); } } /** * Check mail */ function validateEmail(email) { var re = /\S+@\S+\.\S+/; return re.test(email); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script> <script> var CountTatami = { countType1: 0, //6-14 countType2: 0, //16-20 countType3: 0, //23- }; var CountTatamiAll = { countType1: 0, //6-14 countType2: 0, //16-20 countType3: 0, //23- }; var CountTatamiLoan = { countType1: 0, //6-14 countType2: 0, //16-20 countType3: 0, //23- }; $(function() { //khi load page, nếu không chọn thì check tất cả product if ($('.construction_air:checked').length <= 0) { $('.construction_air').prop('checked', true); } SetRequiredContent(); SetRequiredContent1(); SetRequiredContent2("construction_type_07", "交換", ".construction_type_07_02_v1"); SetRequiredContent2("construction_type_07", "新設工事に加えて移設工事も希望", ".construction_type_07_02_v2"); SetRequiredContent2("construction_type_07_02_v2", "分解洗浄を希望する", ".construction_type_07_03_v1"); SetRequiredContent2("construction_type_07_02_v2", "分解洗浄を希望しない", ".construction_type_07_03_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設6~14畳(取外し含む)", ".construction_type_07_04_v1"); SetRequiredContent2("construction_type_07_03_v1", "移設16~20畳(取外し含む)", ".construction_type_07_04_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設23畳~(取外し含む)", ".construction_type_07_04_v3"); SetRequiredContent2("electrical_outlet_07", "あり", ".electrical_outlet_07_02"); SetRequiredContent2("room_size_07", "なし", ".room_size_07_02"); SetRequiredContent2("room_size_07_02", "建物が2009年6月以降に着工した証明書あり", ".room_size_07_03_v1"); SetRequiredContent2("room_size_07_02", "建物が2009年6月以降に着工した証明書なし", ".room_size_07_03_v2"); SetRequiredContent2("piping_status_07", "隠蔽配管", ".piping_status_07_02"); SetRequiredContent2("outdoor_cover", "必要", ".outdoor_cover_02"); SetRequiredContent2("setting_install_method", "新規取付", ".construction_method_07_v1"); SetRequiredContent2("setting_install_method", "交換", ".construction_method_07_v2"); $("input[name='loan[desired_construction_work]']").change(function() { SetRequiredContent(); }); $("input[name='loan[desired_construction_work_02]']").change(function() { SetRequiredContent1(); CalcConstructionNumber(); }); $("input[name='loan[construction_type_07]']").change(function() { SetRequiredContent2("construction_type_07", "交換", ".construction_type_07_02_v1"); SetRequiredContent2("construction_type_07", "新設工事に加えて移設工事も希望", ".construction_type_07_02_v2"); SetRequiredContent2("construction_type_07_02_v2", "分解洗浄を希望する", ".construction_type_07_03_v1"); SetRequiredContent2("construction_type_07_02_v2", "分解洗浄を希望しない", ".construction_type_07_03_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設6~14畳(取外し含む)", ".construction_type_07_04_v1"); SetRequiredContent2("construction_type_07_03_v1", "移設16~20畳(取外し含む)", ".construction_type_07_04_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設23畳~(取外し含む)", ".construction_type_07_04_v3"); }); $("input[name='loan[construction_type_07_02_v2]']").change(function() { SetRequiredContent2("construction_type_07_02_v2", "分解洗浄を希望する", ".construction_type_07_03_v1"); SetRequiredContent2("construction_type_07_02_v2", "分解洗浄を希望しない", ".construction_type_07_03_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設6~14畳(取外し含む)", ".construction_type_07_04_v1"); SetRequiredContent2("construction_type_07_03_v1", "移設16~20畳(取外し含む)", ".construction_type_07_04_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設23畳~(取外し含む)", ".construction_type_07_04_v3"); }); $("input[name='loan[construction_type_07_03_v1]']").change(function() { SetRequiredContent2("construction_type_07_03_v1", "移設6~14畳(取外し含む)", ".construction_type_07_04_v1"); SetRequiredContent2("construction_type_07_03_v1", "移設16~20畳(取外し含む)", ".construction_type_07_04_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設23畳~(取外し含む)", ".construction_type_07_04_v3"); }); $("input[name='loan[electrical_outlet_07]']").change(function() { SetRequiredContent2("electrical_outlet_07", "あり", ".electrical_outlet_07_02"); }); $("input[name='loan[room_size_07]']").change(function() { SetRequiredContent2("room_size_07", "なし", ".room_size_07_02"); SetRequiredContent2("room_size_07_02", "建物が2009年6月以降に着工した証明書あり", ".room_size_07_03_v1"); SetRequiredContent2("room_size_07_02", "建物が2009年6月以降に着工した証明書なし", ".room_size_07_03_v2"); }); $("input[name='loan[room_size_07_02]']").change(function() { SetRequiredContent2("room_size_07_02", "建物が2009年6月以降に着工した証明書あり", ".room_size_07_03_v1"); SetRequiredContent2("room_size_07_02", "建物が2009年6月以降に着工した証明書なし", ".room_size_07_03_v2"); }); $("input[name='loan[piping_status_07]']").change(function() { SetRequiredContent2("piping_status_07", "隠蔽配管", ".piping_status_07_02"); }); $("input[name='loan[outdoor_cover]']").change(function() { SetRequiredContent2("outdoor_cover", "必要", ".outdoor_cover_02"); }); $("input[name='loan[setting_install_method]']").change(function() { SetRequiredContent2("setting_install_method", "新規取付", ".construction_method_07_v1"); SetRequiredContent2("setting_install_method", "交換", ".construction_method_07_v2"); }); CalcConstructionNumber(); $('.construction_air').on('change', function() { if ($('.construction_air:checked').length > 0) { $('.construction_air').removeAttr('required'); } else { $('.construction_air').attr('required', 'required'); } CalcConstructionNumber(); CalcPrice(); }); CalcPrice(); $('input[type="radio"]').on('change', function() { CalcPrice(); }); }); function SetRequiredContent() { $("input[name='loan[desired_construction_work]'][value='エアコン本体と設置工事をご希望の方']").prop('checked', true); {% if (checkCategory == 1) %} // Trường hợp loan thì mặc định 最終金額算出 $(".ec-form-inquiry__group .table .list-item .item.active>table:first-child()").css('display', 'none'); $("input[name='loan[desired_construction_work_02]'][value='最終金額算出']").prop('checked', true); {% endif %} var selectedValue = $("input[name='loan[desired_construction_work]']:checked").val(); if (selectedValue === "エアコン本体と設置工事をご希望の方") { $("#tableUnderTop").css("display", "table"); $("#tableUnderTop input, #tableThree input").each(function(index, el) { if ($(this).attr('type') != 'hidden') { $(this).attr('required', 'required'); } }); $("#tableThree").css("display", "none"); $("#tableThree input").each(function(index, el) { $(this).prop('checked', false).removeAttr('required'); }); } else { $("#tableUnderTop").css("display", "none"); $("#tableSecond").css("display", "none"); $("#tableThree").css("display", "none"); $("#tableUnderTop input, #tableSecond input, #tableThree input").each(function(index, el) { $(this).prop('checked', false).removeAttr('required'); }); } SetUnrequired(); } function SetRequiredContent1() { var selectedValue = $("input[name='loan[desired_construction_work_02]']:checked").val(); if (selectedValue === "最終金額算出") { $("#tableThree").css("display", "none"); $("#tableThree input").each(function(index, el) { $(this).prop('checked', false).removeAttr('required'); }); $("#tableSecond").css("display", "table"); $("#tableSecond .content-1 input").each(function(index, el) { if ($(this).attr('name') != 'construction_date_2' && $(this).attr('name') != 'construction_date_3' && $(this).attr('type') != 'hidden') { $(this).attr('required', 'required'); } }); } else if (selectedValue === "新居等への引越しのため設置場所の詳細確認不可") { $("#tableSecond").css("display", "none"); $("#tableSecond .content-1 input").each(function(index, el) { $(this).prop('checked', false).removeAttr('required'); }); $("#tableThree").css("display", "table"); $("#tableThree input").each(function(index, el) { if ($(this).attr('type') != 'hidden') { $(this).attr('required', 'required'); } }); } else { $("#tableSecond").css("display", "none"); $("#tableThree").css("display", "none"); $("#tableSecond .content-1 input, #tableThree input").each(function(index, el) { $(this).prop('checked', false).removeAttr('required'); }); } SetUnrequired(); } function SetRequiredContent2(nameInput, condition , classCheck) { var selectedValue = $("input[name='loan["+ nameInput +"]']:checked").val(); if (selectedValue === condition) { $(classCheck).css("display", "flex"); $("#tableSecond " + classCheck + " input").each(function(index, el) { if ($(this).attr('type') != 'hidden') { $(this).attr('required', 'required'); } }); } else { $(classCheck).css("display", "none"); $("#tableSecond " + classCheck + " input").each(function(index, el) { $(this).prop('checked', false).removeAttr('required'); }); } SetUnrequired(); } function SetUnrequired() { $('input[name="loan[address][addr02]"]').removeAttr('required'); $('input[name="loan[tel_number_type]"]').removeAttr('required'); $('input[name="loan[tel_number]"]').removeAttr('required'); $('input[name="loan[electrical_outlet_07_02]"]').removeAttr('required'); $('input[name="loan[outlet_earth]"]').removeAttr('required'); $('input[name="loan[image_3]"]').removeAttr('required'); $('input[name="loan[floor]"]').removeAttr('required'); $('.custom-file img').each(function(index, el) { if ($(this).attr('src') != "") { $(this).closest('.custom-file').find('input').removeAttr('required'); } }); } /** * Tính giá tiền */ function CalcPrice() { var product_total_price = Number($('#product_total_price').val()); $('#construction_base_price_1').val(0); $('#construction_base_price_2').val(0); $('#construction_base_price_3').val(0); $('#construction_total_price').val(0); $('#construction_discount').val(0); $('#total-price').text(numeral(product_total_price).format('0,0') + "円"); // $('.product_price').text(numeral(product_total_price).format('0,0')); $('.product_base_price').text(numeral(product_total_price + 0).format('0,0')); $('.base_price').text(0); $('.add_price').text(0); } /** * Đếm số lượng cần thi công */ function CalcConstructionNumber() { CountTatami.countType1 = 0; CountTatami.countType2 = 0; CountTatami.countType3 = 0; CountTatamiAll.countType1 = 0; CountTatamiAll.countType2 = 0; CountTatamiAll.countType3 = 0; CountTatamiLoan.countType1 = 0; CountTatamiLoan.countType2 = 0; CountTatamiLoan.countType3 = 0; var construction_air = [] var product_total_price = 0; $('.construction_air').each(function(index, el) { let quantity = $(this).data('quantity'); let price = $(this).data('price'); let tatami = $(this).data('tatami'); let loan = $(this).data('loan'); if (tatami >= 6 && tatami <= 14) { CountTatamiAll.countType1 += quantity; if (loan == 1) { CountTatamiLoan.countType1 += quantity; } } else if (tatami >= 16 && tatami <= 20) { CountTatamiAll.countType2 += quantity; if (loan == 1) { CountTatamiLoan.countType2 += quantity; } } else if (tatami >= 23) { CountTatamiAll.countType3 += quantity; if (loan == 1) { CountTatamiLoan.countType3 += quantity; } } if ($(this).is(':checked')) { product_total_price += price; if (tatami >= 6 && tatami <= 14) { CountTatami.countType1 += quantity; } else if (tatami >= 16 && tatami <= 20) { CountTatami.countType2 += quantity; } else if (tatami >= 23) { CountTatami.countType3 += quantity; } construction_air.push($(this).val()); } }); $('#loan_construction_air').val(construction_air.toString()); $('#loan_number_install').val(CountTatami.countType1 + CountTatami.countType2 + CountTatami.countType3); $('#product_total_price').val(product_total_price); } $(document).ready(function(){ $(".custom-file input[type='file']").change(function(){ var filePath = $(this).val(); var fileName = filePath.split('\\').pop(); var label = $(this).parent().find("label"); label.text(fileName); var hiddenInputId = $(this).attr("id") + "-filename"; $("#" + hiddenInputId).val(fileName); $(this).parent().find("label").css("color", "rgba(0, 0, 0, 1)"); }); }); </script>{% endblock javascript %}{% block main %} <div class="ec-inquiry-page"> <div class="ec-banner"> <div class="ec-banner__inner"> <div class="inner"> <h2> エアココ自社ローン審査フォーム </h2> </div> </div> <div class="ec-breadcrumb"> <ul class="ec-breadcrumb__menu"> <li class="ec-breadcrumb__item"><a href="{{ url('homepage') }}">TOP</a></li> <li class="ec-breadcrumb__item"><span>></span></li> <li class="ec-breadcrumb__item"><p>エアココ自社ローン審査フォーム</p></li> </ul> </div> </div> <div class="ec-form-inquiry-main"> <div class="ec-form-inquiry__inner"> <div class="inner"> <div class="ec-form-inquiry__group"> <div class="ec-form-inquiry__group__step"> <ul class="ec-form-inquiry__group__step__items"> <li class="ec-form-inquiry__group__step__item step-1 active" data-step="1"> <span>STEP1</span> <span>ご本人様について</span> </li> <li class="ec-form-inquiry__group__step__item step-2" data-step="2"> <span>STEP2</span> <span>お勤め先・ご収入</span> </li> <li class="ec-form-inquiry__group__step__item step-3" data-step="3"> <span>STEP3</span> <span>連帯保証人の方</span> </li> <li class="ec-form-inquiry__group__step__item step-4" data-step="4"> <span>STEP4</span> <span>工事内容の最終確認</span> </li> <li class="ec-form-inquiry__group__step__item step-5" data-step="5"> <span>STEP5</span> <span>ご確認</span> </li> <li class="ec-form-inquiry__group__step__item step-6" data-step="6"> <span>STEP6</span> <span>完了</span> </li> </ul> </div> <form id="loan_examination_form" method="post" action="{{ url('loan_examination') }}" class="h-adr" enctype="multipart/form-data"> <span class="p-country-name" style="display:none;">Japan</span> {{ form_widget(form._token) }} <div class="step-content step-1 active"> <div class="step-content__title">ご本人様について</div> <div class="table"> {# <p class="text top">必須項目 <span>※</span></p> #} <div class="list-item"> <div class="item"> <table> <tr> <td><p class="required">お名前</p></td> <td> <div class="fill"> <label> 姓 {{ form_widget(form.name.name01, {'attr': { 'placeholder': '姓' }}) }} </label> </div> <div class="fill"> <label> 名 {{ form_widget(form.name.name02, {'attr': { 'placeholder': '名' }}) }} </label> </div> {{ form_errors(form.name.name01) }} {{ form_errors(form.name.name02) }} </td> </tr> <tr> <td><p class="required">フリガナ</p></td> <td> <div class="fill"> <label> セイ {{ form_widget(form.kana.kana01, {'attr': { 'placeholder': 'セイ' }}) }} </label> </div> <div class="fill"> <label> メイ {{ form_widget(form.kana.kana02, {'attr': { 'placeholder': 'メイ' }}) }} </label> </div> {{ form_errors(form.kana.kana01) }} {{ form_errors(form.kana.kana02) }} </td> </tr> <tr> <td><p class="required">性別</p></td> <td> <div class="fill horizontal"> {% for key,val in form.sex.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.sex.vars.full_name }}" value="{{ val.value }}" {% if form.sex.vars.data == val.value %}checked{% endif %} required="required" /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.sex) }} </td> </tr> <tr> <td><p class="required">生年月日</p></td> <td> <div class="fill v2"> <label class="group_select"> <div class="select vip"> {{ form_widget(form.birth.year) }}<span>年</span> </div> <div class="select vip"> {{ form_widget(form.birth.month) }}<span>月</span> </div> <div class="select vip"> {{ form_widget(form.birth.day) }}<span>日</span> </div> </label> </div> {{ form_errors(form.birth) }} </td> </tr> <tr> <td><p class="required">住所</p></td> <td> <div class="fill v3"> <label class="label v2"> 郵便番号 {{ form_widget(form.postal_code) }} <a class="btn-post postal_code" href="https://www.post.japanpost.jp/zipcode/" target="_blank"><span>{{ '住所検索'|trans }}</span></a> </label> {{ form_errors(form.postal_code) }} <label class="label v3 address"> 都道府県 <div class="select"> {{ form_widget(form.address.pref) }} </div> </label> {{ form_errors(form.address.pref) }} <label class="label v4 address"> 市区町村・番地 {{ form_widget(form.address.addr01, { 'attr': { 'placeholder': '市区町村名(例:大阪市北区)' }}) }} </label> {{ form_errors(form.address.addr01) }} <label class="label v4 address"> マンション・ビル名 {{ form_widget(form.address.addr02, { 'attr': { 'placeholder': '番地・ビル名(例:西梅田1丁目6-8)' }}) }} </label> {{ form_errors(form.address.addr02) }} </div> </td> </tr> <tr> <td><p>電話番号(ご自宅)</p></td> <td> <div class="fill horizontal"> {% for key,val in form.tel_number_type.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.tel_number_type.vars.full_name }}" value="{{ val.value }}" {% if form.tel_number_type.vars.data == val.value %}checked{% endif %} required="required" /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.tel_number_type) }} <div class="fill v2"> <label> {{ form_widget(form.tel_number, {'attr': { 'placeholder': '000-0000-0000' }}) }} </label> </div> {{ form_errors(form.tel_number) }} </td> </tr> <tr> <td><p class="required">電話番号(携帯)</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.phone_number, {'attr': { 'placeholder': '000-0000-0000' }}) }} </label> </div> {{ form_errors(form.phone_number) }} </td> </tr> <tr> <td><p class="required">メールアドレス</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.email, {'attr': { 'placeholder': 'example@example.com' }}) }} </label> </div> {{ form_errors(form.email) }} </td> </tr> <tr> <td><p class="required">配偶者</p></td> <td> <div class="fill horizontal"> {% for key,val in form.spouse.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.spouse.vars.full_name }}" value="{{ val.value }}" {% if form.spouse.vars.data == val.value %}checked{% endif %} required="required" /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.spouse) }} </td> </tr> <tr> <td><p class="required">配偶者の職業</p></td> <td> <div class="fill v4"> <div class="select"> {{ form_widget(form.spouse_job) }} </div> </div> {{ form_errors(form.spouse_job) }} </td> </tr> {# <tr> <td><p class="required">世帯主とのご関係</p></td> <td> <div class="fill horizontal"> {% for key,val in form.relationship.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.relationship.vars.full_name }}" value="{{ val.value }}" {% if form.relationship.vars.data == val.value %}checked{% endif %} required="required" /> {{ val.label | trans }} </label> {% endfor %} <label> {{ form_widget(form.relationship_other, {'attr': { 'style': 'width: 120px;' }}) }} </label> </div> {{ form_errors(form.relationship) }} {{ form_errors(form.relationship_other) }} </td> </tr> #} <tr> <td><p class="required">世帯人数</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.people_cnt, {'attr': { 'style': 'width: 120px;' }}) }} <span>人</span> </label> </div> {{ form_errors(form.people_cnt) }} </td> </tr> <tr> <td><p class="required">住宅ローン/家賃支払い</p></td> <td> <div class="fill horizontal"> {% for key,val in form.housing_loan.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.housing_loan.vars.full_name }}" value="{{ val.value }}" {% if form.housing_loan.vars.data == val.value %}checked{% endif %} required="required" /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.housing_loan) }} <p class="noice">※お申込者ご自身またはお申込者と同一世帯の方の住宅ローン・家賃のお支払有無をご選択ください。「世帯」とは、お申込者と生計を共にする家族のことをいいます(同居・別居を問わず)。</p> </td> </tr> <tr> <td><p class="required">住居区分</p></td> <td> <div class="fill v4"> <div class="select"> {{ form_widget(form.housing_type) }} </div> </div> {{ form_errors(form.housing_type) }} </td> </tr> <tr> <td><p class="required">居住年数</p></td> <td> <div class="fill horizontal"> <label> {{ form_widget(form.residence_year, {'attr': { 'style': 'width: 120px;' }}) }} <span>年</span> </label> </div> <div class="fill horizontal"> <label> {{ form_widget(form.residence_month, {'attr': { 'style': 'width: 120px;' }}) }} <span>ヶ月</span> </label> </div> {{ form_errors(form.residence_year) }} {{ form_errors(form.residence_month) }} </td> </tr> <tr> <td><p class="required">職業</p></td> <td> <div class="fill v4"> <div class="select"> {{ form_widget(form.job) }} </div> </div> {{ form_errors(form.job) }} </td> </tr> <tr> <td><p class="required">世帯主との居住状況</p></td> <td> <div class="fill horizontal"> {% for key,val in form.head_of_household.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.head_of_household.vars.full_name }}" value="{{ val.value }}" {% if form.head_of_household.vars.data == val.value %}checked{% endif %} required="required" /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.head_of_household) }} </td> </tr> </table> </div> </div> </div> </div> <div class="step-content step-2"> <div class="step-content__title">お勤め先・ご収入について</div> <div class="table" id="employed"> <div class="table__title"> <p class="step-content__subtitle">【有職者の方】パート・アルバイト含む</p> {# <p class="text top">必須項目 <span>※</span></p> #} </div> <div class="list-item"> <div class="item"> <table> <tr> <td><p class="required">職業</p></td> <td> <div class="fill v4"> <div class="select"> {{ form_widget(form.employed_job) }} </div> </div> {{ form_errors(form.employed_job) }} </td> </tr> <tr> <td><p class="required">業種</p></td> <td> <div class="fill v4"> <div class="select"> {{ form_widget(form.employed_industry) }} </div> </div> {{ form_errors(form.employed_industry) }} </td> </tr> <tr> <td><p class="required">お勤め先(派遣元)</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.employed_company) }} </label> </div> {{ form_errors(form.employed_company) }} </td> </tr> <tr> <td><p class="required">お勤め先フリガナ</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.employed_company_kana) }} </label> </div> {{ form_errors(form.employed_company_kana) }} </td> </tr> <tr> <td><p class="required">お勤め先住所</p></td> <td> <div class="fill v3"> <label class="label v2"> 郵便番号 {{ form_widget(form.employed_postal_code) }} <a class="btn-post employed_postal_code" href="https://www.post.japanpost.jp/zipcode/" target="_blank"><span>{{ '住所検索'|trans }}</span></a> </label> {{ form_errors(form.employed_postal_code) }} <label class="label v3 address"> 都道府県 <div class="select"> {{ form_widget(form.employed_address_pref) }} </div> </label> {{ form_errors(form.employed_address_pref) }} <label class="label v4 address"> 市区町村・番地 {{ form_widget(form.employed_address_addr01, { 'attr': { 'placeholder': '市区町村名(例:大阪市北区)' }}) }} </label> {{ form_errors(form.employed_address_addr01) }} <label class="label v4 address"> マンション・ビル名 {{ form_widget(form.employed_address_addr02, { 'attr': { 'placeholder': '番地・ビル名(例:西梅田1丁目6-8)' }}) }} </label> {{ form_errors(form.employed_address_addr02) }} </div> </td> </tr> <tr> <td><p class="required">お勤め先電話番号</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.employed_phone_number, {'attr': { 'placeholder': '000-0000-0000' }}) }} </label> </div> {{ form_errors(form.employed_phone_number) }} </td> </tr> <tr> <td><p class="required">勤続年数</p></td> <td> <div class="fill horizontal"> <label> {{ form_widget(form.employed_year, {'attr': { 'style': 'width: 120px;' }}) }} <span>年</span> </label> </div> <div class="fill horizontal"> <label> {{ form_widget(form.employed_month, {'attr': { 'style': 'width: 120px;' }}) }} <span>ヶ月</span> </label> </div> {{ form_errors(form.employed_year) }} {{ form_errors(form.employed_month) }} </td> </tr> <tr> <td><p class="required">税込年収</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.employed_income, {'attr': { 'style': 'width: 120px;' }}) }} <span>万円</span> </label> </div> {{ form_errors(form.employed_income) }} </td> </tr> <tr> <td><p class="required">従業員数</p></td> <td> <div class="fill v2"> <div class="select"> {{ form_widget(form.employed_cnt) }} </div> </div> {{ form_errors(form.employed_cnt) }} </td> </tr> <tr> <td><p class="">出向先・派遣先電話番号</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.employed_company_phone_number, {'attr': { 'placeholder': '000-0000-0000' }}) }} </label> </div> {{ form_errors(form.employed_company_phone_number) }} </td> </tr> </table> </div> </div> </div> <div class="table" id="pensioner"> <div class="table__title"> <p class="step-content__subtitle">【主婦・年金受給者の方】</p> {# <p class="text top">必須項目 <span>※</span></p> #} </div> <div class="list-item"> <div class="item"> <table> <tr> <td><p class="required">世帯主お名前</p></td> <td> <div class="fill"> <label> 姓 {{ form_widget(form.pensioner_name.pensioner_name01, {'attr': { 'placeholder': '姓' }}) }} </label> </div> <div class="fill"> <label> 名 {{ form_widget(form.pensioner_name.pensioner_name02, {'attr': { 'placeholder': '名' }}) }} </label> </div> {{ form_errors(form.pensioner_name.pensioner_name01) }} {{ form_errors(form.pensioner_name.pensioner_name02) }} </td> </tr> <tr> <td><p class="required">フリガナ</p></td> <td> <div class="fill"> <label> セイ {{ form_widget(form.pensioner_kana.pensioner_kana01, {'attr': { 'placeholder': 'セイ' }}) }} </label> </div> <div class="fill"> <label> メイ {{ form_widget(form.pensioner_kana.pensioner_kana02, {'attr': { 'placeholder': 'メイ' }}) }} </label> </div> {{ form_errors(form.pensioner_kana.pensioner_kana01) }} {{ form_errors(form.pensioner_kana.pensioner_kana02) }} </td> </tr> <tr> <td><p class="required">世帯主税込年収</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.pensioner_income, {'attr': { 'style': 'width: 120px;' }}) }} <span>万円</span> </label> </div> {{ form_errors(form.pensioner_income) }} </td> </tr> <tr> <td><p class="required">世帯主のお支払中の<br>クレジット返済額</p></td> <td> <div> <div class="fill horizontal"> {% for key,val in form.household_paying.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.household_paying.vars.full_name }}" value="{{ val.value }}" {% if form.household_paying.vars.data == val.value %}checked{% endif %} required="required" /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.household_paying) }} <div class="fill horizontal"> <div style="margin-right: 2rem;"> <p>有りとご回答された方 毎月の支払額</p> <p class="noice">※住宅ローン・無担保ローンを除く</p> </div> <label> {{ form_widget(form.household_paying_amount, {'attr': { 'style': 'width: 120px;' }}) }} <span>万円</span> </label> </div> {{ form_errors(form.household_paying_amount) }} </div> </td> </tr> <tr> <td><p class="required">年金の種類</p></td> <td> <div class="fill horizontal"> {{ form_widget(form.pensioner_type) }} <label> {{ form_widget(form.pensioner_type_other, {'attr': { 'style': 'width: 120px;' }}) }} </label> </div> {{ form_errors(form.pensioner_type) }} {{ form_errors(form.pensioner_type_other) }} </td> </tr> <tr> <td><p class="required">年金以外の収入</p></td> <td> <div class="fill horizontal"> {% for key,val in form.pensioner_income_other.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.pensioner_income_other.vars.full_name }}" value="{{ val.value }}" {% if form.pensioner_income_other.vars.data == val.value %}checked{% endif %} required="required" /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.pensioner_income_other) }} </td> </tr> <tr> <td><p class="required">今回のお支払い</p></td> <td> <div class="fill horizontal"> {{ form_widget(form.pensioner_payment) }} <label> {{ form_widget(form.pensioner_payment_other, {'attr': { 'style': 'width: 120px;' }}) }} </label> </div> {{ form_errors(form.pensioner_payment) }} {{ form_errors(form.pensioner_payment_other) }} </td> </tr> <tr> <td><p class="required">お勤め先電話番号</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.pensioner_company_phone_number, {'attr': { 'placeholder': '000-0000-0000' }}) }} </label> </div> {{ form_errors(form.pensioner_company_phone_number) }} </td> </tr> <tr> <td><p class="required">年金受給者の税込年収</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.pensioner_income2, {'attr': { 'style': 'width: 120px;' }}) }} <span>万円</span> </label> </div> {{ form_errors(form.pensioner_income2) }} </td> </tr> <tr> <td><p class="required">口座名義人</p></td> <td> <div> <div class="fill horizontal"> {% for key,val in form.pensioner_acount.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.pensioner_acount.vars.full_name }}" value="{{ val.value }}" {% if form.pensioner_acount.vars.data == val.value %}checked{% endif %} required="required" /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.pensioner_acount) }} <p class="noice">※口座名義人が申込者の場合、連帯保証人が必要となる場合があります。</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="step-content step-3"> <div class="step-content__title">連帯保証人の方</div> <div class="table"> {# <p class="text top">必須項目 <span>※</span></p> #} <div class="list-item"> <div class="item"> <table> <tr> <td><p class="required">お名前</p></td> <td> <div class="fill"> <label> 姓 {{ form_widget(form.guarantor_name.guarantor_name01, {'attr': { 'placeholder': '姓' }}) }} </label> </div> <div class="fill"> <label> 名 {{ form_widget(form.guarantor_name.guarantor_name02, {'attr': { 'placeholder': '名' }}) }} </label> </div> {{ form_errors(form.guarantor_name.guarantor_name01) }} {{ form_errors(form.guarantor_name.guarantor_name02) }} </td> </tr> <tr> <td><p class="required">フリガナ</p></td> <td> <div class="fill"> <label> セイ {{ form_widget(form.guarantor_kana.guarantor_kana01, {'attr': { 'placeholder': 'セイ' }}) }} </label> </div> <div class="fill"> <label> メイ {{ form_widget(form.guarantor_kana.guarantor_kana02, {'attr': { 'placeholder': 'メイ' }}) }} </label> </div> {{ form_errors(form.guarantor_kana.guarantor_kana01) }} {{ form_errors(form.guarantor_kana.guarantor_kana02) }} </td> </tr> <tr> <td><p class="required">性別</p></td> <td> <div class="fill horizontal"> {% for key,val in form.guarantor_sex.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.guarantor_sex.vars.full_name }}" value="{{ val.value }}" {% if form.guarantor_sex.vars.data == val.value %}checked{% endif %} required="required" /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.guarantor_sex) }} </td> </tr> <tr> <td><p class="required">生年月日</p></td> <td> <div class="fill v2"> <label class="group_select"> <div class="select vip"> {{ form_widget(form.guarantor_birth.year) }}<span>年</span> </div> <div class="select vip"> {{ form_widget(form.guarantor_birth.month) }}<span>月</span> </div> <div class="select vip"> {{ form_widget(form.guarantor_birth.day) }}<span>日</span> </div> </label> </div> {{ form_errors(form.guarantor_birth) }} </td> </tr> <tr> <td><p class="required">住所</p></td> <td> <div class="fill v3"> <label class="label v2"> 郵便番号 {{ form_widget(form.guarantor_postal_code) }} <a class="btn-post guarantor_postal_code" href="https://www.post.japanpost.jp/zipcode/" target="_blank"><span>{{ '住所検索'|trans }}</span></a> </label> {{ form_errors(form.guarantor_postal_code) }} <label class="label v3 address"> 都道府県 <div class="select"> {{ form_widget(form.guarantor_address_pref) }} </div> </label> {{ form_errors(form.guarantor_address_pref) }} <label class="label v4 address"> 市区町村・番地 {{ form_widget(form.guarantor_address_addr01, { 'attr': { 'placeholder': '市区町村名(例:大阪市北区)' }}) }} </label> {{ form_errors(form.guarantor_address_addr01) }} <label class="label v4 address"> マンション・ビル名 {{ form_widget(form.guarantor_address_addr02, { 'attr': { 'placeholder': '番地・ビル名(例:西梅田1丁目6-8)' }}) }} </label> {{ form_errors(form.guarantor_address_addr02) }} </div> </td> </tr> {# <tr> <td><p class="required">電話番号(ご自宅)</p></td> <td> <div class="fill horizontal"> {% for key,val in form.guarantor_tel_number_type.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.guarantor_tel_number_type.vars.full_name }}" value="{{ val.value }}" {% if form.guarantor_tel_number_type.vars.data == val.value %}checked{% endif %} required="required" /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.guarantor_tel_number_type) }} <div class="fill v2"> <label> {{ form_widget(form.guarantor_tel_number, {'attr': { 'placeholder': '000-0000-0000' }}) }} </label> </div> {{ form_errors(form.guarantor_tel_number) }} </td> </tr> #} <tr> <td><p class="required">電話番号</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.guarantor_phone_number, {'attr': { 'placeholder': '000-0000-0000' }}) }} </label> </div> {{ form_errors(form.guarantor_phone_number) }} </td> </tr> <tr> <td><p class="required">メールアドレス<br>(半角英数字)</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.guarantor_email, {'attr': { 'placeholder': 'example@example.com' }}) }} </label> </div> {{ form_errors(form.guarantor_email) }} </td> </tr> <tr> <td><p class="required">メールアドレス確認用<br>(半角英数字)</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.guarantor_email_confirm, {'attr': { 'placeholder': 'example@example.com' }}) }} </label> </div> {{ form_errors(form.guarantor_email_confirm) }} </td> </tr> <tr> <td><p class="required">契約者との続柄</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.guarantor_relation) }} </label> </div> {{ form_errors(form.guarantor_relation) }} </td> </tr> <tr> <td><p class="required">職業</p></td> <td> <div class="fill v4"> <div class="select"> {{ form_widget(form.guarantor_job) }} </div> </div> {{ form_errors(form.guarantor_job) }} </td> </tr> <tr> <td><p class="required">業種</p></td> <td> <div class="fill v4"> <div class="select"> {{ form_widget(form.guarantor_industry) }} </div> </div> {{ form_errors(form.guarantor_industry) }} </td> </tr> <tr> <td><p class="required">お勤め先(派遣元)</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.guarantor_company) }} </label> </div> {{ form_errors(form.guarantor_company) }} </td> </tr> <tr> <td><p class="required">お勤め先フリガナ</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.guarantor_company_kana) }} </label> </div> {{ form_errors(form.guarantor_company_kana) }} </td> </tr> <tr> <td><p class="required">お勤め先住所</p></td> <td> <div class="fill v3"> <label class="label v2"> 郵便番号 {{ form_widget(form.guarantor_company_postal_code) }} <a class="btn-post guarantor_company_postal_code" href="https://www.post.japanpost.jp/zipcode/" target="_blank"><span>{{ '住所検索'|trans }}</span></a> </label> {{ form_errors(form.guarantor_company_postal_code) }} <label class="label v3 address"> 都道府県 <div class="select"> {{ form_widget(form.guarantor_company_address_pref) }} </div> </label> {{ form_errors(form.guarantor_company_address_pref) }} <label class="label v4 address"> 市区町村・番地 {{ form_widget(form.guarantor_company_address_addr01, { 'attr': { 'placeholder': '市区町村名(例:大阪市北区)' }}) }} </label> {{ form_errors(form.guarantor_company_address_addr01) }} <label class="label v4 address"> マンション・ビル名 {{ form_widget(form.guarantor_company_address_addr02, { 'attr': { 'placeholder': '番地・ビル名(例:西梅田1丁目6-8)' }}) }} </label> {{ form_errors(form.guarantor_company_address_addr02) }} </div> </td> </tr> <tr> <td><p class="required">お勤め先電話番号</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.guarantor_company_phone_number, {'attr': { 'placeholder': '000-0000-0000' }}) }} </label> </div> {{ form_errors(form.guarantor_company_phone_number) }} </td> </tr> <tr> <td><p class="required">勤続年数</p></td> <td> <div class="fill horizontal"> <label> {{ form_widget(form.guarantor_year, {'attr': { 'style': 'width: 120px;' }}) }} <span>年</span> </label> </div> <div class="fill horizontal"> <label> {{ form_widget(form.guarantor_month, {'attr': { 'style': 'width: 120px;' }}) }} <span>ヶ月</span> </label> </div> {{ form_errors(form.guarantor_year) }} {{ form_errors(form.guarantor_month) }} </td> </tr> <tr> <td><p class="required">税込年収</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.guarantor_income, {'attr': { 'style': 'width: 120px;' }}) }} <span>万円</span> </label> </div> {{ form_errors(form.guarantor_income) }} </td> </tr> <tr> <td><p class="required">従業員数</p></td> <td> <div class="fill v2"> <div class="select"> {{ form_widget(form.guarantor_cnt) }} </div> </div> {{ form_errors(form.guarantor_cnt) }} </td> </tr> <tr> <td><p class="">出向先・派遣先電話番号</p></td> <td> <div class="fill v2"> <label> {{ form_widget(form.guarantor_company_phone_number2, {'attr': { 'placeholder': '000-0000-0000' }}) }} </label> </div> {{ form_errors(form.guarantor_company_phone_number2) }} </td> </tr> </table> </div> </div> </div> </div> <div class="step-content step-4"> <div class="step-content__title">工事内容の最終確認</div> <div class="table"> {# <p class="text top">必須項目 <span>※</span></p> #} <div class="list-item"> <div class="item"> <input type="hidden" id="product_total_price" name="{{ form.product_total_price.vars.full_name }}" value="{{ productTotalPrice }}"> <div class="table"> <div class="list-item"> <div class="item active"> <table> <tr> <td><p class="required">希望する工事</p></td> <td> <div class="fill v4"> {% for key,val in form.desired_construction_work.vars.choices %} <div> <label class="form-check"> <input type="radio" name="{{ form.desired_construction_work.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.desired_construction_work.vars.data == val.value %}checked{% endif %} required /> {{ val.label | trans }} </label> </div> {% endfor %} </div> {{ form_errors(form.desired_construction_work) }} </td> </tr> </table> <table id="tableUnderTop" style="padding: 0;"> <tr class="desired_construction_work_02"> <td> <p class="required">工事内容の最終確認</p> {# <small>2段階目</small> #} </td> <td> <div class="fill v4"> {% for key,val in form.desired_construction_work_02.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.desired_construction_work_02.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.desired_construction_work_02.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "新居等への引越しのため設置場所の詳細確認不可" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.desired_construction_work_02) }} </td> </tr> </table> <table id="tableSecond" style="padding: 0;"> {% if (countProductBasic != 0) %} <tr class="content-1"> <td><p class="required">特急券の購入</p></td> <td> <div class="fill v4"> {% for key,val in form.express_tickets.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.express_tickets.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.express_tickets.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} {{ form_widget(form.express_tickets_price) }} </div> {{ form_errors(form.express_tickets) }} </td> </tr> {% endif %} <tr class="content-1"> <td><p class="required">お住まい</p></td> <td> <div class="fill v4"> {% for key,val in form.osumai.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.osumai.vars.full_name }}" data-percent="{{ val.attr['percent'] | default(0) }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.osumai.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.osumai) }} </td> </tr> <tr class="content-1"> <td><p class="required">建物の所有</p></td> <td> <div class="fill v4"> {% for key,val in form.building_ownership.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.building_ownership.vars.full_name }}" data-percent="{{ val.attr['percent'] | default(0) }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.building_ownership.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "賃貸" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事内容によっては受付出来ない可能性もございます。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.building_ownership) }} </td> </tr> <tr class="content-1"> <td><p class="required">構造</p></td> <td> <div class="fill v4"> {% for key,val in form.structure.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.structure.vars.full_name }}" data-percent="{{ val.attr['percent'] | default(0) }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.structure.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.structure) }} </td> </tr> <tr class="content-1"> <td><p class="required">設置台数</p></td> <td> <div class="fill v4"> {% for key,val in form.construction_airs.vars.choices %} {% set has_checked = false %} {% for key2,val2 in form.construction_airs.vars.data %} {% if val.value == val2 %} {% set has_checked = true %} <label class="form-check"> <input type="checkbox" name="{{ form.construction_airs.vars.full_name }}" class="construction_air" data-tatami="{{ val.attr['data-tatami'] | default(0) }}" data-quantity="{{ val.attr['data-quantity'] | default(0) }}" data-price="{{ val.attr['data-price'] | default(0) }}" data-loan="{{ val.attr['data-loan'] | default(0) }}" value="{{ val.value }}" checked /> {{ val.data | trans }} </label> {% endif %} {% endfor %} {% if has_checked == false %} <label class="form-check"> <input type="checkbox" name="{{ form.construction_airs.vars.full_name }}" class="construction_air" data-tatami="{{ val.attr['data-tatami'] | default(0) }}" data-quantity="{{ val.attr['data-quantity'] | default(0) }}" data-price="{{ val.attr['data-price'] | default(0) }}" data-loan="{{ val.attr['data-loan'] | default(0) }}" value="{{ val.value }}"/> {{ val.data | trans }} </label> {% endif %} {% endfor %} {{ form_widget(form.construction_air) }} {{ form_widget(form.number_install) }} {{ form_widget(form.number_install_price) }} </div> {{ form_errors(form.construction_airs) }} </td> </tr> <tr class="content-1"> <td><p class="required">設置工事希望日</p></td> <td> <div class="fill v3"> <label class="label v3 date vip"> 第一希望日 {{ form_widget(form.construction_date_1) }} {{ form_errors(form.construction_date_1) }} <span class="pc"> </span>希望時間帯 <select name="{{ form.time_slot_1.vars.full_name }}" id="time_slot_1"> {% for key,val in form.time_slot_1.vars.choices %} <option value="{{ val.value }}">{{ val.label | trans }} </option> {% endfor %} </select> </label> <label class="label v3 date"> 第二希望日 {{ form_widget(form.construction_date_2) }} {{ form_errors(form.construction_date_2) }} <span class="pc"> </span>希望時間帯 <select name="{{ form.time_slot_2.vars.full_name }}" id="time_slot_2"> {% for key,val in form.time_slot_2.vars.choices %} <option value="{{ val.value }}">{{ val.label | trans }} </option> {% endfor %} </select> </label> <label class="label v3 date"> 第三希望日 {{ form_widget(form.construction_date_3) }} {{ form_errors(form.construction_date_3) }} <span class="pc"> </span>希望時間帯 <select name="{{ form.time_slot_3.vars.full_name }}" id="time_slot_3"> {% for key,val in form.time_slot_3.vars.choices %} <option value="{{ val.value }}">{{ val.label | trans }} </option> {% endfor %} </select> </label> {{ form_widget(form.contents, {'attr': { 'placeholder': 'その他希望等あればご記入ください。' }}) }} {{ form_errors(form.contents) }} </div> </td> </tr> <tr class="content-1"> <td><p class="required">工事内訳</p></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "新設工事に加えて移設工事も希望" %} <p style="padding-left: 2rem;font-size: 0.8em;margin-bottom: 0.5rem;line-height: 1.2;">※エアコン本体の移動はお客様ご自身でお願いいたします。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.construction_type_07) }} </td> </tr> <tr class="construction_type_07_02_v1"> <td><p class="required">工事内訳</p><small>2段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_02_v1.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_02_v1.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_02_v1.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} {{ form_widget(form.construction_type_07_02_v1_price) }} </div> {{ form_errors(form.construction_type_07_02_v1) }} </td> </tr> <tr class="construction_type_07_02_v2"> <td><p class="required">工事内訳</p><small>2段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_02_v2.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_02_v2.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_02_v2.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.construction_type_07_02_v2) }} </td> </tr> <tr class="construction_type_07_03_v1"> <td><p class="required">工事内訳</p><small>3段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_03_v1.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_03_v1.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_03_v1.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.construction_type_07_03_v1) }} </td> </tr> <tr class="construction_type_07_03_v2"> <td><p class="required">工事内訳</p><small>3段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_03_v2.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_03_v2.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_03_v2.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} {{ form_widget(form.construction_type_07_03_v2_price) }} </div> {{ form_errors(form.construction_type_07_03_v2) }} </td> </tr> <tr class="construction_type_07_04_v1"> <td><p class="required">工事内訳</p><small>4段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_04_v1.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_04_v1.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_04_v1.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} {{ form_widget(form.construction_type_07_04_v1_price) }} </div> {{ form_errors(form.construction_type_07_04_v1) }} </td> </tr> <tr class="construction_type_07_04_v2"> <td><p class="required">工事内訳</p><small>4段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_04_v2.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_04_v2.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_04_v2.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} {{ form_widget(form.construction_type_07_04_v2_price) }} </div> {{ form_errors(form.construction_type_07_04_v2) }} </td> </tr> <tr class="construction_type_07_04_v3"> <td><p class="required">工事内訳</p><small>4段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_04_v3.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_04_v3.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_04_v3.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} {{ form_widget(form.construction_type_07_04_v3_price) }} </div> {{ form_errors(form.construction_type_07_04_v3) }} </td> </tr> <tr class="content-1"> <td><p class="required">エアコン設置場所</p></td> <td> <div class="fill v4"> {% for key,val in form.construction_floor_07.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_floor_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_floor_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.construction_floor_07) }} </td> </tr> <tr class="content-1"> <td><p class="required">エレベーターの有無</p><small>※3階以上の場合</small></td> <td> <div class="fill v4"> {% for key,val in form.elevator_07.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.elevator_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.elevator_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} {{ form_errors(form.elevator_07) }} {{ form_widget(form.elevator_07_price) }} </div> </td> </tr> <tr class="content-1"> <td><p class="required">コンセントの有無</p></td> <td> <div class="fill v4"> {% for key,val in form.electrical_outlet_07.vars.choices %} <label class="form-check flex" style="display: flex; align-items: center;flex-wrap: wrap; gap: 0.5rem;"> <input type="radio" name="{{ form.electrical_outlet_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.electrical_outlet_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "なし(別途工事が必要になります)" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.2;">※10m以上の方は別途お見積りさせていただきます。</p> {% endif %} {% if val.value == "不明" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.2;">※工事当日に追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} {{ form_errors(form.electrical_outlet_07) }} {{ form_widget(form.electrical_outlet_07_price) }} </div> </td> </tr> <tr class="electrical_outlet_07_02"> <td> <p>既存コンセントの延長の有無</p> {# <small>2段階目</small> #} </td> <td> <div class="fill v4"> {% for key,val in form.electrical_outlet_07_02.vars.choices %} <label class="form-check flex" style="display: flex; align-items: center;flex-wrap: wrap; gap: 0.5rem;"> <input type="radio" name="{{ form.electrical_outlet_07_02.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.electrical_outlet_07_02.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} {{ form_errors(form.electrical_outlet_07_02) }} {{ form_widget(form.electrical_outlet_07_02_price) }} </div> </td> </tr> <tr class="content-1"> <td><p class="required">建物の契約アンペア</p></td> <td> <div class="fill v4"> {% for key,val in form.contract_amp.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.contract_amp.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.contract_amp.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.contract_amp) }} </td> </tr> <tr class="content-1"> <td><p>コンセントアース端子</p></td> <td> <div class="fill v4"> {% for key,val in form.outlet_earth.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.outlet_earth.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.outlet_earth.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} {% if val.value == "なし" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">*工事当日に追加費用がかかる場合があります。</p> {% endif %} {% if val.value == "不明" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">*工事当日に追加費用がかかる場合があります。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.outlet_earth) }} </td> </tr> <tr class="content-1"> <td><p class="required">配管穴の有無</p></td> <td> <div class="fill v4 vip"> {% for key,val in form.room_size_07.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.room_size_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.room_size_07.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} {% if val.value == "不明" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に追加費用が発生する場合があります。別途エアココからご連絡させていただきます。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.room_size_07) }} <img style="margin-left: auto;" src="{{ asset('assets/img/contact/') }}hole-sample.jpg" alt="配管穴の有無"> </td> </tr> {% if (countProductBasic != 0) %} <tr class="room_size_07_02"> <td><p class="required">配管穴の有無</p><small>2段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.room_size_07_02.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.room_size_07_02.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.room_size_07_02.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.room_size_07_02) }} </td> </tr> {% endif %} <tr class="room_size_07_03_v1"> <td><p class="required">建物の材質</p><small>(穴あけ&貫通スリーブ費)</small></td> <td> <div class="fill v4"> {% for key,val in form.room_size_07_03_v1.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.room_size_07_03_v1.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.room_size_07_03_v1.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} {% if val.value == "その他" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に追加費用が発生する場合があります。</p> {% endif %} {% if val.value == "不明" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} {{ form_widget(form.room_size_07_03_v1_price) }} </div> {{ form_errors(form.room_size_07_03_v1) }} </td> </tr> <tr class="room_size_07_03_v2"> <td><p class="required">建物の材質</p><small>(穴あけ&貫通スリーブ&アスベストみなし工事、対策費と調査報告書作成費)</small></td> <td> <div class="fill v4"> {% for key,val in form.room_size_07_03_v2.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.room_size_07_03_v2.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.room_size_07_03_v2.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} {% if val.value == "その他" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に追加費用が発生する場合があります。</p> {% endif %} {% if val.value == "不明" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} {{ form_widget(form.room_size_07_03_v2_price) }} </div> {{ form_errors(form.room_size_07_03_v2) }} </td> </tr> <tr class="content-1"> <td><p class="required">設置予定場所の<br class="pc" />配管の状態</p></td> <td style="flex-direction: column;"> <div class="fill v5 up"> {% set idx = 0 %} {% for key,val in form.piping_status_07.vars.choices %} {% set idx = idx + 1 %} {% if idx <= 2 %} <div class="group"> <label class="form-check v2"> <input type="radio" name="{{ form.piping_status_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.piping_status_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> <img src="{{ asset('assets/img/form-0y/') }}line-option-0{{ idx }}.jpg" alt=""> </div> {% endif %} {% endfor %} </div> <div class="fill v5"> {% set idx = 0 %} {% for key,val in form.piping_status_07.vars.choices %} {% set idx = idx + 1 %} {% if idx > 2 %} <label class="form-check"> <input type="radio" name="{{ form.piping_status_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.piping_status_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endif %} {% endfor %} </div> {{ form_errors(form.piping_status_07) }} </td> </tr> <tr class="piping_status_07_02"> <td><p class="required">設置予定場所の<br class="pc" />配管の状態</p><small>2段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.piping_status_07_02.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.piping_status_07_02.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.piping_status_07_02.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} </label> {% endfor %} {{ form_widget(form.piping_status_07_02_price) }} </div> {{ form_errors(form.piping_status_07_02) }} </td> </tr> {% if (countProductBasic != 0) %} <tr class="content-1"> <td><p class="required">室内化粧カバーの<br class="pc" />希望の有無</p></td> <td> <div class="fill v4" style="order: 2;"> {% for key,val in form.indoor_cover_07.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.indoor_cover_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.indoor_cover_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "必要(2m以内)" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※2mを超える場合は追加費用がかかります。</p> {% endif %} {% if val.value == "未定" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※化粧カバーが必要になった場合は追加費用がかかります。</p> {% endif %} </label> {% endfor %} {{ form_widget(form.indoor_cover_07_price) }} </div> {{ form_errors(form.indoor_cover_07) }} <img style="margin-left: auto; order: 3;" src="{{ asset('assets/img/contact/') }}item-1.jpg" alt="室内化粧カバー"> </td> </tr> <tr class="content-1"> <td><p class="required">室外化粧カバーの<br class="pc" />希望の有無</p></td> <td> <div class="fill v4"> {% for key,val in form.outdoor_cover.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.outdoor_cover.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.outdoor_cover.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "その他" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に必要になった場合、追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.outdoor_cover) }} <img style="margin-left: auto;" src="{{ asset('assets/img/contact/') }}item-2.jpg" alt="室外化粧カバー"> </td> </tr> <tr class="outdoor_cover_02"> <td><p class="required">室外化粧カバーの<br class="pc" />希望の有無</p><small>2段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.outdoor_cover_02.vars.choices %} <label class="form-check" > <input type="radio" name="{{ form.outdoor_cover_02.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.outdoor_cover_02.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "再使用(交換)同階" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※交換にはすでにスリムダクトが付いている方も含みます。</p> {% endif %} {% if val.value == "再使用(交換)異階" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※交換にはすでにスリムダクトが付いている方も含みます。</p> {% endif %} </label> {% endfor %} {{ form_widget(form.outdoor_cover_02_price) }} </div> {{ form_errors(form.outdoor_cover_02) }} </td> </tr> <tr class="content-1"> <td><p class="required">室外機の設置場所(既設場所・希望設置場所)</p></td> <td> <div class="fill v4"> {% for key,val in form.construction_outdoor_07.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.construction_outdoor_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_outdoor_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "その他" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に必要になった場合、追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} {{ form_widget(form.construction_outdoor_07_price) }} </div> {{ form_errors(form.construction_outdoor_07) }} </td> </tr> {% endif %} <tr class="content-1"> <td><p class="required">室外機の設置方法(既設方法・希望設置方法)</p></td> <td> <div class="fill v4"> {% for key,val in form.setting_install_method.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.setting_install_method.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.setting_install_method.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.setting_install_method) }} <div class="fill v4 construction_method_07_v1" style="margin-left: 2rem; flex-direction: column;"> {% for key,val in form.construction_method_07_v1.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.construction_method_07_v1.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_method_07_v1.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "⑧不明(記載)" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に必要になった場合、追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} <img style="margin-top: 3rem;" src="{{ asset('assets/img/form-0y/install-option.jpg') }}" alt=""> {{ form_widget(form.construction_method_07_v1_price) }} </div> {{ form_errors(form.construction_method_07_v1) }} <div class="fill v4 construction_method_07_v2" style="margin-left: 2rem; flex-direction: column;"> {% for key,val in form.construction_method_07_v2.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.construction_method_07_v2.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_method_07_v2.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "⑧不明(記載)" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に必要になった場合、追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} <img style="margin-top: 3rem;" src="{{ asset('assets/img/form-0y/install-option.jpg') }}" alt=""> {{ form_widget(form.construction_method_07_v2_price) }} </div> {{ form_errors(form.construction_method_07_v2) }} </td> </tr> <tr class="content-1"> <td><p class="required">ファイル添付</p></td> <td> <div class="fill v6"> <div class="group"> <p>詳細お見積りに際し、下記の写真を撮影し添付してください。<br>※夜間に撮影する際はフラッシュを使用してください。</p> </div> <div class="group add"> <div class="group-content"> <label for=""><p>①室内機設置場所(屋内) <span style="color: #2881c3;">※</span></p></label> <div class="custom-file"> {% if form.filename_image_1.vars.data != '' %} {{ form_widget(form.image_1) }} <label for="contact_image_1">選択してください</label> <img src="{{ asset(form.filename_image_1.vars.data, 'save_image') }}" style="width: 150px !important;" /> {% else %} {{ form_widget(form.image_1, {'attr': { 'required': 'required' }}) }} <label for="contact_image_1">選択してください</label> <img src="" style="width: 150px !important;" /> {% endif %} {{ form_errors(form.image_1) }} {{ form_widget(form.filename_image_1) }} </div> </div> <div class="image"> <div class="gr"> <img src="{{ asset('assets/img/construction/') }}item-3.jpg" alt=""> <span>撮影例</span> </div> </div> </div> <div class="group add"> <div class="group-content"> <label for=""><p>②室外機・配管・配管穴が分かる全体写真 <span style="color: #2881c3;">※</span></p></label> <div class="custom-file"> {% if form.filename_image_2.vars.data != '' %} {{ form_widget(form.image_2) }} <label for="contact_image_2">選択してください</label> <img src="{{ asset(form.filename_image_2.vars.data, 'save_image') }}" style="width: 150px !important;" /> {% else %} {{ form_widget(form.image_2, {'attr': { 'required': 'required' }}) }} <label for="contact_image_2">選択してください</label> <img src="" style="width: 150px !important;" /> {% endif %} {{ form_errors(form.image_2) }} {{ form_widget(form.filename_image_2) }} </div> </div> <div class="image"> <div class="gr"> <img src="{{ asset('assets/img/construction/') }}contact-00-attach-02.jpg" alt=""> <span>撮影例</span> </div> </div> </div> <div class="group add"> <div class="group-content"> <label for=""><p>③室外機設置場所<br>(②の写真で室外機設置場所が分かる方は不要)</p></label> <div class="custom-file"> {% if form.filename_image_3.vars.data != '' %} {{ form_widget(form.image_3) }} <label for="contact_image_3">選択してください</label> <img src="{{ asset(form.filename_image_3.vars.data, 'save_image') }}" style="width: 150px !important;" /> {% else %} {{ form_widget(form.image_3) }} <label for="contact_image_3">選択してください</label> <img src="" style="width: 150px !important;" /> {% endif %} {{ form_errors(form.image_3) }} {{ form_widget(form.filename_image_3) }} </div> </div> <div class="image"> <div class="gr"> <img src="{{ asset('assets/img/construction/') }}item-5-1.jpg" alt=""> <span>1階撮影例</span> </div> <div class="gr"> <img src="{{ asset('assets/img/construction/') }}item-5-2.jpg" alt=""> <span>2階撮影例</span> </div> </div> </div> </div> </td> </tr> </table> <table id="tableThree" style="padding: 0;"> <tr> <td> <p class="required">新居の所在地</p> </td> <td> <div class="fill v2"> <label> {{ form_widget(form.location, {'attr': { 'style': '' }}) }} {{ form_errors(form.location) }} </label> </div> </td> </tr> <tr> <td> <p>新居の情報</p> </td> <td> <div class="fill v6" style="width: 100%;"> <div class="group add" style="width: 100%; max-width: 100%;"> <div class="group-content" style="max-width: 100%;"> <div class="custom-file" style="margin-top: 0; margin-bottom: 0.5rem;"> {% if form.filename_floor.vars.data != '' %} {{ form_widget(form.floor) }} <label for="contact_floor" style="width: 500px;max-width: 100%;">選択してください</label> <img src="{{ asset(form.filename_floor.vars.data, 'save_image') }}" style="width: 150px !important;" /> {% else %} {{ form_widget(form.floor) }} <label for="contact_floor" style="width: 500px;max-width: 100%;">選択してください</label> <img src="" style="width: 150px !important;" /> {% endif %} {{ form_errors(form.floor) }} {{ form_widget(form.filename_floor) }} </div> </div> </div> </div> </td> </tr> </table> <div class="result"> <p>概算合計金額</p> <p id="total-price">00,000円</p> {{ form_widget(form.construction_base_price_1) }} {{ form_widget(form.construction_base_price_2) }} {{ form_widget(form.construction_base_price_3) }} {{ form_widget(form.construction_total_price) }} {{ form_widget(form.construction_discount) }} </div> <div style="text-align: right;" class="pc"> 「 {# 本体価格 <span class="product_price"></span>円、 #} {# 標準工事 <span class="base_price"></span>円、 #} 本体価格+標準工事費 <span class="product_base_price"></span>円、 追加工事 <span class="add_price"></span>円 」 </div> <div style="text-align: right;" class="sp"> {# 本体価格 <span class="product_price" style="display: inline-block; width: 100px; text-align: right;"></span>円<br> #} {# 標準工事 <span class="base_price" style="display: inline-block; width: 100px; text-align: right;"></span>円<br> #} 本体価格+標準工事費 <span class="product_base_price" style="display: inline-block; width: 100px; text-align: right;"></span>円<br> 追加工事 <span class="add_price" style="display: inline-block; width: 100px; text-align: right;"></span>円 </div> </div> </div> </div> </div> </div> </div> <div class="check"> <input type="checkbox" name="" id="" required="true"> <label for=""><a href="{{ url('help_privacy') }}" target="_blank">「プライバシーポリシー」</a>に同意する</label> </div> </div> <div class="list-btn"> <button type="button" class="btn btn-sd btn-back" id="btn-back"> <span>戻る</span> </button> <button type="submit" class="btn btn-sd" id="btn-confirm" name="mode" value="confirm"> <span>次へ</span> </button> </div> </form> </div> </div> </div> </div> </div>{% endblock %}