デザイン・エディタでのCSSによるフォームのカスタマイズ
このトピックは、デザイン・エディタに適用されます。クラシック・デザイン・エディタを使用している場合は、クラシック・デザイン・エディタでのCSSによるフォームのカスタマイズを参照してください。
CSSを使用すると、フォームのレイアウトを大幅にカスタマイズできます。スタンドアロンCSSクラスでは、設計エディタとソース・エディタの両方で、フォームの設計およびカスタム・スタイルに多くの柔軟性が考慮されています。
次の一般的なユース・ケースを参照してください。フォームをカスタマイズする際に役立ちます。
フォームのHTML構造
次の図は、フォームがランディング・ページに追加されたときにOracle Eloquaで生成されるHTMLの構造の概要を示しています。下で強調表示されているHTMLクラスをターゲット指定することで、ランディング・ページのフォームのレイアウトを制御できます。
注意: 下にリストされているスタイルをターゲット指定する場合は、常に各スタイル宣言の最初に.elq-formクラスをターゲット指定してください。さらに明確にするために、次の例を参照してください。
次の表に、これらの各HTMLタグの詳細を示します。
| HTMLタグ | 摘要 |
|---|---|
| .elq-form | このクラスは、ランディング・ページのフォーム・オブジェクト全体を囲むdivタグを識別します。すべてのフォーム・スタイルは、このDivをターゲット指定することで開始し、2列のフォームを作成するにはこの指定が必要です。 |
| .elq-form .elq-field-style | このクラスは、フィールド・グループ内の各要素が個別に含まれている個々の各要素をターゲット指定します。 |
| .elq-form .elq-label | CSSでこのHTMLをターゲット指定すると、フォーム・フィールドのラベルの配置と間隔を制御できます。 |
| .elq-form .elq-required | このクラスは、必須フィールドが入力されていない場合に表示する検証メッセージを識別します。CSSでこのクラスをターゲット指定すると、検証メッセージの表示および位置を制御できます。 |
.elq-form .elq-heading .elq-form h4 |
このHTMLタグは、セクション・ヘッダーの作成に使用されます。CSSでこのタグをターゲット指定すると、フォームで100文字より長い質問が可能になるように、フォームのフィールド・ラベルのように見えるセクション・ヘッダーを書式設定できます。 |
| #formElement- | フォームが公開されると、各form-design-field divタグには番号付けされたformElement IDが割り当てられます。フォームの最初の要素(フィールド)のIDは#formElement0、2番目のIDは#formElement1など、IDは順番に割り当てられます。CSSでこれらのIDをターゲット指定すると、フォームの個々のフィールドの表示を制御できます。 |
.elq-form .elq-item-input .elq-form .elq-item-textarea .elq-form .elq-item-select |
CSSでこのHTMLタグをターゲット指定すると、フォーム入力ボックス、段落テキスト・ボックスまたはピックリスト・オプションの外観(サイズ、色、枠線など)を変更できます。 |
サンプル・コード
次の一般的なフォーム設計目標、およびその目標を達成するための対応する例のコード・サンプルを参照してください。
| 目標 | コード・サンプル |
|---|---|
| セクション・ヘッダーをフォーム・フィールド・ラベルとして扱う |
.elq-form .elq-heading {
font-size:12px;
}
|
| フォームの各要素間に縦の間隔を追加する |
.elq-form .elq-field-style {
margin-bottom:50px;
margin-top:50px;
}
|
| 丸い角にする |
.elq-form .elq-item-input, .elq-form .elq-item-textarea {
border-radius:8px;
}
|
| パラグラフ・テキストの高さを大きくする |
.elq-form .elq-item-textarea {
height:100px;
}
|