slide1

Supported Solutions

Client success is our goal. Our Support Team delivers top-notch turnaround on support requests from any WebPal Server admin. Our enterprise clients enjoy end-user support services to achieve highest levels of adoption and workforce satisfaction.

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

NameUseValueHelp
namerequiredValue to identify the node and name of the form
add-captchaoneofno, yesIf this is set to yes will add captach validation to the form
captcha-label-widthdefault50%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

NameTypeHelp
pagewpWebFormPageMore occurences of page will be allowed once the paging functionality is implemented
clear-formwpActionClearAdds a reset button to the form
send-as-emailwpActionEmailAdds a button to send form content to a email address
submit-to-urlwpActionUrlAdds a button that submits the form to the specified URL
lookup-tablewpWebFormLookupCreate 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

NameUseValueHelp
namerequiredValue to identify the node
layoutoneofstacked, multi-column(side-by-side)If stacked is selected group nodes with appear stackes. Multi-column group nodes will appear side-by-side.
required-symboldefault*The symbol used when an element is required
required-symbol-positiononeofleft-of-label, right-of-label, no-symbolDetermines where the required symbol should appear

Sub Nodes

NameTypeHelp
titlewpStringLTitle for the group in a <h2> tag
groupwpWebFormGroupContainer 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

NameUseValueHelp
namerequiredValue to identify the node
layout-label-widthdefault50%The width of the label column. This field accepts percentages and integers
layoutoneofstacked, 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

NameTypeHelp
titlewpStringLTitle for the group in a <h3> tag
static-textwpWebFormStaticInserts basic text (works like the html node)
input-fieldwpWebFormInputCreates a form element type text, and password
hidden-fieldwpWebFormHiddenCreates a form element type hidden
select-onewpWebFormSelectOneCreate a form element type dropdown, and radio-button
select-multiplewpWebFormSelectMultipleCreates a form element type checkbox, list and checkbox list
plaintext-editorwpWebFormPlainElementCreates a form node type textarea
date-selectorwpWebFormDateCreates a form element type date picker
file-uploadwpWebFormElementCreates a form element type file upload
groupwpWebFormGroupContainer to hold form elements and create different layouts

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

NameUseValueHelp
namerequiredValue to identify the node. The name of the php array that gets generated

Sub Nodes

NameTypeHelp
rowwpWebFormLookupRowThe container for the array content

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

NameUseValueHelp
value2optionalSee above for description
keyoptionalSee above for description
labeloptionalSee above for description
value1optionalSee above for description
value3optionalSee above for description
value4optionalSee above for description
langoneofany, en, fr, de, esSee 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

NameUseValueHelp
namerequiredValue to identify the node, used as the name for the form element
langoneofany, en, fr, de, essets 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.
requiredoneofno, yesDetiermines if the field is required in the form
default-valueoptionalThe default value to appear within the element (used for text elements)
display-labeloneofdefault, left-of-input, right-of-input, inside-input, above-input, below-inputDetermines where the lable will be positioned
label-alignmentoneofdefault, left, center, rightDetermines how the label should be aligned
widthdefault80%The width of the element. Percentage and integer numbers are allowed

Sub Nodes

NameTypeHelp
labelwpStringLThe label of the form element
help-textwpWebFormHelpTextThis 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

NameUseValueHelp
heightdefault22The 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

NameUseValueHelp
langoneofany, en, fr, de, essets 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

NameUseValueHelp
typeoneofregular, passwordDetermines if the text element is type text (regular) or password
read-onlyoneofno, yesDetermines 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

NameUseValueHelp
typeoneofdrop-down, radio-vertical, radio-horizontalDetermines the type of select object. You can choose from drop-down, radio buttons displayed vertically and radio buttons displayed horizontally.
lookup-options-fromdefaultThis is where you select the lookup-table name if you want that values to be popluted from there.

Sub Nodes

NameTypeHelp
optionswpWebFormElementOptionsHere is where the options are specified if a look-up table is not used

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

NameTypeHelp
optionwpWebFormElementOptionStores the option key/value

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

NameUseValueHelp
labeloptionalThe label of the option element
valueoptionalThe value of the option element
langoneofany, en, fr, de, essets 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

NameUseValueHelp
namerequiredThe name of the hidden element
valueoptionalThe value of the hidden element
langoneofany, en, fr, de, essets 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

NameUseValueHelp
typeoneofcheckboxes-vertical, checkboxes-horizontal, list,checkbox-listDetermines the type of multi-select elements. Choose between Checkboxes listed vertically, checkboxes listed horizontally, list, and checkbox list
heightdefault22The height of the element (list and checkbox list need this value)
lookup-options-fromdefaultThis is where you select the lookup-table name if you want that values to be popluted from there.

Sub Nodes

NameTypeHelp
optionswpWebFormElementOptionsHere is where the options are specified if a look-up table is not used

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

NameUseValueHelp
formatoneofyyyy-mm-dd hh:ss, yyyy-mm-dd, dd/mm/yy, mon-dd-yyyyDetermines 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

NameUseValueHelp
sendtodefaultinfo@webpal.netThe email where the form information will get sent to
subjectdefaultForm DataThe subject line of the email
fromdefaultThe form valiue for the email
formatoneoftext, xml, bothThe type of email example: plain-text (text)
send-confirmation-to-useroneofno, yesIf 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

NameTypeHelp
button-captionwpStringLThe caption of the submit button
button-imagewpImageAdds a image as the submit button
message-okwpHtmlMessage that displays if the form is submitted successfully
url-okwpStringLThe 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

NameTypeHelp
button-captionwpStringLThe caption of the reset button
button-imagewpImageAdds 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

NameUseValueHelp
urldefaultThe url where the form will get submitted to

Sub Nodes

NameTypeHelp
button-captionwpStringLThe caption of the submit button
button-imagewpImageAdds a image as the submit button
message-okwpHtmlMessage that displays if the form is submitted successfully
url-okwpStringLThe 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

NameUseValueHelp
table-namedefaultThe 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

NameTypeHelp
button-captionwpStringLThe caption of the submit button
button-imagewpImageAdds a image as the submit button
message-okwpHtmlMessage that displays if the form is submitted successfully
url-okwpStringLThe url that the user will be redirected once submit is successful