## app-form

## formProgress

/src/assets2/scss/codegrid-ui.scss

- app-item
- app-form

1. 1. ログイン方法について
2. 2. 決済方法選択
3. 3. 登録完了

    <div class="CG2-formProgress">  <ol>    <li>1. ログイン方法について</li>    <li class="CG2-formProgress__item--current">2. 決済方法選択</li>    <li>3. 登録完了</li>  </ol></div>

## signupFrom

/src/assets2/scss/codegrid-ui.scss

- app-item
- app-form

購読料は月額800円（税抜）
PayPal払いなら30日間無料

支払い処理中にエラーが発生しました

お手数ですがもう一度手続きをおこなってください。

利用規約に同意する

- 再度支払い手続きをおこなう

※CodeGridの購読にはGoogleアカウントが必要です。Googleアカウント作成

- PayPalで支払う

- WebMoney 1ヶ月分
- WebMoney 1年分

※CodeGridの購読にはGoogleアカウントが必要です。Googleアカウント作成

再度エラーになる場合は以下よりお問い合わせください。

    <div class="CG2-signupFrom">   <div class="CG2-signupFrom__lead">    購読料は月額800円（税抜）    <div class="CG2-signupFrom__leadSub">      PayPal払いなら30日間無料    </div>  </div>   <div class="CG2-signupFrom__information">    <p>支払い処理中にエラーが発生しました</p>  </div>   <div class="CG2-signupFrom__text">    <p>お手数ですがもう一度手続きをおこなってください。</p>  </div>   <div class="CG2-signupFrom__check">    <label><input type="checkbox">利用規約に同意する</label>  </div>   <div class="CG2-signupFrom__buttonContainer">    <ul>      <li><a class="CG2-button CG2-button--primary" href="#">再度支払い手続きをおこなう</a></li>    </ul>    <div class="CG2-signupFrom__buttonContainerText">      <p>※CodeGridの購読にはGoogleアカウントが必要です。　<a href="#">Googleアカウント作成</a></p>    </div>  </div>   <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">    <ul>      <li><a class="CG2-button CG2-button--primary" href="#">PayPalで支払う</a></li>    </ul>    <ul>      <li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1ヶ月分</a></li>      <li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1年分</a></li>    </ul>    <div class="CG2-signupFrom__buttonContainerText">      <p>※CodeGridの購読にはGoogleアカウントが必要です。　<a href="#">Googleアカウント作成</a></p>    </div>  </div>   <div class="CG2-signupFrom__annotation">    <p>再度エラーになる場合は以下よりお問い合わせください。</p>  </div></div>

## paymentTable

/src/assets2/scss/codegrid-ui.scss

- app-item
- app-form
- www-item

購読料
（税込金額）

- 月額
  800
  円
  （税込864円）

- 月払い
  800
  円
  （税込864円）
- 年払い
  9,600
  円
  （税込10,368円）

購読料 | 自動継続 | 随時購入

無料購読期間

- 無料購読期間 30 日

- 無料購読期間 なし

    <div class="CG2-paymentTable">  <table>    <thead>      <tr>        <th></th>        <th><img src="/build/assets2/img/logos/paypal.svg" alt="PayPal" width="100" height="25"></th>        <th><img src="/build/assets2/img/logos/webmoney.svg" alt="WebMoney" width="120" height="30"></th>      </tr>    </thead>    <tbody>      <tr>        <th>購読料<br><span class="CG2-paymentTable__annotation">（税込金額）</span></th>        <td>          <div class="CG2-paymentTable__priceList">            <ul>              <li>                <div class="CG2-paymentTable__priceLabel">月額</div>                <div class="CG2-paymentTable__priceValue">800</div>                <div class="CG2-paymentTable__priceUnit">円</div>                <div class="CG2-paymentTable__priceAnnotation">（税込864円）</div>              </li>            </ul>          </div>        </td>        <td>          <div class="CG2-paymentTable__priceList">            <ul>              <li>                <div class="CG2-paymentTable__priceLabel">月払い</div>                <div class="CG2-paymentTable__priceValue">800</div>                <div class="CG2-paymentTable__priceUnit">円</div>                <div class="CG2-paymentTable__priceAnnotation">（税込864円）</div>              </li>              <li>                <div class="CG2-paymentTable__priceLabel">年払い</div>                <div class="CG2-paymentTable__priceValue">9,600</div>                <div class="CG2-paymentTable__priceUnit">円</div>                <div class="CG2-paymentTable__priceAnnotation">（税込10,368円）</div>              </li>            </ul>          </div>        </td>      </tr>      <tr>        <th>購読料</th>        <td>自動継続</td>        <td>随時購入</td>      </tr>      <tr>        <th>無料購読期間</th>        <td>          <div class="CG2-paymentTable__valueList">            <ul>              <li>                <span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>                <span class="CG2-paymentTable__value">30</span>                <span class="CG2-paymentTable__valueUnit">日</span>              </li>            </ul>          </div>        </td>        <td>          <div class="CG2-paymentTable__valueList">            <ul>              <li>                <span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>                <span class="CG2-paymentTable__valueText">なし</span>              </li>            </ul>          </div>        </td>      </tr>    </tbody>  </table></div>