FPP panoform plugin

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

Current version: 2.1.1

Zip file
Test page
FPP XML file
Plugin XML file
Email form 1 page
Plugin XML file
Email form 2 page
Plugin XML file
Email form 3 page
Plugin XML file

panoform.swf

FPP hotspot 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.

Form request method is GET or POST.

The following parameters are supported:

Hotspot attributes in FPP xml file:

xmlfile	xmlfile=panoform.xml	read plugin parameters from this XML file
width	width=400	form width
height	height=300	form height

In plugin XML file:

In <form> tag:
method	method="POST"	request method, GET (default) or POST

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
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)

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 JavaScript
		function name, 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"	FPP 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 in the usual way: http://url?name=value&name=value... Request method "POST" is better suited when you have may 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.

The function="..." attribute in the <button> tag decides what type of button is generated, and 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 going to be opened in the viewers browser, so the url should

point to either a script generating HTML or a web page with javascript.

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.

Example plugin XML file:

<?xml version = '1.0'?>
<form
   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 FPP 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" 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.
   </textarea>
   <button
      pos="190:390" 
      label="Send" 
      actionUrl="http://wirestam.com/php/mailscript2.php" 
      width="60" 
      function="send"
      onClick="global.mailSent"
   />
   <button pos="200:410" label="Cancel" function="cancel" />
</form>

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 going to be opened in the viewers browser, so the url should
	point to either a script generating HTML or a web page with javascript.
cancel	The button functions as a usual cancel button - the plugin is closed and no
	data will be sent.