マニュアル

フォームを独自 CSS でデザインする

フォームのデザインについては、フォームの公開画面、確認画面、完了画面、エラー画面すべて以下のカスタム CSS 画面で制御する事が可能です。

  1. ダッシュボード に表示されるウェブサイトとブログ一覧から、ウェブサイト名をクリックする
  2. website_blog00.png

  3. 左サイドバーの [フォーム] - [設定] をクリックする
  4. form00.png

  5. タブから [デザイン設定] をクリックする
  6. form_css01.png

  7. [カスタムCSS] の入力フィールドにフォームのデザインに利用する CSS を記述する
    ※ 各画面のHTML 構造を参考にしてください。
  8. [変更を保存] ボタンをクリックする
入力画面の HTML 構造
<div class="container">
  <div class="content content-form">
    <form>
      <!-- 1行テキスト-->
      <div class="form-column form-column-text">
        <label class="label"><abbr class="required-mark"></abbr></label>
        <input type="text"/>
        <div class="description-block"></div>
      </div>
      <!-- 複数行テキスト-->
      <div class="form-column form-column-textarea">
        <label class="label"><abbr class="required-mark"></abbr></label>
        <textarea></textarea>
        <div class="description-block"></div>
      </div>
      <!-- ドロップダウンリスト-->
      <div class="form-column form-column-select">
        <label class="label"><abbr class="required-mark"></abbr></label>
        <select></select>
        <div class="description-block"></div>
      </div>
      <!-- チェックボックス-->
      <div class="form-column form-column-checkbox">
        <label class="label"><abbr class="required-mark"></abbr></label>
        <div class="input-group">
          <label class="option">
            <input type="checkbox"/><span class="option-text"></span>
          </label>
        </div>
        <div class="description-block"></div>
      </div>
      <!-- ラジオボタン-->
      <div class="form-column form-column-radio">
        <label class="label"><abbr class="required-mark"></abbr></label>
        <div class="input-group">
          <label class="option">
            <input type="radio"/><span class="option-text"></span>
          </label>
        </div>
        <div class="description-block"></div>
      </div>
      <!-- テキスト表示エリア-->
      <div class="form-column form-column-note">
        <div class="description-block"></div>
      </div>
      <!-- メールアドレス-->
      <div class="form-column form-column-email">
        <label class="label"><abbr class="required-mark"></abbr></label>
        <input type="email"/>
        <div class="description-block"></div>
      </div>
      <!-- 電話番号-->
      <div class="form-column form-column-tel">
        <label class="label"><abbr class="required-mark"></abbr></label>
        <input type="tel"/>
        <div class="description-block"></div>
      </div>
      <!-- URL-->
      <div class="form-column form-column-url">
        <label class="label"><abbr class="required-mark"></abbr></label>
        <input type="url"/>
        <div class="description-block"></div>
      </div>
      <!-- 年月日選択-->
      <div class="form-column form-column-date">
        <label class="label"><abbr class="required-mark"></abbr></label>
        <div class="input-group">
          <select></select><span class="separator separator-date"></span>
          <select></select><span class="separator separator-date"></span>
          <select></select>
        </div>
        <div class="description-block"></div>
      </div>
      <!-- カレンダー-->
      <div class="form-column form-column-calendar">
        <label class="label"><abbr class="required-mark"></abbr></label>
        <input type="text"/>
        <div class="description-block"></div>
      </div>
      <!-- 都道府県-->
      <div class="form-column form-column-prefecture-jp">
        <label class="label"><abbr class="required-mark"></abbr></label>
        <select></select>
        <div class="description-block"></div>
      </div>
      <!-- 郵便番号-->
      <div class="form-column form-column-zip-code-jp">
        <label class="label"><abbr class="required-mark"></abbr></label>
        <div class="input-group">
          <input/><span class="separator separator-zip-code-jp"></span>
          <input/>
        </div>
        <div class="description-block"></div>
      </div>
      <div class="button-group">
        <!-- 送信内容を確認する-->
        <button class="button button-confirm"></button>
        <!-- 送信する-->
        <button class="button button-submit"></button>
        <!-- 入力内容は暗号化されて送信されます。-->
        <div class="help-block"></div>
      </div>
    </form>
  </div>
</div>
確認画面の HTML 構造
<div class="container">
  <div class="content content-confirmation">
    <div class="message-block message-block-confirmation"></div>
    <!-- 1行テキスト-->
    <div class="form-column form-column-text">
      <label class="label"><abbr class="required-mark"></abbr></label>
      <div class="preview-block"></div>
      <div class="description-block"></div>
    </div>
    <!-- 複数行テキスト-->
    <div class="form-column form-column-textarea">
      <label class="label"><abbr class="required-mark"></abbr></label>
      <div class="preview-block"></div>
      <div class="description-block"></div>
    </div>
    <!-- ドロップダウンリスト-->
    <div class="form-column form-column-select">
      <label class="label"><abbr class="required-mark"></abbr></label>
      <div class="preview-block"></div>
      <div class="description-block"></div>
    </div>
    <!-- チェックボックス-->
    <div class="form-column form-column-checkbox">
      <label class="label"><abbr class="required-mark"></abbr></label>
      <div class="preview-block"></div>
      <div class="description-block"></div>
    </div>
    <!-- ラジオボタン-->
    <div class="form-column form-column-radio">
      <label class="label"><abbr class="required-mark"></abbr></label>
      <div class="preview-block"></div>
      <div class="description-block"></div>
    </div>
    <!-- テキスト表示エリア-->
    <div class="form-column form-column-note">
      <div class="description-block"></div>
    </div>
    <!-- メールアドレス-->
    <div class="form-column form-column-email">
      <label class="label"><abbr class="required-mark"></abbr></label>
      <div class="preview-block"></div>
      <div class="description-block"></div>
    </div>
    <!-- 電話番号-->
    <div class="form-column form-column-tel">
      <label class="label"><abbr class="required-mark"></abbr></label>
      <div class="preview-block"></div>
      <div class="description-block"></div>
    </div>
    <!-- URL-->
    <div class="form-column form-column-url">
      <label class="label"><abbr class="required-mark"></abbr></label>
      <div class="preview-block"></div>
      <div class="description-block"></div>
    </div>
    <!-- 年月日選択-->
    <div class="form-column form-column-date">
      <label class="label"><abbr class="required-mark"></abbr></label>
      <div class="preview-block"></div>
      <div class="description-block"></div>
    </div>
    <!-- カレンダー-->
    <div class="form-column form-column-calendar">
      <label class="label"><abbr class="required-mark"></abbr></label>
      <div class="preview-block"></div>
      <div class="description-block"></div>
    </div>
    <!-- 都道府県-->
    <div class="form-column form-column-prefecture-jp">
      <label class="label"><abbr class="required-mark"></abbr></label>
      <div class="preview-block"></div>
      <div class="description-block"></div>
    </div>
    <!-- 郵便番号-->
    <div class="form-column form-column-zip-code-jp">
      <label class="label"><abbr class="required-mark"></abbr></label>
      <div class="preview-block"></div>
      <div class="description-block"></div>
    </div>
    <div class="button-group">
      <!-- 戻る-->
      <button class="button button-back"></button>
      <!-- 送信する-->
      <button class="button button-submit"></button>
      <!-- 入力内容は暗号化されて送信されます。-->
      <div class="help-block"></div>
    </div>
  </div>
</div>
完了画面の HTML 構造
<div class="container">
 <div class="content content-complete">
   <p class="message-block message-block-complete"></p>
 </div>
</div>
エラー画面の HTML 構造
<div class="container">
 <div class="content content-error">
   <p class="message-block message-block-error"></p>
 </div>
</div>

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス