CSS can be used to heavily customize the layout of forms in Eloqua10. In this article we will provide sample cover some common formatting use cases on Eloqua10 Landing Pages. Further details about uses of CSS in Eloqua10 form templates can be found here: EE12 - Do It - Eloqua - Energize E10 Forms
Eloqua10 Forms HTML Structure
Below is an outline of the structure of the HTML generated by Eloqua when a form is added to a landing page. By targeting the HTML classes highlighted below, we can control the layout of any form on your landing page.
| .elq-form | This class identifies the div tag which encompasses the entire form object on your landing page. We usually will not target this div directly with CSS, but it's presence is necessary to create two-column forms |
| .form-design-field | This class identifies the div tags which encompass each row (label and field) of your form. Targeting this class with CSS will allow you to control the spacing between form fields and the number of fields in each row of your form |
| label | Targeting this HTML tag with CSS will allow you to control the alignment and spacing of your form field labels |
| .form input wrapper | This class identifies the div tag which encompasses the each form feild and it's associated validation message. We usually will not target this div directly with CSS, but it's presence is necessary to control the positioning of validation messages |
| .LV_Validation_Message | This class identifies the validation messages that appear when a required field is not filled out. Targeting this class with CSS will allow you to control the appearance and position of validation messages |
| H3 | This HTML tag is used to create section headers. Targeting this with CSS will allow you to format you 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. Tageting these IDs with CSS will allow you to control te appearance of individual fields on your forms |
Sample Code
| Reduce spacing between form fields | .form-design-field { padding:0px!important; } |
| Treat a section header as a form field label | H3 { font-size:12px!important; } |
Allow forms on the landing page to span two columns (*note* this works best when all of the fields on the form have their field width set to large in the form editor) | .form-design-field{ padding:0px!important; width:47%!important; min-height:55px; position:static; float:left; clear:none!important; } |