Customizing forms with CSS in the Design Editor
This topic applies to the Design Editor. If you are working in the Classic Design Editor, see Customizing forms with CSS in the Classic Design Editor.
CSS can be used to heavily customize the layout of forms. Standalone CSS classes allows for more flexibility with form designs and custom styles in both the design and source editors.
See the following common use cases that will help you customize your forms:
Form HTML Structure
The illustration below outlines the structure of the HTML Oracle Eloqua generates when a form is added to a landing page. By targeting the HTML classes highlighted below, you can control the layout of any form on your landing page.
Note: When targeting the styles listed below, you should always target the .elq-form class first in each style declaration. See the examples below for more clarity.
The table below provides detail on each of these HTML tags.
| HTML Tag | Description |
|---|---|
| .elq-form | This class identifies the div tag which encompasses the entire form object on your landing page. All form styles must begin by targeting this Div, and its presence is necessary to create two-column forms. |
| .elq-form .elq-field-style | This class targets each individual element independently including each element in a field group. |
| .elq-form .elq-label | Targeting this HTML tag with CSS allows you to control the alignment and spacing of your form field labels. |
| .elq-form .elq-required | This class identifies the validation messages that appear when a required field is not filled out. Targeting this class with CSS allows you to control the appearance and position of validation messages. |
.elq-form .elq-heading .elq-form h4 |
This HTML tag is used to create section headers. Targeting this with CSS allows you to format your section headers to look like form field labels, allowing you to ask questions longer that 100 characters on your forms. |
| #formElement- | Each form-design-field div tag is assigned a numbered formElement ID when your form is published. IDs are assigned sequentially so the first element (field) on your form will have an ID of #formElement0, the second will have an ID of #formElement1 and so on. Targeting these IDs with CSS allows you to control the appearance of individual fields on your forms. |
.elq-form .elq-item-input .elq-form .elq-item-textarea .elq-form .elq-item-select |
Targeting this HTML tag with CSS allows you to change the look and feel (size, color, borders, and so on) of the form input box, paragraphs text box, or picklist option. |
Sample Code
See the following common form design goals and the corresponding example code samples to achieve these goals.
| Goal | Code Sample |
|---|---|
| Treat a section header as a form field label |
.elq-form .elq-heading {
font-size:12px;
}
|
| Add vertical spacing between form elements |
.elq-form .elq-field-style {
margin-bottom:50px;
margin-top:50px;
}
|
| Rounded corners |
.elq-form .elq-item-input, .elq-form .elq-item-textarea {
border-radius:8px;
}
|
| Increase the height of the paragraph text |
.elq-form .elq-item-textarea {
height:100px;
}
|