お問い合わせ登録画面
お問い合わせ内容を入力する画面です。
ログインしていると以下項目が入力された状態になります。
- メールアドレス
- お名前
- フリガナ
- 電話番号
お問い合わせ種別は管理画面( 設定 > お問い合わせ > お問い合わせ区分 (opens in a new tab)
)から登録します。
お問い合わせでは、全ての項目が必須入力項目です。
ショップのパス
ドメイン/shop/contact/draft
テーマ管理のファイルパス
ec_force/shop/contacts/draft.html.liquid
ec_force/shop/contacts/draft.html+smartphone.liquid
JS タグ
{{ 'shop/contacts' | javascript_include_tag }}
必要なコンポーネント
※任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。
{{ 'shop/contacts' | javascript_include_tag }}
<!-- お問い合わせ登録画面コンテナ -->
<div id="contacts-form-view">
<!-- お問い合わせフォーム -->
<form id="new_contact" action="/shop/contact" accept-charset="UTF-8" method="post">
<input type="hidden" name="_method" value="put">
<!-- フラッシュメッセージ -->
{{ 'notice' | flash: 'alert alert-success', 'text' }}
{{ 'alert' | flash: 'alert alert-danger', 'text' }}
{{ 'contact_errors' | flash: 'alert alert-danger', 'text' }}
{{ 'error' | flash: 'alert alert-danger', 'text' }}
<!-- お問い合わせ種別 -->
<label>お問い合わせ種別</label>
<select name="contact[contact_type_ids]" id="contact_contact_type_ids">
{% for contact_type in contact_types %}
<option value="{{ contact_type.id }}" {% if contact.contact_types[0].id == contact_type.id %}selected{% endif %}>{{ contact_type.name }}</option>
{% endfor %}
</select>
<!-- メールアドレス -->
<label>メールアドレス</label>
<!-- ログイン済の場合 -->
{% if customer_signed_in %}
<input type="email" class="validate[required,custom[email]]" name="contact[customer_attributes][email]" id="contact_customer_attributes_email" value="{{ current_customer.email }}" disabled>
{% else %}
<input type="email" class="validate[required,custom[email]]" name="contact[customer_attributes][email]" id="contact_customer_attributes_email" value="{{ contact.customer.email }}">
{% endif %}
<!-- お名前 -->
<label>お名前</label>
{% if shop_form_settings['name_1_field'] %}
<!-- フォーム初入力かつログイン済の場合 -->
{% if contact.id == nil and customer_signed_in %}
<input class="validate[required]" type="text" name="contact[address_attributes][name01]" id="contact_address_attributes_name01" value="{{ current_customer.billing_address.full_name }}">
{% else %}
<input class="validate[required]" type="text" name="contact[address_attributes][name01]" id="contact_address_attributes_name01" value="{{ contact.address.full_name }}">
{% endif %}
{% else %}
<!-- フォーム初入力かつログイン済の場合 -->
{% if contact.id == nil and customer_signed_in %}
<input class="validate[required]" type="text" name="contact[address_attributes][name01]" id="contact_address_attributes_name01" value="{{ current_customer.billing_address.name01 }}">
<input class="validate[required]" type="text" name="contact[address_attributes][name02]" id="contact_address_attributes_name02" value="{{ current_customer.billing_address.name02 }}">
{% else %}
<input class="validate[required]" type="text" name="contact[address_attributes][name01]" id="contact_address_attributes_name01" value="{{ contact.address.name01 }}">
<input class="validate[required]" type="text" name="contact[address_attributes][name02]" id="contact_address_attributes_name02" value="{{ contact.address.name02 }}">
{% endif %}
{% endif %}
<!-- フリガナ -->
<label>フリガナ</label>
{% if shop_form_settings['kana_1_field'] %}
<!-- フォーム初入力かつログイン済の場合 -->
{% if contact.id == nil and customer_signed_in %}
<input class="validate[required, custom[katakana]]" type="text" name="contact[address_attributes][kana01]" id="contact_address_attributes_kana01" value="{{ current_customer.billing_address.full_kana }}">
{% else %}
<input class="validate[required, custom[katakana]]" type="text" name="contact[address_attributes][kana01]" id="contact_address_attributes_kana01" value="{{ contact.address.full_kana }}">
{% endif %}
{% else %}
<!-- フォーム初入力かつログイン済の場合 -->
{% if contact.id == nil and customer_signed_in %}
<input class="validate[required, custom[katakana]]" type="text" name="contact[address_attributes][kana01]" id="contact_address_attributes_kana01" value="{{ current_customer.billing_address.kana01 }}">
<input class="validate[required, custom[katakana]]" type="text" name="contact[address_attributes][kana02]" id="contact_address_attributes_kana02" value="{{ current_customer.billing_address.kana02 }}">
{% else %}
<input class="validate[required, custom[katakana]]" type="text" name="contact[address_attributes][kana01]" id="contact_address_attributes_kana01" value="{{ contact.address.kana01 }}">
<input class="validate[required, custom[katakana]]" type="text" name="contact[address_attributes][kana02]" id="contact_address_attributes_kana02" value="{{ contact.address.kana02 }}">
{% endif %}
{% endif %}
<!-- 電話番号 -->
<label>電話番号</label>
{% if shop_form_settings['tel_1_field'] %}
<!-- フォーム初入力かつログイン済の場合 -->
{% if contact.id == nil and customer_signed_in %}
<input class="validate[required, custom[integer]]" type="tel" name="contact[address_attributes][tel01]" id="contact_address_attributes_tel01" value="{{ current_customer.billing_address.full_tel }}" maxlength='12'>
{% else %}
<input class="validate[required, custom[integer]]" type="tel" name="contact[address_attributes][tel01]" id="contact_address_attributes_tel01" value="{{ contact.address.full_tel }}" maxlength='12'>
{% endif %}
{% else %}
<!-- フォーム初入力かつログイン済の場合 -->
{% if contact.id == nil and customer_signed_in %}
<input class="validate[required, custom[integer]]" type="tel" name="contact[address_attributes][tel01]" id="contact_address_attributes_tel01" value="{{ current_customer.billing_address.tel01 }}" maxlength='5'>
-
<input class="validate[required, custom[integer]]" type="tel" name="contact[address_attributes][tel02]" id="contact_address_attributes_tel02" value="{{ current_customer.billing_address.tel02 }}" maxlength='4'>
-
<input class="validate[required, custom[integer]]" type="tel" name="contact[address_attributes][tel03]" id="contact_address_attributes_tel03" value="{{ current_customer.billing_address.tel03 }}" maxlength='4'>
{% else %}
<input class="validate[required, custom[integer]]" type="tel" name="contact[address_attributes][tel01]" id="contact_address_attributes_tel01" value="{{ contact.address.tel01 }}" maxlength='5'>
-
<input class="validate[required, custom[integer]]" type="tel" name="contact[address_attributes][tel02]" id="contact_address_attributes_tel02" value="{{ contact.address.tel02 }}" maxlength='4'>
-
<input class="validate[required, custom[integer]]" type="tel" name="contact[address_attributes][tel03]" id="contact_address_attributes_tel03" value="{{ contact.address.tel03 }}" maxlength='4'>
{% endif %}
{% endif %}
<!-- お問い合わせ内容 -->
<label>お問い合わせ内容</label>
<textarea class="validate[required]" name="contact[content]" id="contact_content">{{ contact.content }}</textarea>
<!-- プライバシーポリシー同意チェックボックス -->
<input class="validate[required]" data-errormessage="プライバリーポリシーに同意していただく必要がございます。" name="agree" type="checkbox">
<a href="/shop/privacy" target="blank">プライバシーポリシー</a>
に同意
<!-- お問い合わせ確認画面リンク -->
<input type="submit" name="commit" value="確認画面へ">
</form>
</div>
画面イメージ
※こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。