CSS styles

CSS styles can be used the same as with any web page, to define the appearance of the twzContact form and screen messages. Your CSS styles can be embedded in a <style> tag within the contact page, or in an external stylesheet file.

Any element can be styled with CSS. To get an idea of what's possible, see the example forms.

Known styles

A few class names are encoded in twzContact, and you will need to assign styles to these to be able to make use of them. These include:

To find other class names automatically added by twzContact, view your form in your browser, then view the page source.

For example, you can identify mandatory fields by making their label bold, like this:

form.twzContact label.required { font-weight:bold; }

or simply:

.required { font-weight:bold; }

You can add an asterisk to the label of mandatory fields like this:

form.twzContact label.required:after { content:"*"; }

If the visitor misses a mandatory field you can highlight it in yellow with this style:

.missing { background-color:#ff8; }

If you want some additional space at the bottom of the form around the submit button, you could use:

input#submit { margin:20px; }

If your form contains a captcha field, it will normally appear on the right side as input box, field name and captcha image one under the other. You could change this behaviour as follows:

Custom styles

You can also define your own class names and apply them to individual fields on the form. For example, if you want some text boxes to be all the same width, you could define a style:

.widebox { width:250px; }

Then in the fields section of the settings file, use:

your_name  = text,widebox 
your_email = email,widebox,1
address    = text,widebox
city       = text,widebox

twzContact comes with some example CSS to get you started. You could also get some ideas from the example forms.