テーマ仕様書
shop
お問い合わせ
入力画面

お問い合わせ登録画面

お問い合わせ内容を入力する画面です。
ログインしていると以下項目が入力された状態になります。

  • メールアドレス
  • お名前
  • フリガナ
  • 電話番号

お問い合わせ種別は管理画面( 設定 > お問い合わせ > お問い合わせ区分 (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であてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。