Field Types

Attributes 

Each field definition requires that the type and id attributes be present at a minimum.

Attribute Description
id The required id for the field, the id becomes a place holder in the email generated from the form.
type The required field type.
label The label for the field.
placeholder The optional HTML5 placeholder for the field.
readonly Set to 1 to make the field readonly.
default If given sets the default option in a select list.

Field types can also have a description e.g.

<field type="text" id="test" label="A Test Field">
	<description>This is the description of a test field.</description>
</field>

Types 

text

A single line text field.

textarea

Multiline text input field.

email

Email address.

uri

A web address e.g. http://clearfusioncms.com

number

A number input field.

int

A number input field that only accepts integers.

checkbox

A single checkbox input field.

file

A file selector allowing the user to select a file from their PC. Files are added as attachments to the email sent when the form is submitted.

select

Dropdown list of items to select one from, the available items are specified with the option tag e.g.

<field type="select" id="selecttest" label="Selection">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</field>

radio

Radio list showing all available options but only allowing one option to be selected, the available options are specified with the option tag e.g.

<field type="radio" id="radiotest" label="Radio">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</field>

checklist

The checklist field displays a list of checkboxes and allows the user to select as many boxes as is required, the options available are specified with the options tag e.g.

<field type="checklist" id="checklisttest" label="Checklist">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</field>

pane

The pane field displays a block of HTML within the form e.g.

<field type="pane" id="pane1">
	<![CDATA[<strong>Testing</strong> HTML in a pane!]]>
</field>

verification

Adds a human verification question to the form e.g.

<field type="verification" id="verify" />

recaptcha

Adds a human verification question to the form using Google reCAPTCHA

<field type="recaptcha" id="verify" site_key="****" secret_key="****" />

Where site_key and secret_key are the keys for the reCAPTCHA you want to use.

Submit Button

The forms submit button is defined with the submit tag and takes a single attribute of caption which sets the submit buttons caption e.g.

<submit caption="Send Contact" />

Reply To

The field used for the reply to address is specified with the replyto tag e.g.

<replyto field="email" name="name" />

name is optional and if given is the field holding the name of the person to reply to.

Validation

The forms module not only allows you to define the fields for the form but also what constitutes a valid input to each field. The following example defines a text field that is required but is limited to a maximum length of 100 characters:

<field type="text" id="name" label="Your Name">
	<validate>
		<required />
		<max length="100" />
	</validate>
</field>

For each type of validator there is a default error message however you can set your own error message e.g.

<required>You really do have to fill in this field.</required>

You can combine as many validators as required in order to validate your field.

required

The field is required to be completed by the user.

min

If the attribute length is given e.g. <min length="10" /> then the field must have at least 10 characters in the input.

However if the attribute value is given e.g. <min value="10" /> then the value entered into the field must be a value of 10 or more. For checklists this is the minimum number of items that must be selected.

max

If the attribute length is given e.g. <max length="10" /> then the field must have no more than 10 characters in the input.

However if the attribute value is given e.g. <max value="10" /> then the value entered into the field must be a value of 10 or less. For checklists this is the maximum number of items that can be selected.

pattern

The pattern validator uses a regular expression to validate the input, the value attribute must hold the expression to use. The following validates the field to only allow lowercase letters a to z:

<pattern value="#^[a-z]*$#" />

A pattern of /^((?!badword).)*$/i will match only input that does not contain the bad or excluded word.

email

Checks that the filed contains a valid email address.

uri

Checks that the field contains a valid site address.

not

Used to check the value of a field does not equal some value,  e.g. if the field is a selection you can use the not validator to ensure the user has chosen one option:

<field type="select" id="selecttest" label="Selection">
	<option>Please Choose One...</option>
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
	<validate>
		<not value="0">You must choose an option.</not>
	</validate>
</field>

equal

Use to check that the field contains a specific value:

<field type="text" id="name" label="Your Name">
	<validate>
		<equal value="100" />
	</validate>
</field>



TOP