クラシック・デザイン・エディタでのCSSによるフォームのカスタマイズ
重要: 20Aリリース(2020年2月)以降、クラシック・フォームのデザイン・エディタを使用して新規アセットを作成したり、クラシック・フォームのデザイン・エディタで作成したアセットをコピーすることはできなくなります。ただし、すべてのレガシー・フォーム・アセットは、同じクラシック・フォームのデザイン・エディタを使用して引き続き編集可能です。ユーザーは、これらのフォームを編集して、現在行っているのと同様にフォームへの変更を保存できます。また、クラシック・フォームはランディング・ページで引き続き機能し、フォーム提出データを取得します。この移行の準備を前もって始めておくことをお薦めします。お客様は、クラシック・フォームに対して「別名保存」機能と「テンプレートとして保存」機能を活用して、それらのフォームを新しいデザイン・エディタで応答フォームとして保存できます。詳細は、製品に関するお知らせを参照してください。
このトピックは、クラシック・デザイン・エディタに適用されます。デザイン・エディタを使用している場合は、デザイン・エディタでのCSSによるフォームのカスタマイズを参照してください。
CSSを使用すると、フォームのレイアウトを大幅にカスタマイズできます。スタンドアロンCSSクラスでは、設計エディタとソース・エディタの両方で、フォームの設計およびカスタム・スタイルに多くの柔軟性が考慮されています。
次の一般的なユース・ケースを参照してください。フォームをカスタマイズする際に役立ちます。
フォームのHTML構造
次の図は、フォームがランディング・ページに追加されたときにOracle Eloquaで生成されるHTMLの構造の概要を示しています。下で強調表示されているHTMLクラスをターゲット指定することで、ランディング・ページのフォームのレイアウトを制御できます。
注意: 下にリストされているスタイルをターゲット指定する場合は、常に各スタイル宣言の最初に.elq-formクラスをターゲット指定してください。さらに明確にするために、次の例を参照してください。
次の表に、これらの各HTMLタグの詳細を示します。
| HTMLタグ | 摘要 |
|---|---|
| .elq-form | このクラスは、ランディング・ページのフォーム・オブジェクト全体を囲むdivタグを識別します。すべてのフォーム・スタイルは、このDivをターゲット指定することで開始し、2列のフォームを作成するにはこの指定が必要です。 |
| .elq-form .form-design-field | このクラスはフォームの各行(ラベルおよびフィールド)を囲むdivタグを識別します。form-design-fieldは、フォーム・エディタで設定されたフィールド・グループ全体をカプセル化します。 |
| .elq-form .field-style | このクラスは、フィールド・グループ内の各要素が個別に含まれている個々の各要素をターゲット指定します。 |
| .elq-form .item-padding | CSSでこのクラスをターゲット指定すると、フォームのフィールド間の間隔およびフォームの各行のフィールド数を制御できます。 |
| .elq-form label | CSSでこのHTMLをターゲット指定すると、フォーム・フィールドのラベルの配置と間隔を制御できます。 |
| .elq-form .required | このクラスは、必須フィールドが入力されていない場合に表示する検証メッセージを識別します。CSSでこのクラスをターゲット指定すると、検証メッセージの表示および位置を制御できます。 |
.elq-form .heading .elq-form H3 |
このHTMLタグは、セクション・ヘッダーの作成に使用されます。CSSでこのタグをターゲット指定すると、フォームで100文字より長い質問が可能になるように、フォームのフィールド・ラベルのように見えるセクション・ヘッダーを書式設定できます。 |
| #formElement- | フォームが公開されると、各form-design-field divタグには番号付けされたformElement IDが割り当てられます。フォームの最初の要素(フィールド)のIDは#formElement0、2番目のIDは#formElement1など、IDは順番に割り当てられます。CSSでこれらのIDをターゲット指定すると、フォームの個々のフィールドの表示を制御できます。 |
.elq-form input .elq-form textarea .elq-form select |
CSSでこのHTMLタグをターゲット指定すると、フォーム入力ボックス、段落テキスト・ボックスまたはピックリスト・オプションの外観(サイズ、色、枠線など)を変更できます。 |
サンプル・コード
次の一般的なフォーム設計目標、およびその目標を達成するための対応する例のコード・サンプルを参照してください。
| 目標 | コード・サンプル |
|---|---|
| フォーム・フィールド間の間隔を狭くする |
.elq-form .item-padding {
padding:0px;
}
.elq-form .field-style {
padding:0px;
}
|
| セクション・ヘッダーをフォーム・フィールド・ラベルとして扱う |
.elq-form H3 {
font-size:12px;
}
|
| フォームの各要素間に縦の間隔を追加する |
.elq-form .field-style {
margin-bottom:50px;
margin-top:50px;
}
|
|
ランディング・ページのフォームを2列に表示されるようにする 注意: これは、フォーム・エディタでフォームのすべてのフィールドの「フィールドの幅」が「大」に設定されている場合に最も有効に機能します。 |
.elq-form .form-design-field{
padding:0px;
width:47%;
min-height:55px;
position:static;
float:left;
clear:none;
}
|
| 丸い角にする |
.elq-form input, .elq-form textarea {
border-radius:8px;
}
|
| パラグラフ・テキストの高さを大きくする |
.elq-form textarea {
height:100px;
}
|