マニュアル
フォームを独自 CSS でデザインする
フォームのデザインについては、フォームの公開画面、確認画面、完了画面、エラー画面すべて以下のカスタム CSS 画面で制御する事が可能です。
- 左サイドバーの [フォーム] - [一覧] をクリックする
- 「フォーム一覧」から編集したいフォームをクリックする
- [基本設定] タブの [カスタムCSS] の入力フィールドにフォームのデザインに利用する CSS を記述する
※ 各画面のHTML 構造を参考にしてください。 - 確認画面のCSSを変更したい場合、以下のように、要素名の前に「.content-confirmation」を付けることで可能です。
.content-confirmation .要素名 { display: none; }
または.content-confirmation [data-column="各項目のID"] { display: none; }
- [変更を保存] ボタンをクリックする
入力画面の 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>