ご契約の追加 | スタイルガイド

コンテンツエリア毎のラッピング

各コンテンツエリアは「t-contract_add」クラスを付与したタグで囲ってください。


  <div class="t-contract_add">
    <!-- 各コンテンツが入ります -->
  </div>

追加するご契約：入力画面

基本レイアウトは「t-contract_add」クラス内の「t-container」クラス内に下記を参考に記述してください。
（※関連ファイル：jquery-3.4.1.min.js、contract_add.js）

ご登録のメールアドレス

a-wada@aioinissaydowa.co.jp

追加するご契約

証券番号
登録番号(下4桁)

登　録


  <body>

    <div class="t-contract_add">

      <section class="t-container">

        <div class="t-contract_add-body">
          <div class="t-contract_add-body-user">
            <div class="t-contract_add-body-user-box">
              <h2 class="t-contract_add-body-user-title">ご登録のメールアドレス</h2>
              <table class="t-contract_add-body-user-table">
                <tbody>
                  <tr>
                    <td>a-wada@aioinissaydowa.co.jp</td>
                  </tr>
                </tbody>
              </table><!-- /.t-contract_add-body-user-table -->
            </div><!-- /.t-contract_add-body-user-box -->
            <div class="t-contract_add-body-user-box">
              <h2 class="t-contract_add-body-user-title">追加するご契約</h2>
              <table class="t-contract_add-body-user-table">
                <tbody>
                  <tr>
                    <th class="t-contract_add-body-user-table-form_title">証券番号</th>
                    <td><input type="text" name="input-1" value="" class="t-contract_add-body-user-input"></td>
                  </tr>
                  <tr>
                    <th class="t-contract_add-body-user-table-form_title">登録番号(下4桁)</th>
                    <td><input type="text" name="input-2" value="" class="t-contract_add-body-user-input"></td>
                  </tr>
                </tbody>
              </table><!-- /.t-contract_add-body-user-table -->
            </div><!-- /.t-contract_add-body-user-box -->
          </div><!-- /.t-contract_add-body-user -->
        </div><!-- /.t-contract_add-body -->

      </section>

      <section class="t-container">
        <div class="t-block">

          <div class="button-group">
            <div class="t-btn t-btn-primary t-contract_add-input-button">登　録</div>
          </div><!-- /.button-group -->

        </div><!-- /.block -->
      </section>

    </div><!-- /.t-contract_add -->

  </body>

追加するご契約：パラメータの受け渡し

「登録」ボタンをクリックすると
・[name="input-1"]の値 → [name="input_set1"]
・[name="input-2"]の値 → [name="input_set2"]
上記にセットします。

モーダルの「戻る」をクリックすると[name="input_set1"]と[name="input_set2"]の値をクリアします。
モーダルの「OK」をクリックすると[name="input_set1"]と[name="input_set2"]の値をsubmitします。

（※関連ファイル：contract_add.js）

コンテンツ「ご契約の追加（別のメールアドレスで登録済み）」のラッピング

各コンテンツエリアは「t-contract_mail」クラスを付与したタグで囲ってください。


  <div class="t-contract_mail">
    <!-- 各コンテンツが入ります -->
  </div>

ご契約の追加（別のメールアドレスで登録済み）：入力画面

基本レイアウトは「t-contract_mail」クラス内の「t-container」クラス内に下記を参考に記述してください。

入力いただいたご契約は、すでに別のメールアドレスで登録済みです。一覧へ追加する場合は登録済みのメールアドレス・パスワードを入力してください。

現在ログイン中のメールアドレス・パスワードに変更され、ご登録いただいている変更前のメールアドレス・パスワードではログインできなくなります。

登録済みのメールアドレス

登録済みのパスワード


  <body>

    <div class="t-contract_mail">

      <section class="t-container">

        <div class="t-block">

          <p class="t-text">入力いただいたご契約は、すでに別のメールアドレスで登録済みです。一覧へ追加する場合は登録済みのメールアドレス・パスワードを入力してください。</p>

          <ul class="t-annotation">
            <li class="t-annotation-item">現在ログイン中のメールアドレス・パスワードに変更され、ご登録いただいている変更前のメールアドレス・パスワードではログインできなくなります。</li>
          </ul>

        </div><!-- /.t-block -->

        <form action="../contract_add/setting.php" method="post">

          <div class="t-block">

            <div class="t-items">

              <div class="t-items-item">

                <div class="t-title">
                  <h3 class="t-title-group t-title-group-fix t-font-weight-nomal">登録済みのメールアドレス</h3>
                </div><!-- /.t-title -->

                <div class="t-input-group">

                  <div class="t-input-name">
                    <input name="cm01" type="email">
                  </div><!-- /.t-input-name -->

                </div><!-- /.t-input-group -->

                <div class="t-title">
                  <h3 class="t-title-group t-title-group-fix t-font-weight-nomal">登録済みのパスワード</h3>
                </div><!-- /.t-title -->

                <div class="t-input-group">

                  <div class="t-input-name">
                    <input name="cm02" type="text">
                  </div><!-- /.t-input-name -->

                </div><!-- /.t-input-group -->

              </div><!-- /.t-items-item -->

            </div><!-- /.t-items -->

          </div><!-- /.t-block -->

          <div class="t-block">

            <div class="button-group">
              <button class="t-btn t-btn-primary">次　へ</button>
            </div><!-- /.button-group -->

          </div><!-- /.t-block -->

        </form>

      </section>

    </div><!-- /.t-contract_mail -->

  </body>

各種設定（登録）の証券番号テーブル

「t-contract_add-numbers」内に下記を参考に記述してください。

証券番号	F123456789
登録番号(下4桁)	1234


  <div class="t-container">

    <div class="t-contract_add-numbers">
      <table class="t-contract_add-numbers-table">
        <tbody>
          <tr>
            <th>証券番号</th>
            <td>F123456789</td>
          </tr>
          <tr>
            <th>登録番号(下4桁)</th>
            <td>1234</td>
          </tr>
        </tbody>
      </table><!-- /.t-contract_add-numbers-table -->
    </div><!-- /.t-contract_add-numbers -->

  </div>

各種設定（登録）の罫線付きブロック

「t-contract_add-setting-info」内に下記を参考に記述してください。

a-wada@aioinissaydowa.co.jp


  <div class="t-container">

    <div class="t-contract_add-setting-info">
      <div class="t-contract_add-setting-info-text">
        <div class="t-contract_add-setting-info-text-sub">a-wada@aioinissaydowa.co.jp</div>
      </div>
    </div><!-- /.t-contract_add-setting-info -->

  </div>

各種設定（登録）：ボタン選択による表示切替

「t-container」内に下記を参考に記述してください。
（※関連ファイル：contract_add-setting.js）

3 車両からの衝撃検知時の電話連絡（緊急時リアルタイムサポート）
・「希望しない」を選択
→「4 家族等への情報共有（あんしん見守りサポート）」
■事故時のご家族等への状況連絡の【説明文】と【希望する／希望しない】を非表示

4 家族等への情報共有（あんしん見守りサポート）
■安全運転診断アドバイスの共有
・「希望しない」を選択
■事故時のご家族等への状況連絡
・「希望しない」を選択
→【登録するご家族等】を非表示

3 車両からの衝撃検知時の電話連絡（緊急時リアルタイムサポート）
「希望しない」を選択した場合は、
■安全運転診断アドバイスの共有のみを基準に【登録するご家族等】を表示／非表示とします。

3

車両からの衝撃検知時の電話連絡
（緊急時リアルタイムサポート）

車両から大きな衝撃を検知した場合に、当社からの電話連絡を希望されますか？

希望する

ハイフンなしで入力してください。
例）09012345678

希望しない

車両から大きな衝撃を検知した際にご連絡をさせていただきます。主に運転する方の携帯電話番号を登録してください。
希望されない場合、衝撃検知時に、上記２でご登録のメールアドレスに緊急時連絡先をメールでご連絡します。
希望されない場合、事故時のご家族等への状況連絡は行いません。

4

家族等への情報共有
（あんしん見守りサポート）

代理店・扱者の連絡先を登録することも可能です。

■安全運転診断アドバイスの共有

安全運転診断（マンスリーレポート）の結果を登録されたご家族や代理店・扱者等と共有することを希望されますか？

希望する

希望しない

■事故時のご家族等への状況連絡

車両への大きな衝撃を検知し、当社に通知されたデータが事故である場合、当社コールセンターでの対応結果を登録されたご家族や代理店・扱者等へメールで報告することを希望されますか？

希望する

希望しない

登録するご家族等1

様

登録するご家族等2

様

登録するご家族等3

様


  <div class="t-container">

    <div class="t-block">

      <div class="t-numbering">
        <div class="t-numbering-text">
          <div class="t-numbering-number">3</div>
        </div>
        <div class="t-numbering-text">
          <div class="t-numbering-title">車両からの衝撃検知時の電話連絡<br>（緊急時リアルタイムサポート）</div>
        </div>
      </div><!-- /.t-numbering -->

      <p class="t-text">車両から大きな衝撃を検知した場合に、当社からの電話連絡を希望されますか？</p>

      <div class="t-contract_add-group">

        <div id="setting_valid001" class="t-input-group">

          <div class="t-input-radio">
            <input name="i01" id="i01_01" type="radio" value="0" checked="checked" data-openMadal="modal01_01">
            <label for="i01_01">希望する</label>
          </div><!-- /.t-input-radio -->

          <div class="t-input-indent">
            <div class="t-input-flat">
              <input name="i02" type="tel" value="" placeholder="電話番号">
            </div><!-- /.t-input-flat -->
            <div class="t-input-text">
              <small class="t-color-highlight">ハイフンなしで入力してください。<br>例）09012345678</small>
            </div><!-- /.t-input-text -->
          </div><!-- /.t-input-indent -->

          <div id="modal01_01" class="t-modal">

            <div class="t-modal-inner">

              <div class="t-modal-scroll">

                <div class="t-modal-card">

                  <div class="t-modal-card-body">
                    <div class="t-modal-card-header">
                      <div class="t-modal-card-title">
                        <div class="t-modal-card-text">【3】車両からの衝撃検知時の電話連絡</div>
                      </div><!-- /.t-modal-card-title -->
                    </div><!-- /.t-modal-card-header -->
                    <div class="t-modal-card-body">
                      <div class="t-modal-card-body-block">
                        <div class="t-modal-card-body-text">・連絡先電話番号を入力してください</div>
                      </div><!-- /.t-modal-card-body-block -->
                      <div class="t-modal-card-body-footer">
                        <div class="t-modal-card-btn-close t-modal-close">閉じる</div>
                      </div><!-- /.t-modal-card-body-footer -->
                    </div><!-- /.t-modal-card-body -->
                  </div><!-- /.t-modal-card-body -->

                </div><!-- /.t-modal-card -->

              </div><!-- /.t-modal-scroll -->

            </div><!-- /.t-modal-inner -->

          </div><!-- /.t-modal -->

          <div class="t-input-radio">
            <input name="i01" id="i01_02" type="radio" value="1">
            <label for="i01_02">希望しない</label>
          </div><!-- /.t-input-radio -->

        </div><!-- /.t-input-group -->

      </div><!-- /.t-contract_add-group -->

      <ul class="t-annotation">
        <li class="t-annotation-item">車両から大きな衝撃を検知した際にご連絡をさせていただきます。主に運転する方の携帯電話番号を登録してください。</li>
        <li class="t-annotation-item">希望されない場合、衝撃検知時に、上記２でご登録のメールアドレスに緊急時連絡先をメールでご連絡します。</li>
        <li class="t-annotation-item">希望されない場合、事故時のご家族等への状況連絡は行いません。</li>
      </ul>

    </div><!-- /.t-block -->

    <div class="t-block">

      <div class="t-numbering">
        <div class="t-numbering-text">
          <div class="t-numbering-number">4</div>
        </div>
        <div class="t-numbering-text">
          <div class="t-numbering-title">家族等への情報共有<br>（あんしん見守りサポート）</div>
        </div>
      </div><!-- /.t-numbering -->

      <ul class="t-annotation">
        <li class="t-annotation-item">代理店・扱者の連絡先を登録することも可能です。</li>
      </ul>

      <div class="t-items">

        <div class="t-items-item">

          <div class="t-title">
            <h3 class="t-title-topic">■安全運転診断アドバイスの共有</h3>
          </div><!-- /.t-title -->

          <div class="t-text">
            <p>安全運転診断（マンスリーレポート）の結果を登録されたご家族や代理店・扱者等と共有することを希望されますか？</p>
          </div><!-- /.t-text -->

          <div class="t-contract_add-group">

            <div class="t-input-group">

              <div class="t-input-radio">
                <input name="i03" id="i03_01" type="radio" value="0" checked="checked">
                <label for="i03_01">希望する</label>
              </div><!-- /.t-input-radio -->

              <div class="t-input-radio">
                <input name="i03" id="i03_02" type="radio" value="1">
                <label for="i03_02">希望しない</label>
              </div><!-- /.t-input-radio -->

            </div><!-- /.t-input-group -->

          </div><!-- /.t-contract_add-group -->

        </div><!-- /.t-items-item -->

        <div class="t-items-item">

          <div class="contract_add-setting-radio_i01_view">

            <div class="t-title">
              <h3 class="t-title-topic">■事故時のご家族等への状況連絡</h3>
            </div><!-- /.t-title -->

            <div class="t-text">
              <p>車両への大きな衝撃を検知し、当社に通知されたデータが事故である場合、当社コールセンターでの対応結果を登録されたご家族や代理店・扱者等へメールで報告することを希望されますか？</p>
            </div><!-- /.t-text -->

            <div class="t-contract_add-group">

              <div class="t-input-group">

                <div class="t-input-radio">
                  <input name="i04" id="i04_01" type="radio" value="0" checked="checked">
                  <label for="i04_01">希望する</label>
                </div><!-- /.t-input-radio -->

                <div class="t-input-radio">
                  <input name="i04" id="i04_02" type="radio" value="1">
                  <label for="i04_02">希望しない</label>
                </div><!-- /.t-input-radio -->

              </div><!-- /.t-input-group -->

            </div><!-- /.t-contract_add-group -->

          </div><!-- /.contract_add-setting-radio_i01_view -->

        </div><!-- /.t-items-item -->

        <div class="t-items-item contract_add-setting-radio_i04_view contract_add-setting-radio_i04_view_1 ">

          <div class="t-title">
            <h3 class="t-title-group">登録するご家族等1</h3>
          </div><!-- /.t-title -->

          <div class="t-contract_add-group">

            <div class="t-input-group">

              <div class="t-input-name">
                <input name="i05" type="text" placeholder="氏名（全角）">
                <div class="t-input-text">様</div>
              </div><!-- /.t-input-name -->

              <div class="t-input-spacer-top">

                <div class="t-input-name-fixed">
                  <input name="i06" type="email" placeholder="メールアドレス">
                </div><!-- /.t-input-name-fixed -->

              </div><!-- /.t-input-spacer-top -->

            </div><!-- /.t-input-group -->

          </div><!-- /.t-contract_add-group -->

        </div><!-- /.t-items-item -->

        <div class="t-items-item contract_add-setting-radio_i04_view">

          <div class="t-title">
            <h3 class="t-title-group">登録するご家族等2</h3>
          </div><!-- /.t-title -->

          <div class="t-contract_add-group">

            <div class="t-input-group">

              <div class="t-input-name">
                <input name="i07" type="text" placeholder="氏名（全角）">
                <div class="t-input-text">様</div>
              </div><!-- /.t-input-name -->

              <div class="t-input-spacer-top">

                <div class="t-input-name-fixed">
                  <input name="i08" type="email" placeholder="メールアドレス">
                </div><!-- /.t-input-name-fixed -->

              </div><!-- /.t-input-spacer-top -->

            </div><!-- /.t-input-group -->

          </div><!-- /.t-contract_add-group -->

        </div><!-- /.t-items-item -->

        <div class="t-items-item contract_add-setting-radio_i04_view">

          <div class="t-title">
            <h3 class="t-title-group">登録するご家族等3</h3>
          </div><!-- /.t-title -->

          <div class="t-contract_add-group">

            <div class="t-input-group">

              <div class="t-input-name">
                <input name="i09" type="text" placeholder="氏名（全角）">
                <div class="t-input-text">様</div>
              </div><!-- /.t-input-name -->

              <div class="t-input-spacer-top">

                <div class="t-input-name-fixed">
                  <input name="i10" type="email" placeholder="メールアドレス">
                </div><!-- /.t-input-name-fixed -->

              </div><!-- /.t-input-spacer-top -->

            </div><!-- /.t-input-group -->

          </div><!-- /.t-contract_add-group -->

        </div><!-- /.t-items-item -->

      </div><!-- /.t-items -->

    </div><!-- /.t-block -->

  </div>

各種設定（登録）：登録ボタン

登録ボタンをクリックすると、モーダルのinputにjavascriptで値を渡します。
下記を参考に記述してください。
（※関連ファイル：contract_add-setting.js）


  <div class="t-contract_add">

    <section class="t-container">

      <form action="./done.php" method="post">

        <div class="t-block">

          <div class="button-group">
            <div class="t-btn t-btn-primary contract_add-setting-button-confirm">登　録</div>
          </div><!-- /.button-group -->

        </div><!-- /.t-block -->

      </form>

    </section>

  </div>

  <div id="form_modal_1" class="t-form_modal t-contract_add-setting-modal">
    <div class="t-form_modal-adjust-1">
      <div class="t-form_modal-adjust-2">
        <div class="t-form_modal-card">
          <div class="t-form_modal-card-body">
            <div class="t-form_modal-card-body-text">登録してよろしいですか？</div>
          </div><!-- /.t-form_modal-card-body -->
          <div class="t-form_modal-card-sprit">
            <div class="t-form_modal-card-sprit-box">
              <div class="t-form_modal-card-button-normal">戻る</div>
            </div><!-- /.t-form_modal-card-sprit-box -->
            <div class="t-form_modal-card-sprit-box">
              <form action="./done.php" method="post">
                <input type="hidden" value="" name="post-1">
                <input type="hidden" value="" name="post-2">
                <input type="hidden" value="" name="post-3">
                <input type="hidden" value="" name="post-4">
                <input type="hidden" value="" name="post-5">
                <input type="hidden" value="" name="post-6">
                <input type="hidden" value="" name="post-7">
                <input type="hidden" value="" name="post-8">
                <input type="hidden" value="" name="post-9">
                <input type="hidden" value="" name="post-10">
                <input type="hidden" value="" name="post-11">
                <input type="hidden" value="" name="post-12">
                <input type="hidden" value="" name="post-13">
                <button class="t-form_modal-card-button-submit">OK</button>
              </form>
            </div><!-- /.t-form_modal-card-sprit-box -->
          </div><!-- /.t-form_modal-card-sprit -->
        </div><!-- /.t-form_modal-card -->
      </div><!-- /.t-form_modal-adjust-2 -->
    </div><!-- /.t-form_modal-adjust-1 -->
  </div><!-- /.t-form_modal -->