simpleForm2 Module

simpleForm2

SimpleForm2 module - is not the second version of the simpleForm module but is a different module. Their names are similar because they have virtually identical core. Module simpleForm2 differs from the module simpleForm by the fact that the writing code was transformed into a meta-language + in the code form itself you can enter HTML code, JavaScript, CSS ... The elements of this meta-language look like XML elements except that in the XML tag they are flanked by signs more (>) and less (<), but here instead of these characters braces need to be used. In other words an XML code element in the simpleForm look like this:

<element label="Your name" type="text" required="required" error="Enter your name" />

But in simpleForm2 meta-language like this:

{element label="Your name" type="text" required="required" error="Enter your name" /}

The same applies to the elements "option".

In addition to that, as a consequence of the fact that appeared an opportunity to implement HTML code into code form, the “group” element is no longer required. In simpleForm2 code the following elements can be used:

  • element - the element of the form (input, select, textarea...).
  • option - defines one of several values of element (it may be compared with tag "option" in HTML).

Each of these elements has a certain set of attributes. Attributes can be either required or not required.

Attributes of the tag"element"

  • type * - Defines the type of element. Possible values: text, textarea, select, radio, button, submit, reset, checkbox, captcha, file.
  • label * - Defines the explanatory inscription of element.
  • required - If value of this attribute equals "required", then filling of this element will be required.
  • regex - The value of this attribute is a regular expression, that checks value of the element.
  • error - The value of this attribute is a error message, which will be displayed if error occures while processing this element.
  • value - The value of element by default.
  • class - CSS class of the element.
  • multiple - This attribute can be used only in elements of type: select. Defines the possibility of multiple select. Possible values: multiple.
  • width - This attribute can be used only in elements of type: captcha. Defines width of code image in pixels.
  • height - This attribute can be used only in elements of type: captcha. Defines height of code image in pixels.
  • onclick - This attribute can be used only in elements of type: button, submit, reset. Defines HTML attribute "onclick".
  • onchange - This attribute can be used only in elements of type: text, textarea, select. Defines HTML attribute "onchange".
  • extensions - This attribute can be used only in elements of type: file. Defines allowed file extensions separated by comma. For instance: gif, jpg, zip
  • maxsize - This attribute can be used only in elements of type: file. Defines the maximum file size. Can use values in kilobytes and megabytes. For instance, for maximum file size 200 kilobytes you can write: 200Kb. For 1 megabyte: 1Mb.

Attributes of the tag "option"

  • label * - Defines the explanatory inscription of element.
  • value * - The value of option.
  • selected - If value of this attribute equals "selected", then this value will be selected by default.
  • onclick - Defines HTML attribute "onclick".

Tag "option" is used only as a content of the tag "element" of type: select, radio, checkbox.

Warning! Attributes marked with * are required.

Processing of form occurs in accordance with the requirements specified in the parameters of elements. Data is collected according to the pattern prescribed in the template file and is sent to the e-mail specified in the module form settings.

Example of the simpleForm2 code:

<p>{element label="Your name" type="text" required="required" error="Enter your name" /}</p>
<p>{element label="Your message" type="textarea" required="required" error="Enter your message" /}</p>
<p>
   {element label="simpleForm2 - is a:" type="select"}
      {option label="Module" value="Module" /}
      {option label="Component" value="Component" /}
      {option label="Plug-in" value="Plug-in" /}
      {option label="I dont know" value="I dont know" /}
   {/element}
</p>
<p>{element type="submit" value="Send" /}</p>