As mentioned before, all Funnel forms are Uni–Form flavored, meaning they support Uni–Form markup and styles.
The form embed code that you will be provided with will contain the following lines:
- The CSS file containing basic styles for your form — feel free to discard this line if you wish to style the form yourself
- jQuery — only include if you haven't included it into your site before
- A container div — this is the HTML element that will contain your Funnel form
- Funnel script — used to embed your Funnel form
There are a couple of other elements that you might want to style in a particular way depending on the design of your site.
These are following the Uni-Form markup convention and will come pre-styled.
<div class="errorExplanation" id="errorExplanation"> <h2>Please correct the errors below</h2> <p>There were problems with the following fields:</p> <ul> <li>Name can't be blank</li> <li>Email can't be blank</li> <li>Email is not valid.</li> <li>Project name can't be blank</li> <li>Request item values is invalid</li> </ul></div>
Additionally each label and input/select/textarea field will be wrapped in a special div with a CSS class .field_with_errors and you can use this class as a hook for your additional error state styling.
Also Uni-Form standardized, but without any kind of initial styling.
<div class="notice"> Thanks for contacting us. We will be in touch soon.</div>
“Sending Message” Indicator
This is the bit of text that appears once the user clicks the button to submit the contact form.
<div class="fnl-processing" id="spinner" style="display: none;"> Sending, please wait…</div>