この画面にある各設定項目ごとに、長さ・太さ・色コードなどの数値を入力したり、選択項目からデータを選択することにより、メールフォームのデザインを設定することができます。

設定データを入力・変更後、「設定完了 & デザイン確認」をクリックすると、データがデザインが反映され、またデザインを確認する画面が表示されます。（「設定完了 & デザイン確認」ボタンは画面に同じものを２つ設置してありますので近い方をクリックしていただけます）

その後「ＳＳＬメールフォームを参照」から、実際のメールフォームでのデザインを確認することができます。

※ ブラウザのバージョンによっては、ブラウザの「更新」ボタンをクリックしなければデザインの変更結果が表示されない場合がありますので、ご留意願います、

カスタムデザインのデータは当初、「ラベンダー−アイボリー」と同一のデザインになるよう、すでに「初期設定データ」が登録されております。まずこの初期設定データをもとに、各項目のデータを変更しながら１の基本操作すると、設定データがデザインにどのように反映されるかを容易に確認することができます。

色を設定する項目には、「色コード」を入力します。
色コードは”＃”で始まる「Web Safeカラー」または"red","blue"などの「カラーネーム」コードのいずれも使用できます。
２種類それぞれカラーチャートを用意しておりますので、必要に応じ設置したリンクからご参照下さい。
（「Web Safeカラー」のカラーチャートはすでにフレームに表示しております。ブラウザのバージョン等により表示されない場合は、リンクをご利用下さい）

なおカラーチャートを用意した「Web Safeカラー」は２１６色しかありませんが、これ以外の色（例えば#123456など）も入力し表示させることは可能です。　→Web Safeカラー　とは？

領域の幅・領域の高さ・マージン・パディング・ボーダーの幅といった、長さ・太さの単位は基本的に"px"（ピクセル）で入力します。
（ 単位をつけずに数値だけ入力すれば、単位は自動的に"px"となります）

項目によっては”％”などの単位をつけて別基準での設定も可能ですが、 ここではその詳細な説明は省略します。（CSS２の仕様に準じます）

文字サイズは親項目の文字サイズに対する割合を"%"という単位をつけて入力します。
例えば「サブ枠部分」に"90%"と入力されていれば、サブ枠内に表示される文字のサイズは「メイン枠」の文字サイズの９０％の大きさになります。
上記の他、フォントサイズを直接”ｐｔ”単位で入力する方法、"small","x-small"のように指定する方法などがありますが、 ここではその詳細な説明は省略します。（CSS２の仕様に準じます）

領域内の改行の幅を調整したい場合などに用います。 例えば"1.5"と入力すると、文字サイズの1.5倍に行の高さが調整されます。

ボーダー・パディング・マージンは、一括指定の他、上下左右を別々に設定することが可能です。
これにより、見出し部分と入力部分の間を１本の線で区切るなど、自由度の高いデザインが可能となります。

※ 上下左右のどれか１つでも指定する場合は、一括指定欄には入力しないようにして下さい。（表示に支障が出る可能性があります）
　例えば上のボーダーだけ１ピクセルで表示させたい場合は、「ボーダー幅　上」を”１”とし、あとの右・下・左には、"0"を入力します。一括指定欄である「ボーダー幅」はブランクにしておきます。

ところで、この３つの要素について、
・各部分（要素）の周りに表示する枠の部分が「ボーダー」、
・文字などの「内容領域」とボーダーとの間の空間部分が「パディング」、
・ボーダーの周りの空白部分が「マージン」です。（言葉で説明すると判りにくいのですが）

下の図は、メールフォームの「入力部分」とその中の要素である「フォーム部分」についての「パディング」と「マージンの関係を表すものです。
このように細かく１ピクセル単位でフォームのデザインを整えることができます。

なお初期設定で標準的な数値を入れておりますので、変更される場合は元の数値も考慮のうえ調整をお願いいたします。