HOME > 機能 > フォームデザイン管理

フォームデザイン管理

登録フォーム作成時の雛形のデザインテンプレートを作成することができます。
※フォームデザイン管理の注意事項
・フォームデザイン管理の設定には、基本的なスタイルシートの知識が必要です。
・携帯用雛形は、スタイルシート未対応の機種が多いため、HTML で設定します。
・スタイルシートを編集する際は、クラス名を変更できません。(例 #SMP_STYLE_HEAD .header)


フォームデザイン管理の機能

フォームデザイン管理にて登録された雛形はフォーム管理のデザイン設定時に HTML 雛形として選択できます。


1)フォームデザイン管理は、主に以下のシーンで有効にご活用頂くことができます。
a. フォームのデザインを統一したい場合。
b. フォームの文字の大きさやフォントなどを統一したい場合。
c. 他の WEB ページのスタイルシートを、フォームでも使用したい場合。


2) フォームデザイン管理に、雛形を登録することにより、以下のメリットがあります。
a. その都度スタイルシートを編集する必要がなくなるので、フォーム作成が簡略化できる。
b. HTML を直接編集する作業が減るので、人為的なミスが少なくなる。
c. 他の WEB ページとデザインが統一できる。


3) フォームデザイン管理に、雛形を登録することにより、デザインが施された雛形を使えます。


フォームデザイン管理の使い方

画面の「Web」をクリックします。


「フォームデザイン管理」を選択します。

フォームデザイン管理では、マルチデバイス用、PC 用、携帯用の雛形を作成することができます。マルチデバイス用、PC用では、主にスタイルシートを使用して、雛形を作成します。携帯用では、スタイルシートに対応している機種が限られているため、HTML で雛形を作成します。


フォームデザイン管理画面

「フォームデザイン管理」をクリックすると以下の画面が表示されます。

新規に作成する場合は、マルチデバイス用、PC 用、携帯用のいずれかを選択し、「雛形を作成する」ボタンをクリックします。
既存の雛形の編集をする場合は、一覧から「詳細」ボタンをクリックします。


マルチデバイス用デザイン雛形の設定

マルチデバイスフォーム設定では、デザイン切り替えの設定を行います。

1)判定方法選択
デザインの切り替えをウィンドウサイズで切り替えるか、ユーザーのデバイスで切り替えるかを選択します。


2)デザインパターン選択
pxもしくはデバイスを指定し、それぞれどのデザイン(PC用デザイン、タブレット用デザイン、スマートフォン用デザイン)を当て込むかを設定します。


デザイン切り替えを設定したら「この設定で雛形を作成する」ボタンをクリックします。
※一度設定を決定すると変更することはできません。


デザイン雛形の新規作成

登録フォームで使用するデザインの雛形を登録します。
ここで登録した雛形は、登録フォーム設定の「4. デザイン設定」の「HTML雛形」に表示されます。
雛形の名前、雛形の本文、各スタイルシートを設定し「登録」ボタンをクリックすると雛形が保存されます。
スタイルシートの編集では、タブを切り替えることで各デザインの編集を行うことができます。


PC用デザイン雛形の設定

雛形の名前、雛形の本文、各スタイルシートを設定し「登録」ボタンをクリックすると雛形が保存されます。


携帯用デザイン雛形の設定

雛形の名前、雛形の本文、を設定し「登録」ボタンをクリックすると雛形が保存されます。


フォームへの反映

設定した雛形は「フォーム管理」→「ページ設定」→「HTML雛形」から反映することができます。