フォームの CSS クラスと例
フォームのレイアウトテンプレートに <style> タグがある場合、デフォルトのスタイルクラスを対象にしてホストされるフォームの CSS をカスタマイズできます。
必要なエディション
| 使用可能なエディション: すべての Account Engagement エディション |
全般
#pardot-form：フォーム全体を対象とします。
例
#pardot-form {
color: #666666;
font: 13px/120% Tahoma,Arial,Helvetica,Verdana,sans-serif;
margin: 0.5em 0 1em;
padding: 0.5em;
}フォームエラー
.error — フォームエラーを対象とします。
例
#pardot-form span.error {
clear: left;
display: block;
font-weight: bold;
margin-top: 2px;
padding-left: 166px;
}必須項目
.required：必須フィールドを対象とします。フォントを太字にして、黄色の星印を追加します。
例
#pardot-form p.required, #pardot-form span.required, #pardot-form label.required {
font-weight: bold;
background: url("/images/required.gif") no-repeat scroll right top transparent;
}項目の説明
.description：フィールドの説明を対象とします。
例
#pardot-form p span.description {
display: block;
margin-left: 153px;
}フォームコンテンツの空白
#pardot-form
p — すべてのフォームコンテンツを対象とし、余白とパディングを調整できます。
例
#pardot-form p {
clear: left;
line-height: 1.4em;
margin: 3px 5px;
padding: 3px 2px;
}送信ボタン
#pardot-form
p.submit—フォームの [送信] ボタンを対象とします。
例
#pardot-form p.submit {
margin: 1em 0.5em 0.2em 160px;
padding: 0;
}ドロップダウンの項目
select：Targets ドロップダウン フィールド。
例
#pardot-form select {
font-weight: normal;
}チェックボックスの項目
input[type="checkbox"]：［Targets］ チェックボックスのフィールド。
例
#pardot-form input[type="checkbox"] {
margin-right: 30px;
height: 50px;
}テキストエリアの項目
textarea.standard — テキストエリアフィールドを対象とします。
例
#pardot-form textarea.standard {
float: none;
height: 70px;
overflow: auto;
padding: 2px;
width: 200px;
}テキストの項目
input—テキストフィールドのデザインを対象とします。
例
#pardot-form input {
font-weight: normal;
margin-right: 5px;
padding: 2px;
}input.text：テキスト フィールドの幅を対象とします。
例
#pardot-form input.text {
width: 200px;
}連動項目
.dependentField：連動フィールドを対象とします。デフォルトの CSS を使用していない場合は、連動項目が不要なときに表示されないように、使用する CSS にこのスタイル指定を記述してください。
例
.dependentField {
display: none;
}この記事で問題は解決されましたか?
ご意見をお待ちしております。
