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>
A single line text field.
Multiline text input field.
Email address.
A web address e.g. http://clearfusioncms.com
A number input field.
A number input field that only accepts integers.
A single checkbox input field.
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.
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 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>
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>
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>
Adds a human verification question to the form e.g.
<field type="verification" id="verify" />
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.
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" />
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.
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.
The field is required to be completed by the user.
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.
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.
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.
Checks that the filed contains a valid email address.
Checks that the field contains a valid site address.
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>
Use to check that the field contains a specific value:
<field type="text" id="name" label="Your Name"> <validate> <equal value="100" /> </validate> </field>