Movable Type.net フォーム

マニュアル

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

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

  1. 左サイドバーの [フォーム] - [一覧] をクリックする
  2. 「フォーム一覧」から編集したいフォームをクリックする
  3. [基本設定] タブの [カスタムCSS] の入力フィールドにフォームのデザインに利用する CSS を記述する
    ※ 各画面のHTML 構造を参考にしてください。

  4. [変更を保存] ボタンをクリックする
入力画面の HTML 構造
<div class="container">
  <div class="content content-form">
    <form>
      <!-- お名前-->
      <div class="form-column form-column-name">
        <label class="label"><!abbr class="required-mark"></abbr></label>
        <input type="text"/>
        <div class="description-block"></div>
      </div>
      <!-- ファイル-->
      <div class="form-column form-column-file">
        <label class="label"></label>
        <input data-mt-input-type="file-size,file-extension"/>
        <div class="description-block"></div>
      </div>
      <!-- 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>
    <!-- お名前-->
    <div class="form-column form-column-name">
      <label class="label"></label>
      <div class="preview-block"></div>
    </div>
    <!-- ファイル-->
    <div class="form-column form-column-file">
      <label class="label"></label>
      <div class="preview-block"></div>
    </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>
一覧
MovableType.net フォーム