Online Form & Action Nodes
 | This node is a very powerful tool when developing web forms.
Features
- Able to create groups style and change the layout of the form
- Able to create multi-page forms (* Not implemented*)
- Class names are assigned to all elements and element containers
- Enable Captcha easily (* Find a better way than manually coping captcha files over *)
- Able to insert custom html, javascript and php code anywhere in the form)
Below are some examples of a simple contact form and event registration form.
|
Sample Nodes for Download
-
To download any of the below sample nodes, select the code example field, press Ctrl-A to select-all,
then press Ctrl-C to copy. Identify the correct parent node in your WebPal client. Right-click on the
parent node, then select "Paste". To view the results, simply preview the chapter.
wpWebForm
This node creates a web form and gives you the freedom to customize the form as needed.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| name | required | | Value to identify the node and name of the form |
| add-captcha | oneof | no, yes | If this is set to yes will add captach validation to the form |
| captcha-label-width | default | 50% | Determine how big the captcha label width should be. Can enter a percentage or a number, the number will be converted to px. |
Sub Nodes
| Name | Type | Help |
|---|
| page | wpWebFormPage | More occurences of page will be allowed once the paging functionality is implemented |
| clear-form | wpActionClear | Adds a reset button to the form |
| send-as-email | wpActionEmail | Adds a button to send form content to a email address |
| submit-to-url | wpActionUrl | Adds a button that submits the form to the specified URL |
| lookup-table | wpWebFormLookup | Create a php array that can be used to process the form and generate list elements |
wpWebFormPage
The page node is used for paging, so you can have different elements on different pages. Since paging has not been implemented yet, only 1 page is available per web-form.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| name | required | | Value to identify the node |
| layout | oneof | stacked, multi-column(side-by-side) | If stacked is selected group nodes with appear stackes. Multi-column group nodes will appear side-by-side. |
| required-symbol | default | * | The symbol used when an element is required |
| required-symbol-position | oneof | left-of-label, right-of-label, no-symbol | Determines where the required symbol should appear |
Sub Nodes
| Name | Type | Help |
|---|
| title | wpStringL | Title for the group in a <h2> tag |
| group | wpWebFormGroup | Container to hold form elements and create different layouts |
wpWebFormGroup
A group node is a container for form elements and other groups. This is great to change up the orientation/styling for different parts of the form.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| name | required | | Value to identify the node |
| layout-label-width | default | 50% | The width of the label column. This field accepts percentages and integers |
| layout | oneof | stacked, multi-column(side-by-side) | If stacked is selected group/elemnt nodes with appear stackes. Multi-column group/elements nodes will appear side-by-side. |
Sub Nodes
wpWebFormLookup
This node creates a php file containing an array entry for each row. This is used when there is custom programming required when the form is submitted.
filename: lookup_lookup table name.php filename (if a language other then english is specified): lookup_lookup table name_lang.php
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| name | required | | Value to identify the node. The name of the php array that gets generated |
Sub Nodes
wpWebFormLookupRow
Example:
Lookup-table name = 'Province'
Row 1
key = 1
label = 'Ontario'
value1 = 'ON'
value2 = 'Toronto'
value3 = 'White Trillium'
value4 = 'http://www.ontario.ca'
Row 2
key = 2
label = 'Alberta'
value1 = 'AB'
value2 = 'Edmonton'
value3 = 'Wild Rose'
value4 = 'http://www.alberta.ca'
This is what gets created in the php file :
Filename: lookup_Province.php
$Province = array();
$Province[1] = array(
'label' = "Ontario",
'value1' = "ON",
'value2' = "Toronto",
'value3' = "White Trillium",
'value4' = "http://www.ontario.ca"
);
$Province[2] = array(
'label' = "Alberta",
'value1' = "AB",
'value2' = "Edmonton",
'value3' = "Wild Rose",
'value4' = "http://www.alberta.ca"
);
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| value2 | optional | | See above for description |
| key | optional | | See above for description |
| label | optional | | See above for description |
| value1 | optional | | See above for description |
| value3 | optional | | See above for description |
| value4 | optional | | See above for description |
| lang | oneof | any, en, fr, de, es | See above for description |
wpWebFormElement
This is the default setup of a form element, most form elements inherit from it.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| name | required | | Value to identify the node, used as the name for the form element |
| lang | oneof | any, en, fr, de, es | sets the language of this element. "any" will make the element appear in all languages. ex: "fr" will make the element appear only on the french version of the site. |
| required | oneof | no, yes | Detiermines if the field is required in the form |
| default-value | optional | | The default value to appear within the element (used for text elements) |
| display-label | oneof | default, left-of-input, right-of-input, inside-input, above-input, below-input | Determines where the lable will be positioned |
| label-alignment | oneof | default, left, center, right | Determines how the label should be aligned |
| width | default | 80% | The width of the element. Percentage and integer numbers are allowed |
Sub Nodes
| Name | Type | Help |
|---|
| label | wpStringL | The label of the form element |
| help-text | wpWebFormHelpText | This is where you can add help text to give more details to the client about the element. Will add a image beside the element and on hover will display the text. |
wpWebFormPlainElement
This creates a multi-line text box for your form.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| height | default | 22 | The height of the element |
wpWebFormHelpText
This is where you can add more information about what is expected to be filled out in the form. If this is added to the elements an image will appear beside the element. When the user hovers over the image the help text will appear.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| lang | oneof | any, en, fr, de, es | sets the language of this element. "any" will make the element appear in all languages. ex: "fr" will make the element appear only on the french version of the site. |
wpWebFormInput
This creates a single-line text box for your form. If type attribute is set to password whatever the user type will be hidden.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| type | oneof | regular, password | Determines if the text element is type text (regular) or password |
| read-only | oneof | no, yes | Determines if the text element is read-only |
Simple Type: wpWebFormStatic
wpWebFormSelectOne
This creates a form element that you can only select one value from. This includes: radio buttons and drop-down.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| type | oneof | drop-down, radio-vertical, radio-horizontal | Determines the type of select object. You can choose from drop-down, radio buttons displayed vertically and radio buttons displayed horizontally. |
| lookup-options-from | default | | This is where you select the lookup-table name if you want that values to be popluted from there. |
Sub Nodes
wpWebFormElementOptions
This is the container that stores all options available for the select-one, and select-multiple elements.
Where to use this node
Sub Nodes
wpWebFormElementOption
This is that actual options that will appear in the select-one and select-multiple elements. The label is what the user sees and the value is what the form submits to be processed.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| label | optional | | The label of the option element |
| value | optional | | The value of the option element |
| lang | oneof | any, en, fr, de, es | sets the language of this element. "any" will make the element appear in all languages. ex: "fr" will make the element appear only on the french version of the site. |
wpWebFormHidden
This creates a hidden form element.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| name | required | | The name of the hidden element |
| value | optional | | The value of the hidden element |
| lang | oneof | any, en, fr, de, es | sets the language of this element. "any" will make the element appear in all languages. ex: "fr" will make the element appear only on the french version of the site. |
wpWebFormSelectMultiple
This creates a form element that you can select multiple values from. This includes: radio buttons and drop-down.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| type | oneof | checkboxes-vertical, checkboxes-horizontal, list,checkbox-list | Determines the type of multi-select elements. Choose between Checkboxes listed vertically, checkboxes listed horizontally, list, and checkbox list |
| height | default | 22 | The height of the element (list and checkbox list need this value) |
| lookup-options-from | default | | This is where you select the lookup-table name if you want that values to be popluted from there. |
Sub Nodes
wpWebFormDate
This creates a date selector element. The calendar that is used for this element is styled in the dafault way.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| format | oneof | yyyy-mm-dd hh:ss, yyyy-mm-dd, dd/mm/yy, mon-dd-yyyy | Determines what format or the date when using the date picker |
wpActionEmail
This action is used when you want the form to send an email containing all the values users have selected.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| sendto | default | info@webpal.net | The email where the form information will get sent to |
| subject | default | Form Data | The subject line of the email |
| from | default | | The form valiue for the email |
| format | oneof | text, xml, both | The type of email example: plain-text (text) |
| send-confirmation-to-user | oneof | no, yes | If this is set to "yes" a copy of the email will be sent to the email address entered in the email input-field. Please note the input-field must have the name email for this to work. |
Sub Nodes
| Name | Type | Help |
|---|
| button-caption | wpStringL | The caption of the submit button |
| button-image | wpImage | Adds a image as the submit button |
| message-ok | wpHtml | Message that displays if the form is submitted successfully |
| url-ok | wpStringL | The url that the user will be redirected once submit is successful |
wpActionClear
This action gives the ability to clear the form.
Where to use this node
Sub Nodes
| Name | Type | Help |
|---|
| button-caption | wpStringL | The caption of the reset button |
| button-image | wpImage | Adds a image as the reset button |
wpActionUrl
This action gives the ability to submit the form to a custom file.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| url | default | | The url where the form will get submitted to |
Sub Nodes
| Name | Type | Help |
|---|
| button-caption | wpStringL | The caption of the submit button |
| button-image | wpImage | Adds a image as the submit button |
| message-ok | wpHtml | Message that displays if the form is submitted successfully |
| url-ok | wpStringL | The url that the user will be redirected once submit is successful |
wpActionDatabase
This action gives the ability to insert the values into a database * This needs some testing *
This action requires a dbconnector node to be present.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| table-name | default | | The table name of where the form data will be inserted to. Please note that the name of the elements must match the column names in the table. |
Sub Nodes
| Name | Type | Help |
|---|
| button-caption | wpStringL | The caption of the submit button |
| button-image | wpImage | Adds a image as the submit button |
| message-ok | wpHtml | Message that displays if the form is submitted successfully |
| url-ok | wpStringL | The url that the user will be redirected once submit is successful |
