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.

Error Messages

These are following the Uni-Form markup convention and will come pre-styled.

Basic style:

Sample markup:

<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.

Success Message

Also Uni-Form standardized, but without any kind of initial styling.

Sample markup:

<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.

Sample markup:

<div class="fnl-processing" id="spinner" style="display: none;">  Sending, please wait…</div>
Did this answer your question?