Form CSS
If you would like to apply CSS or HTML to your forms, here are some commonly used selectors. At this time, adding CSS only applies to Webforms and Application Form plugins.
| Element |
HTML example |
CSS selector |
| Form Container |
<div class="zn-input-form"></div>
|
.zn-input-form
|
| Labels |
<label class="form-label">Form Label</label>
|
.form-label
|
| Inputs |
<input type="text" class="form-control">
|
.form-control
|
| Button |
<button class="btn">Save</button>
|
.btn
|
| Checkbox/Radio Label |
<label class="checkbox-label">option1</label>
|
.checkbox-label
|
| Error Message |
<div class="field-error">Error</div>
|
.field-error
|
| Success Message |
<div class="alert-success">Success</div>
|
.alert-success
|
| Heading |
<h3 class="heading">Header</h3>
|
.heading
|
CSS for Display Forms
| Element |
HTML example |
CSS selector |
| Form Container |
<div class="zn-display-form"></div>
|
.zn-display-form
|
| Labels |
<dt class="form-label">Form Label</dt>
|
.form-label
|
| Field data |
<dd class="form-data">Form Data</dd>
|
.form-data
|
| Heading |
<h3 class="heading">Header</h3>
|
.heading
|
