マニュアル

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

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

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

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