{% extends 'default_frame.twig' %}
{% form_theme form 'Form/form_div_layout.twig' %}
{% block stylesheet %}
<link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.css">
<link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css">
{% set errorFields = [
{'field': form.name.name01, 'id': 'contact_name_name01'},
{'field': form.name.name02, 'id': 'contact_name_name02'},
{'field': form.kana.kana01, 'id': 'contact_kana_kana01'},
{'field': form.kana.kana02, 'id': 'contact_kana_kana02'},
{'field': form.postal_code, 'id': 'contact_postal_code'},
{'field': form.address.pref, 'id': 'contact_address_pref'},
{'field': form.address.addr01, 'id': 'contact_address_addr01'},
{'field': form.address.addr02, 'id': 'contact_address_addr02'},
{'field': form.phone_number, 'id': 'contact_phone_number'},
{'field': form.email.first, 'id': 'contact_email_first'},
{'field': form.email.second, 'id': 'contact_email_second'}
] %}
{% if type == "other_confirm" %}
{% set errorFields = errorFields|merge([
{'field': form.order_number, 'id': 'contact_order_number'},
{'field': form.contents, 'id': 'contact_contents'},
]) %}
{% endif %}
{% if type == "coordinate_confirm" %}
{% set errorFields = errorFields|merge([
{'field': form.coordinate_product, 'id': 'contact_coordinate_product'},
{'field': form.enshrine_place_size, 'id': 'contact_enshrine_place_size'},
{'field': form.contact_content, 'id': 'contact_contact_content'}
]) %}
{% endif %}
{% if type == "showroom_confirm" %}
{% set errorFields = errorFields|merge([
{'field': form.date1, 'id': 'contact_date1_month'},
{'field': form.date1, 'id': 'contact_date1_day'},
{'field': form.date1, 'id': 'contact_date1_time'},
{'field': form.date2, 'id': 'contact_date2_month'},
{'field': form.date2, 'id': 'contact_date2_day'},
{'field': form.date2, 'id': 'contact_date2_time'},
]) %}
{% endif %}
<style>
{% for errorField in errorFields %}
{% if form_errors(errorField.field) %}
#{{ errorField.id }} {
background-color: #FDF1F0;
border: 1px solid #C73C3C !important;
}
{% endif %}
{% endfor %}
</style>
<style>
{# MEMO: form_widgetのattrを使い、Tailwindのクラスでスタイリングすると
郵便番号のライブラリで不具合が起きた為、stylesheetを使ってスタイリングしている #}
#contact_address_pref{
width:184px;
padding:8px 16px;
border-radius: 0.375rem;
border: 1px solid #CCC;
@media (max-width: 768px) {
width:100%;
}
}
</style>
<style>
#contact_which_showroom_0 + label{
margin-right: 24px;
}
#contact_contact_method_0 + label{
margin-right: 24px;
}
</style>
{% endblock %}
{% block javascript %}
{{ include("Contact/form_js.twig") }}
<script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<script>
$(function() {
function toggleTextareaState() {
if ($('#contact_what_you_want_4').is(':checked')) {
$('textarea[name="contact[textArea_for_what_you_want]"]').removeAttr('disabled');
} else {
$('textarea[name="contact[textArea_for_what_you_want]"]').attr('disabled', 'disabled');
}
}
$('input[name="contact[what_you_want]"]').on('change', toggleTextareaState);
toggleTextareaState();
});
</script>
<script>
$(document).ready(function() {
var currentYear = new Date().getFullYear();
$('#contact_date2_month, #contact_date2_day, #contact_date2_time').on('change', function() {
if ($('#contact_date2_month').val() === '' && $('#contact_date2_day').val() === '' && $('#contact_date2_time').val() === '') {
// 全て--の場合、contact_date2_yearも--に設定
$('#contact_date2_year').val('--');
} else {
// いずれかが選択されている場合、contact_date2_yearの値を現在の年に設定
$('#contact_date2_year').val(currentYear);
}
});
});
$(document).ready(function() {
// ショールームの選択肢を変更する関数
function updateTimeOptions(showroom) {
var date1TimeSelect = $('#contact_date1_time');
var date2TimeSelect = $('#contact_date2_time');
// 初期化
date1TimeSelect.empty().append('<option value="">--</option>');
date2TimeSelect.empty().append('<option value="">--</option>');
if (showroom === '銀座ショールーム予約') {
date1TimeSelect.append('<option value="10:00">10:00</option>');
date1TimeSelect.append('<option value="13:30">13:30</option>');
date1TimeSelect.append('<option value="16:00">16:00</option>');
date2TimeSelect.append('<option value="10:00">10:00</option>');
date2TimeSelect.append('<option value="13:30">13:30</option>');
date2TimeSelect.append('<option value="16:00">16:00</option>');
// もし選択されている値が10:30なら解除
if (date1TimeSelect.val() === '10:30') {
date1TimeSelect.val('');
}
if (date2TimeSelect.val() === '10:30') {
date2TimeSelect.val('');
}
} else if (showroom === '横浜ショールーム予約') {
date1TimeSelect.append('<option value="10:30">10:30</option>');
date1TimeSelect.append('<option value="13:30">13:30</option>');
date1TimeSelect.append('<option value="16:00">16:00</option>');
date2TimeSelect.append('<option value="10:30">10:30</option>');
date2TimeSelect.append('<option value="13:30">13:30</option>');
date2TimeSelect.append('<option value="16:00">16:00</option>');
// もし選択されている値が10:00なら解除
if (date1TimeSelect.val() === '10:00') {
date1TimeSelect.val('');
}
if (date2TimeSelect.val() === '10:00') {
date2TimeSelect.val('');
}
}
}
// ショールームの変更イベント
$('input[name="contact[which_showroom]"]').change(function() {
var selectedShowroom = $(this).val();
updateTimeOptions(selectedShowroom);
});
// 初期表示時に選択されているショールームの選択肢を設定
var initialShowroom = $('input[name="contact[which_showroom]"]:checked').val();
if (initialShowroom) {
updateTimeOptions(initialShowroom);
} else {
$('#contact_date1_time').empty().append('<option value="">--</option>');
$('#contact_date2_time').empty().append('<option value="">--</option>');
}
});
</script>
{% endblock %}
{% block main %}
<div class="w-[720px] md:w-full lg:px-4 mt-10 md:mt-6 mx-auto font-light">
<div class="tt">
<h1 class="text-[26px] md:text-[18px] mb-[20px]">お問い合わせ</h1>
</div>
<div class="mb-6 text-[15px] md:text-[12px]">
<p class="">商品・サービスについてなど、お気軽にお問い合わせください。</p>
<p class="font-[700] text-[#BE5255]">※ は必須項目です。</p>
</div>
<div class="mb-6 bg-[#f7f7f0] py-10 md:py-5 text-center">
<dl class="">
<dt class="text-2xl md:text-lg leading-tight mb-4">お電話でも商品のご注文・ご相談</dt>
<dt class="text-2xl md:text-lg leading-tight mb-4">ショールームのご予約を承ります。</dt>
<dt class="text-2xl md:text-lg leading-tight mb-4">お気軽にお問い合わせください。</dt>
<dd class="flex justify-center items-center">
<img src="{{ asset('assets/img/contact/tel_new.png') }}" class="w-72 md:w-7/10">
</dd>
<a href="tel:0355795671" class="w-fit px-20 py-3 rounded-full border-2 border-[#DDDDDD] bg-white gap-1 mx-auto mt-4 md:flex hidden items-center">
<i class="fas fa-phone fa-flip-horizontal fa-md" style="color: #999999;"></i>
<p class="text-sm text-[#666666] font-extralight">電話をかける</p>
</a>
</dl>
</div>
<div class="flex flex-col justify-center items-center gap-2 pb-8 md:pb-6 w-full max-w-[592px] mx-auto">
<div class="flex items-center w-full justify-between md:text-sm">
<div class="w-11 h-11 bg-manakaProgress flex items-center justify-center rounded-full">
<p class="text-white font-bold font-notoserif leading-none">1</p>
</div>
<div class="w-[33vw] flex-1 h-[6px] bg-[#CCC]"></div>
<div class="w-11 h-11 bg-[#CCC] flex items-center justify-center rounded-full">
<p class="text-white font-bold font-notoserif leading-none">2</p>
</div>
<div class="w-[33vw] flex-1 h-[6px] bg-[#CCC]"></div>
<div class="w-11 h-11 bg-[#CCC] flex items-center justify-center rounded-full">
<p class="text-white font-bold font-notoserif leading-none">3</p>
</div>
</div>
<div class="flex w-full items-center text-sm font-bold text-[#666666] md:text-xs mx-auto max-w-[800px] justify-between">
<p class=" w-[26vw] pl-1">入力</p>
<p class="text-center w-[18vw]">送信内容の確認</p>
<p class="text-end w-[27.8vw]">送信完了</p>
</div>
</div>
<form method="post" action="
{% if type == 'showroom_confirm' %}
{{ path('showroom_confirm') }}
{% elseif type == 'catalog_confirm' %}
{{ path('catalog_confirm') }}
{% elseif type == 'other_confirm' %}
{{ path('other_confirm') }}
{% elseif type == 'coordinate_confirm' %}
{{ path('coordinate_confirm') }}
{% else %}
{{ path('contact') }}
{% endif %}
" class="h-adr" novalidate>
<span class="p-country-name" style="display:none;">Japan</span>
{{ form_widget(form._token) }}
{{ form_widget(form.contact_type, {'attr': { 'class': 'hidden'}}) }}
<div class="flex flex-col">
{% if type == "showroom_confirm" %}
<dl class="flex items-center border-t-2 border-[#CCC] py-4 md:flex-col md:items-start">
<dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
<p class="md:text-sm leading-8 font-bold">● 会場</p>
<p class="text-sm md:text-xs text-manakaRed">※</p>
</dt>
<dd class="w-3/5 md:w-full">
<div class="ec-halfInput{{ has_errors(form.which_showroom) ? ' error' }} w-full">
{{ form_widget(form.which_showroom) }}
<div class="flex flex-col gap-1 mt-1">
{% if form_errors(form.which_showroom) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex">
{{ form_errors(form.which_showroom) }}
</span>
</div>
{% endif %}
</div>
</div>
</dd>
</dl>
{% endif %}
<dl class="flex items-center border-t-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
<p class="md:text-sm leading-8 font-bold">● お名前</p>
<p class="text-sm md:text-xs text-manakaRed">※</p>
</dt>
<dd class="w-3/5 md:w-full">
<div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error' }}">
<div class="flex gap-2">
<div class="flex flex-col gap-1 md:w-full">
{{ form_widget(form.name.name01, {'attr': { 'placeholder': '姓' , 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
{% if form_errors(form.name.name01) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
姓:{{ form_errors(form.name.name01) }}</span>
</div>
{% endif %}
</div>
<div class="flex flex-col gap-1 md:w-full">
{{ form_widget(form.name.name02, {'attr': { 'placeholder': '名' , 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
{% if form_errors(form.name.name02) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
名:{{ form_errors(form.name.name02) }}
</span>
</div>
{% endif %}
</div>
</div>
</div>
</dd>
</dl>
<dl class="flex items-center border-t-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
<p class="md:text-sm leading-8 font-bold">● お名前(フリガナ)</p>
<p class="text-sm md:text-xs text-manakaRed">※</p>
</dt>
<dd class="w-3/5 md:w-full">
<div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error' }}">
<div class="flex gap-2">
<div class="flex flex-col gap-1 md:w-full">
{{ form_widget(form.kana.kana01, {'attr': { 'placeholder': 'セイ' , 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
{% if form_errors(form.kana.kana01) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
セイ:{{ form_errors(form.kana.kana01) }}</span>
</div>
{% endif %}
</div>
<div class="flex flex-col gap-1 md:w-full">
{{ form_widget(form.kana.kana02, {'attr': { 'placeholder': 'メイ' , 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
{% if form_errors(form.kana.kana02) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
メイ:{{ form_errors(form.kana.kana02) }}
</span>
</div>
{% endif %}
</div>
</div>
</div>
</dd>
</dl>
<dl class="flex items-start border-t-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
<p class="md:text-sm leading-8 font-bold">● 住所</p>
</dt>
<dd class="w-3/5 md:w-full">
<div class="flex flex-col gap-4">
<div>
<div>
<div class="flex gap-x-4 items-center md:flex-col w-full gap-y-4 md:items-start">
<div class="flex gap-x-2 items-center">
<span>{{ 'common.postal_symbol'|trans }}</span>
<div class="w-[160px] ec-zipInput">
{{ form_widget(form.postal_code, {'attr':{'class': 'w-full border-[#CCC] border rounded px-4 py-2 p-postal-code'}}) }}
</div>
</div>
</div>
{% if form_errors(form.postal_code) %}
<div class="!text-red text-xs flex items-center gap-2 ">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
郵便番号:{{ form_errors(form.postal_code) }}
</span>
</div>
{% endif %}
</div>
<a href="https://www.post.japanpost.jp/zipcode/" target="_blank" class="text-sm border-b w-fit leading-7 tracking-wider hover">郵便番号を検索する(外部サイトへ)</a>
</div>
<div class="ec-select{{ has_errors(form.address.pref) ? ' error' }}">
{{ form_widget(form.address.pref) }}
{% if form_errors(form.address.pref) %}
<div class="!text-red text-xs flex items-center gap-2 ">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
都道府県:{{ form_errors(form.address.pref) }}
</span>
</div>
{% endif %}
</div>
<div class="ec-input{{ has_errors(form.address.addr01) ? ' error' }}">
<div class=" w-full ">
{{ form_widget(form.address.addr01, { 'attr': {'placeholder': '市区町村名 (例:千代田区神田神保町)', 'class': 'p-locality p-street-address w-full border-[#CCC] border rounded px-4 py-2'}}) }}</div>
{% if form_errors(form.address.addr01) %}
<div class="!text-red text-xs flex items-center gap-2 ">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex">
市区町村:{{ form_errors(form.address.addr01) }}
</span>
</div>
{% endif %}
</div>
<div class="ec-input{{ has_errors(form.address.addr02) ? ' error' }}">
<div class="w-full">
{{ form_widget(form.address.addr02, { 'attr': {'placeholder': '番地・ビル名(例:1-3-5 まなかマンション908)', 'class': 'w-full border-[#CCC] border rounded px-4 py-2 p-extended-address'}}) }}</div>
{% if form_errors(form.address.addr02) %}
<div class="!text-red text-xs flex items-center gap-2 ">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
番地・ビル名:{{ form_errors(form.address.addr02) }}
</span>
</div>
{% endif %}
</div>
</div>
</dd>
</dl>
<dl class="flex items-center border-t-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
<p class="md:text-sm leading-8 font-bold">● 電話番号</p>
<p class="text-sm md:text-xs text-manakaRed">※</p>
</dt>
<dd class="w-3/5 md:w-full">
<div class="ec-halfInput{{ has_errors(form.phone_number, form.phone_number) ? ' error' }}">
<div class="flex flex-col gap-1">
{{ form_widget(form.phone_number, {'attr': {'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
{% if form_errors(form.phone_number) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
電話番号: {{ form_errors(form.phone_number) }}</span>
</div>
{% endif %}
</div>
</div>
</dd>
</dl>
<dl class="flex items-start border-t-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
<p class="md:text-sm leading-8 font-bold">● メールアドレス</p>
<p class="text-sm md:text-xs text-manakaRed">※</p>
</dt>
<dd class="w-3/5 md:w-full">
<div class="ec-halfInput{{ has_errors(form.email.first, form.email.first) ? ' error' }}">
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-1">
{{ form_widget(form.email.first, {'attr': { 'placeholder': 'メールアドレス' , 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
{% if form_errors(form.email.first) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
メールアドレス: {{ form_errors(form.email.first) }}</span>
</div>
{% endif %}
</div>
<div class="flex flex-col gap-1 ">
{{ form_widget(form.email.second, {'attr': { 'placeholder': 'メールアドレス(確認用)' , 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
{% if form_errors(form.email.second) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
メールアドレス(確認用):{{ form_errors(form.email.second) }}
</span>
</div>
{% endif %}
</div>
<p class="text-[#666] pt-4 text-xs whitespace-normal font-normal">
※『itsukushi@manaka-net.com』からのメールを受信できる設定になっていることをご確認下さい。<br><br>
※MMSはご利用になれません。キャリアメールは極力お控え頂けますようお願い申し上げます。<br><br>
※@outlook.jp / @outlook.com / @hotmail.co.jp / @live.jp のメールアドレスをご使用のお客様へはメールが届かない場合がございます。ほかにお持ちのメールアドレスのご登録をお願いいたします。
</p>
</div>
</div>
</dd>
</dl>
{% if type == 'other_confirm' %}
<dl class="flex items-center border-t-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 md:w-full">
<p class="md:text-sm leading-8 font-bold">● 注文番号</p>
</dt>
<dd class="w-3/5 md:w-full">
{{ form_widget(form.order_number, {'attr': { 'class': 'w-full border-[#CCC] border rounded px-4 py-2'}}) }}
{% if form_errors(form.order_number) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
注文番号:{{ form_errors(form.order_number) }}
</span>
</div>
{% endif %}
</dd>
</dl>
<dl class="flex items-start border-y-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 md:w-full">
<p class="md:text-sm leading-8 font-bold">● お問い合わせ内容</p>
<p class="text-sm md:text-xs text-manakaRed">※</p>
</dt>
<dd class="w-3/5 md:w-full">
{{ form_widget(form.contents, {'attr': { 'class': 'h-[120px] w-full border-[#CCC] border rounded px-4 py-2'}}) }}
{% if form_errors(form.contents) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
お問い合わせ内容:{{ form_errors(form.contents) }}
</span>
</div>
{% endif %}
</dd>
</dl>
{% endif %}
{% if type == 'coordinate_confirm' %}
<dl class="flex items-start border-t-2 border-[#CCC] pt-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
<p class="md:text-sm leading-8 font-bold">● ご希望の連絡方法</p>
<p class="text-sm md:text-xs text-manakaRed">※</p>
</dt>
<dd class="w-3/5 md:w-full mb-2">
{{ form_widget(form.contact_method) }}
{% if form_errors(form.contact_method) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
{{ form_errors(form.contact_method) }}
</span>
</div>
{% endif %}
</dd>
</dl>
<p class="text-[#666] text-xs whitespace-normal font-normal pb-4">
※電話をご希望の場合は、一両日中にこちらから、ご連絡いたします。お急ぎの方は、大変恐れ入りますが、お電話にてご連絡をお願いいたします。
</p>
<dl class="flex items-start border-t-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
<p class="md:text-sm leading-8 font-bold">● コーディネートをご希望の商品</p>
<p class="text-sm md:text-xs text-manakaRed">※</p>
</dt>
<dd class="w-3/5 md:w-full">
{{ form_widget(form.coordinate_product,{'attr': {'class': 'h-[120px] w-full border-[#CCC] border rounded px-4 py-2'}},{id: 'wysiwyg-area'}) }}
{% if form_errors(form.coordinate_product) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
{{ form_errors(form.coordinate_product) }}
</span>
</div>
{% endif %}
</dd>
</dl>
<dl class="flex items-start border-t-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
<p class="md:text-sm leading-8 font-bold">● お祀りする場所の寸法</p>
<p class="text-sm md:text-xs text-manakaRed">※</p>
</dt>
<dd class="w-3/5 md:w-full">
{{ form_widget(form.enshrine_place_size,{'attr': {'class': 'h-[120px] w-full border-[#CCC] border rounded px-4 py-2'}},{id: 'wysiwyg-area'}) }}
{% if form_errors(form.enshrine_place_size) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
{{ form_errors(form.enshrine_place_size) }}
</span>
</div>
{% endif %}
</dd>
</dl>
<dl class="flex items-center border-t-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 md:w-full md:mb-4">
<p class="md:text-sm font-medium leading-8">● 画像のアップロード</p>
</dt>
<dd class="w-3/5 md:w-full">
<p>
お祀りをお考えのお部屋や、<br/>
イメージされている参考写真などがありましたら、<br/>
こちらからアップロードしてください。
</p>
<div id="upload-zone">
{{ form_widget(form.coordinate_image, { attr : { style : 'display:none;' } }) }}
</div>
</dd>
</dl>
<dl class="flex items-start border-y-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
<p class="md:text-sm leading-8 font-bold">● 商品等に関するご案内</p>
<p class="text-sm md:text-xs text-manakaRed">※</p>
</dt>
<dd class="w-3/5 md:w-full">
{{ form_widget(form.guidance_for_product) }}
{% if form_errors(form.guidance_for_product) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
{{ form_errors(form.guidance_for_product) }}
</span>
</div>
{% endif %}
</dd>
</dl>
<dl class="flex items-start border-b-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
<p class="md:text-sm leading-8 font-bold">● お問い合わせ内容</p>
<p class="text-sm md:text-xs text-manakaRed">※</p>
</dt>
<dd class="w-3/5 md:w-full">
{{ form_widget(form.contact_content,{'attr': {'class': 'h-[120px] w-full border-[#CCC] border rounded px-4 py-2'}},{id: 'wysiwyg-area'}) }}
{% if form_errors(form.contact_content) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
{{ form_errors(form.contact_content) }}
</span>
</div>
{% endif %}
</dd>
</dl>
{% endif %}
{% if type == "showroom_confirm" %}
<dl class="showroom-item flex items-start border-t-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 md:w-full">
<p class="md:text-sm leading-8 font-bold">● 希望日程</p>
<p class="text-sm md:text-xs text-manakaRed">※</p>
</dt>
<dd class="w-3/5 md:w-full flex flex-col gap-4">
<div>
第一希望:
<div class="form-inline form-group date-select flex items-center">
{{ form_widget(form.date1.year, {'attr': {'style': 'display: none;'}}) }}
{{ form_widget(form.date1.month, {'attr': {'class': 'select-control px-4 py-2 border border-[#CCC] rounded'}}) }} 月
{{ form_widget(form.date1.day, {'attr': {'class': 'select-control px-4 py-2 border border-[#CCC] rounded'}}) }} 日
{{ form_widget(form.date1_time, {'attr': {'class': 'select-control px-4 py-2 border border-[#CCC] rounded'}}) }}
</div>
{% if form_errors(form.date1) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex flex-col">
{{ form_errors(form.date1) }}
</span>
</div>
{% endif %}
</div>
<div>
第二希望:
<div class="form-inline form-group date-select flex items-center">
{{ form_widget(form.date2.year, {'attr': {'style': 'display: none;'}}) }}
{{ form_widget(form.date2.month, {'attr': {'class': 'select-control px-4 py-2 border border-[#CCC] rounded'}}) }} 月
{{ form_widget(form.date2.day, {'attr': {'class': 'select-control px-4 py-2 border border-[#CCC] rounded'}}) }} 日
{{ form_widget(form.date2_time, {'attr': {'class': 'select-control px-4 py-2 border border-[#CCC] rounded'}}) }}
</div>
{% if form_errors(form.date2) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex flex-col">
{{ form_errors(form.date2) }}
</span>
</div>
{% endif %}
</div>
</div>
</dd>
</dl>
<dl class="flex items-start border-y-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
<p class="md:text-sm leading-8 font-bold">● その他、気になる点がありましたらご記入ください。<br/>( フリーワード )</p>
</dt>
<dd class="w-3/5 md:w-full">
{{ form_widget(form.showroom_freetext,{'attr': {'class': 'h-[120px] w-full border-[#CCC] border rounded px-4 py-2 resize-none'}},{id: 'wysiwyg-area'}) }}
{% if form_errors(form.showroom_freetext) %}
<div class="!text-manakaRed text-xs flex items-center gap-2">
<img src="{{asset('assets/icon/error.svg')}}" alt="Error Image" class="w-3 h-3">
<span class="flex ">
{{ form_errors(form.showroom_freetext) }}
</span>
</div>
{% endif %}
</dd>
</dl>
{% endif %}
{% if type == 'catalog_confirm' %}
<dl class="flex items-start border-y-2 border-[#CCC] py-4 md:flex-col">
<dt class="w-2/5 flex items-center gap-2 mb-5 md:mb-3 md:w-full">
<p class="md:text-sm leading-8 font-bold">● よろしければアンケートにご協力ください。</p>
</dt>
<dd class="w-3/5 md:w-full">
<div class="flex flex-col">
<dl class="flex flex-col">
<dt class="px-4 py-2.5 bg-[#EEE]">
Q1.商品等に関するご案内
</dt>
<dd>
<div>
<ul class="flex flex-wrap md:flex-col gap-6 py-5">
{% for child in form.is_send_email %}
<li class="flex items-center">
{{ form_widget(child) }}
{{ form_label(child) }}
</li>
{% endfor %}
</ul>
</div>
{{ form_errors(form.is_send_email) }}
</dd>
</dl>
<dl class="flex flex-col">
<dt class="px-4 py-2.5 bg-[#EEE]">
Q2.まなかを知ったきっかけ
</dt>
<dd>
<div>
<ul class="flex flex-wrap md:flex-col gap-6 py-5">
{% for child in form.where_did_you_know %}
<li class="flex items-center">
{{ form_widget(child) }}
{{ form_label(child) }}
</li>
{% endfor %}
</ul>
</div>
{{ form_errors(form.where_did_you_know) }}
</dd>
</dl>
<dl class="flex flex-col">
<dt class="px-4 py-2.5 bg-[#EEE]">
Q3. ご検討中の商品 ※複数可
</dt>
<dd>
<div>
<ul class="flex flex-wrap flex-col gap-4 py-5">
{% for child in form.purchase_plan %}
<li class="flex items-center">
{{ form_widget(child) }}
{{ form_label(child) }}
</li>
{% endfor %}
</ul>
</div>
{{ form_errors(form.purchase_plan) }}
</dd>
</dl>
<dl class="flex flex-col">
<dt class="px-4 py-2.5 bg-[#EEE]">
Q4. ご予算
</dt>
<dd>
<div>
<ul class="flex flex-wrap md:flex-col gap-6 py-5">
{% for child in form.budget %}
<li class="flex items-center">
{{ form_widget(child) }}
{{ form_label(child) }}
</li>
{% endfor %}
</ul>
</div>
{{ form_errors(form.budget) }}
</dd>
</dl>
<dl class="flex flex-col">
<dt class="px-4 py-2.5 bg-[#EEE]">
Q5. ご供養される場所
</dt>
<dd>
<div>
<ul class="flex flex-wrap md:flex-col gap-6 py-5">
{% for child in form.enshrine_place %}
<li class="flex items-center">
{{ form_widget(child) }}
{{ form_label(child) }}
</li>
{% endfor %}
</ul>
</div>
{{ form_errors(form.enshrine_place) }}
</dd>
</dl>
<dl class="flex flex-col">
<dt class="px-4 py-2.5 bg-[#EEE]">
Q6. その他お問合せ
</dt>
<dd>
{{ form_widget(form.other_contact,{'attr': {'placeholder':'例) その他お問合せ' ,'class': 'h-[120px] w-full border-[#CCC] border rounded mt-4 px-4 py-2 resize-none'}},{id: 'wysiwyg-area'}) }}
{{ form_errors(form.other_contact) }}
</dd>
</dl>
</div>
</dd>
</dl>
{% endif %}
</div>
<div class="flex flex-col items-center mt-10 md:mt-8">
<p class="text-sm mb-6 md:mb-4">
<a class="border-b border-black hover" href="{{ url('help_privacy') }}" target="_blank">プライバシーポリシー</a>
に同意の上、</p>
<button type="submit" class="w-[327px] py-3 rounded-[3px] bg-[#333] text-sm text-white mb-10 md:mb-4 hover" name="mode" value="form">確認画面へ
</button>
<div class="flex flex-col gap-2 text-xs max-w-[384px] md:max-w-none text-[#999]">
<p class="leading-4">※内容によっては、回答をさしあげるのにお時間を頂くこともございます。</p>
<p class="leading-4">※休業日は翌営業日以降の対応となりますので、ご了承ください。</p>
<p class="leading-4">※inori@manaka-net.comからのメールが受信できるように設定をお願いします。</p>
</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 %}
</form>
</div>
{% set breadcrumbs = [{'name': 'お問い合わせ(入力ページ)'}] %}
{{ include('Block/breadcrumbs.twig') }}
{% endblock %}