VRSmarty panoform plugin

panoform: A plugin for showing an input or email contact form

Current version: 1.0

Zip file
Feedback form example
VRSmarty XML file
Plugin XML file
Email form example
Plugin XML file
Password form example
Plugin XML file
Password encryptor

panoform.swf

A VRSmarty plugin for showing an input form that very much works as a standard HTML input form, where the viewer can enter data and make selections, and then send the completed form to the server. It can of course also be used as an email contact form, but as Flash cannot send emails by itself, you will either need a server side script or open up the viewers email client.

You can choose whether to send the form data quietly to the server, open up a new browser window or send the data to a JavaScript function via ExternalInterface. You can also use form data to build VRSmarty commands.

Together with the panologic plugin you can easily implement password protection of your panos or tour functions.

Form request method is GET (parameters are added to the url) or POST (all parameters and data is sent separately).

The following parameters are supported:

In VRSmarty xml file:

xmlFile xmlFile=myform.xml read plugin parameters from this XML file

Plugin external xml file:

In <form> tag:

method method="POST" request method, GET (default) or POST

reset reset="1" reset=1 will reinitialize form after closing,

default=0, see below

bgColor bgColor="#C0C0C0" form background color, if missing -

background will be transparent.

borderColor borderColor="#000000" form border color, if missing -

no border will be drawn.

font font="Trebuchet MS" form default font

textSize textSize="12" form default text size

textColor textColor="#000000" form default text color

bold bold="1" form default font is bold

italic italic="1" form default font is italic

underline underline="1" form default font is underlined

In <image> tag:

pos pos="120:12" image position (x:y)

url url="images/logo.png" image url

In <label> tag:

pos pos="120:12" label position (x:y)

In <box> tag:

pos pos="120:12" box position (x:y)

size size="188:60" box size (width:height)

bgColor bgColor="#C0C0C0" box background color

borderColor borderColor="#000000" box border color

In <hidden> tag:

name name="id" hidden parameter name

value value="abcd" hidden parameter value

In <input> tag:

name name="id" input field name

pos pos="120:12" input field position (x:y)

width width="235" input field width

value value="abcd" input field initial value

maxChars maxChars="30" max number of characters allowed

password password="1" field will only show asterisks (*)

bgColor bgColor="#C0C0C0" input field background color

borderColor borderColor="#000000" input field border color

In <textarea> tag:

name name="id" textarea name

pos pos="120:12" textarea position (x:y)

size size="300:220" textarea size (width:height)

bgColor bgColor="#C0C0C0" textarea background color

borderColor borderColor="#000000" textarea border color

In <select> tag:

name name="id" dropdown list name

pos pos="120:12" dropdown position (x:y)

width width="235" dropdown width

rows rows="5" max number of rows shown when opened

In <option> child tag:

value value="6" option value

selected selected="1" option initially selected

In <radio> tag:

name name="id" radiobutton group name

pos pos="120:12" position of first radiobutton (x:y)

align align="H" alignment of radiobuttons (V=vertical, H=horizontal)

spacing spacing="16" radiobutton spacing, default=20

In <radiobutton> child tag:

value value="6" radiobutton value

selected selected="1" radiobutton initially selected

In <checkbox> tag:

name name="id" checkbox name

pos pos="120:12" checkbox position (x:y)

value value="12" checkbox value

selected selected="1" checkbox initially checked

In <button> tag:

pos pos="120:12" button position (x:y)

label label="OK" button label text

width width="235" button width (default is label text width + 35)

function function="send" form function, "send", "navigate", "cancel" or name of

JavaScript function, default: "cancel", see NOTES below

actionUrl actionUrl="/php/script2.php" url to which form data will be sent when button

is clicked

tooltip tooltip="Click here to send email"

tooltip text shown at button mouse-over

onClick onClick="mailSent" VRSmarty command to execute when button is clicked

Furthermore, the following tags can contain text formatting attributes:

Font attributes not given in these tags are taken from the <form> tag.

The text formatting attributes are:

font=""
textSize=""
textColor=""
bold=""
italic=""
underline=""

NOTES:

The form fields get their tab order from the order in which they are entered in the XML file.

When form request method "GET" is used all form data will be appended to the url as parameters in the usual way: http://url?name=value&name=value... Request method "POST" is better suited when you have many parameters or more data - as for example in an email contact form. The form data is then sent separately to the server and will never show in the url - but you will of course need a server script that can handle this.

When the reset="1" attribute is included, all form data will be reinitialized after the form has been closed. This will ensure that the form will look exactly the same every time it is reopened.

The function="..." attribute in the <button> tag decides what action is to be taken when the button is clicked:

send	The form data is just being sent quietly to the server without waiting for
	any response. The url is probaly pointing to a server side script (Perl, PHP)
	that takes care of the form data.
navigate	A new window is opened in the viewers browser, so the url should point to a web
	page or to a server script generating HTML.
cancel	The button functions as a usual cancel button - the plugin is closed and no
	data will be sent.

Anything else specified in this attribute will be interpreted as the name of a JavaScript function, which will be called via the ExternalInterface API with all form data passed as parameters.

In the onClick command, you can now include form values that the viewer has entered by using the placeholder $(name), where "name" is the name of an input field, textarea, select list, checkbox or radio button. So, if you for example have an input field with name="username", you can use the value entered by the viewer in your VRSmarty command by writing $(username).

"\n" can be used in the <label> and <textarea> tags to generate line breaks.

To support password protection, you can also encrypt data sent to - for example - the panoform plugin for validation of the password. The field value will be encrypted when an asterisk (*) is added before the field name in the onClick string.
Example: onClick="pl_spot.content.exec('check1','$(*pswd)'"

An encryptor (encrypt.html) is included for generating encrypted values.

Example 1:

<?xml version = '1.0'?>
<form 
   width="380" height="450"
   bgColor="#FFFFF0" borderColor="#404040" font="Trebuchet MS" textSize="12" textColor="#404040" 
   method="GET"
   >

   <hidden name="hid1" value="1111" />
   <hidden name="hid2" value="222222" />
   <image pos="12:12" url="images/logo1.png" />
   <label pos="120:12" textSize="16" bold="1">This is my form</label>
   <label pos="120:55">Enter your name here</label>
   <input pos="120:75" width="235" name="name" value="" font="Courier New" textSize="11" maxChars="" bgColor="#E8E8D8" borderColor="#D0D0C0" />
   <label pos="120:105">Hotel category</label>
   <select name="category" pos="120:125" width="235" rows="3" font="Courier New" textSize="11">
      <option value="1">Cheapest possible</option>
      <option value="2">Clean - with no rats</option>
      <option value="3" selected="1">Better than home</option>
      <option value="4">Really luxurious</option>
      <option value="5">Penthouse out of this world</option>
   </select>
   <label pos="25:165">Room choice:</label>
   <box pos="25:185" size="188:60" bgColor="#E8E8D8" />
   <radio name="room_type" pos="28:190" spacing="22" textSize="10" textColor="#FF0000">
      <radiobutton value="S" selected="1">Single room</radiobutton>
      <radiobutton value="D">Double room with king size bed</radiobutton>
   </radio>
   <label pos="230:165">Any extras?</label>
   <box pos="230:185" size="125:60" borderColor="#000000" />
   <checkbox name="view" pos="235:190" value="1" textSize="10" textColor="#0000FF">With a view</checkbox>
   <checkbox name="shower" pos="235:210" value="1" checked="1" textSize="10" bold="1">Shower, please</checkbox>
   <label pos="25:250">Give feedback:</label>
   <textarea pos="25:270" name="description" size="330:130" bgColor="#E8E8D8" borderColor="#D0D0C0">
      The cat was playing in the garden.\n\nThe rain in Spain...
   </textarea>
   <button pos="120:410" label="OK" function="navigate" actionUrl="http://wirestam.com/panos/Flash/panoform/panoreply2.html" onClick="showBtn" bold="1" width="60" />
   <button pos="200:410" label="Cancel" function="cancel" onClick="showBtn" />

</form>

Example 2:

<?xml version = '1.0'?>
<form 
   width="450" height="450"
   method="POST"
   font="Trebuchet MS" textSize="12" textColor="#606060" bold="1" italic="1"
   >

   <hidden name="param1" value="Reply from panoform plugin" />
   <image pos="0:0" url="images/envelope2.png" />
   <label pos="130:15" textSize="16">Why don't you send me an email?</label>
   <label pos="140:45">Enter your name here:</label>
   <input pos="140:65" width="200" name="name" value="" borderColor="#A0A0A0" font="Courier New" textColor="#000000" textSize="12" maxChars="" />
   <label pos="140:85">Your email address:</label>
   <input pos="140:105" width="200" name="email" value="" borderColor="#A0A0A0" font="Courier New" textColor="#000000" textSize="12" maxChars="" />
   <label pos="140:125">Subject:</label>
   <input pos="140:145" width="200" name="subject" value="" borderColor="#A0A0A0" font="Courier New" textColor="#000000" textSize="12" maxChars="" />
   <label pos="140:175">Your message:</label>
   <textarea pos="140:195" name="content" size="260:185" borderColor="#A0A0A0" textColor="#000000" bold="0">
      The cat was playing in the garden...
   </textarea>
   <button 
      pos="190:390" 
      label="Send" 
      actionUrl="http://wirestam.com/php/mailscript2.php" 
      width="60" 
      function="send"
      onClick="mailSent"
   />
   <button pos="270:390" label="Cancel" function="cancel" onClick="mailOff" />

</form>

Example 3:

<?xml version = '1.0'?>
<form width="280" height="145" reset="1" bgColor="#1C492F" borderColor="#000000" font="Trebuchet MS" textSize="12" textColor="#404040" bold="1" >
   <image pos="1:5" url="images/lock.png" />
   <label pos="135:18" textSize="15" textColor="#FFFFF0">Enter password:</label>
   <input pos="135:50" width="120" name="pswd" password="1" textSize="13" bgColor="#E8E8D8" borderColor="#000000" />
   <button pos="120:110" label="OK" bold="1" width="60" onClick="panologic.content.exec('pano2','$(*pswd)')" />
   <button pos="200:110" label="Cancel" function="cancel" />
</form>

Version history:

In <form> tag:
method	method="POST"	request method, GET (default) or POST
reset	reset="1"	reset=1 will reinitialize form after closing,
		default=0, see below

bgColor	bgColor="#C0C0C0"	form background color, if missing -
		background will be transparent.
borderColor	borderColor="#000000"	form border color, if missing -
		no border will be drawn.
font	font="Trebuchet MS"	form default font
textSize	textSize="12"	form default text size
textColor	textColor="#000000"	form default text color
bold	bold="1"	form default font is bold
italic	italic="1"	form default font is italic
underline	underline="1"	form default font is underlined

In <image> tag:
pos	pos="120:12"	image position (x:y)
url	url="images/logo.png"	image url

In <label> tag:
pos	pos="120:12"	label position (x:y)

In <box> tag:
pos	pos="120:12"	box position (x:y)
size	size="188:60"	box size (width:height)
bgColor	bgColor="#C0C0C0"	box background color
borderColor	borderColor="#000000"	box border color

In <hidden> tag:
name	name="id"	hidden parameter name
value	value="abcd"	hidden parameter value

In <input> tag:
name	name="id"	input field name
pos	pos="120:12"	input field position (x:y)
width	width="235"	input field width
value	value="abcd"	input field initial value
maxChars	maxChars="30"	max number of characters allowed
password	password="1"	field will only show asterisks (*)
bgColor	bgColor="#C0C0C0"	input field background color
borderColor	borderColor="#000000"	input field border color

In <textarea> tag:
name	name="id"	textarea name
pos	pos="120:12"	textarea position (x:y)
size	size="300:220"	textarea size (width:height)
bgColor	bgColor="#C0C0C0"	textarea background color
borderColor	borderColor="#000000"	textarea border color

In <select> tag:
name	name="id"	dropdown list name
pos	pos="120:12"	dropdown position (x:y)
width	width="235"	dropdown width
rows	rows="5"	max number of rows shown when opened

In <option> child tag:
value	value="6"	option value
selected	selected="1"	option initially selected

In <radio> tag:
name	name="id"	radiobutton group name
pos	pos="120:12"	position of first radiobutton (x:y)
align	align="H"	alignment of radiobuttons (V=vertical, H=horizontal)
spacing	spacing="16"	radiobutton spacing, default=20

In <radiobutton> child tag:
value	value="6"	radiobutton value
selected	selected="1"	radiobutton initially selected

In <checkbox> tag:
name	name="id"	checkbox name
pos	pos="120:12"	checkbox position (x:y)
value	value="12"	checkbox value
selected	selected="1"	checkbox initially checked

In <button> tag:
pos	pos="120:12"	button position (x:y)
label	label="OK"	button label text
width	width="235"	button width (default is label text width + 35)
function	function="send"	form function, "send", "navigate", "cancel" or name of
		JavaScript function, default: "cancel", see NOTES below
actionUrl	actionUrl="/php/script2.php"	url to which form data will be sent when button
		is clicked
tooltip	tooltip="Click here to send email"
		tooltip text shown at button mouse-over
onClick	onClick="mailSent"	VRSmarty command to execute when button is clicked