Node Package: 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 then manually copying 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
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

NameTypeHelp
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

NameUseValueHelp
name required Value to identify the node
layout oneof stacked, multi-column(side-by-side) If stacked is selected group nodes will appear stacked. 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

NameTypeHelp
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

NameUseValueHelp
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/element nodes will appear stacked. Multi-column group/elements nodes will appear side-by-side.

Sub Nodes

NameTypeHelp
title wpStringL Title for the group in a <h3> tag
static-text wpWebFormStatic Inserts basic text (works like the html node)
input-field wpWebFormInput Creates a form element type text, and password
hidden-field wpWebFormHidden Creates a form element type hidden
select-one wpWebFormSelectOne Create a form element type dropdown, and radio-button
select-multiple wpWebFormSelectMultiple Creates a form element type checkbox, list and checkbox list
plaintext-editor wpWebFormPlainElement Creates a form node type textarea
date-selector wpWebFormDate Creates a form element type date picker
file-upload wpWebFormElement Creates a form element type file upload
group wpWebFormGroup Container 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
name required Value to identify the node. The name of the php array that gets generated

Sub Nodes

NameTypeHelp
row wpWebFormLookupRow The 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
key optional See above for description
label optional See above for description
value1 optional See above for description
value2 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

NameUseValueHelp
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

NameTypeHelp
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

NameUseValueHelp
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

NameUseValueHelp
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

NameUseValueHelp
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

NameUseValueHelp
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

NameTypeHelp
options wpWebFormElementOptions Here 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
option wpWebFormElementOption Stores 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
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

NameUseValueHelp
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

NameUseValueHelp
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

NameTypeHelp
options wpWebFormElementOptions Here 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
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

NameUseValueHelp
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 from value 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

NameTypeHelp
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

NameTypeHelp
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

NameUseValueHelp
url default The url where the form will get submitted to

Sub Nodes

NameTypeHelp
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

NameUseValueHelp
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

NameTypeHelp
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

More Information

Quick Navigation

Home

Company Profile

Our Clients

Latest News

Web Content Management

Document Management

Web Database Platform

Email Marketing

Software Development

Web Design & Development

Application Hosting

WebPal Knowledgebase

| More

 

Search Site