Building your own CSS form styles

The default CSS style sheet is availble for download and modification here: webforms.css. This file can be hosted on your own web server or embedded into <style></style> tags on your web page.

All of the WORKetc form css classes begin with a root container class named "WebForm". The main structure of the WORKetc form looks like below:

There are two types of field layouts. One is single form element which looks like this:

The other is a grouped form element, which looks like this:

There's also a more complex form of grouped element - Address Editor, which looks like this:

The float loading layer is named "loading":

The loading status glyph displayed after the submit button is clicked, is named "inline_loading":

The form error message feedback is named "CallBackError":

The message displayed after the form submitted successfully is named "info"

The date picker used is based on the jquery datepicker plugin. You may wish to use the existing css styles for the datepicker, included below: