Form Plugin Examples

See System.FormPlugin

Please view the raw text of this topic to learn how these forms are created.

Form elements

Format

%STARTFORM{ name="formatform" action="view" elementformat="" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%WikiGuest%FORMELEMENT{ name="Team" type="radio" title="Favorite team member:" options="mary=Mary M, peter=Peter P, annabel=Annabel A, nicky=Nicky N, jennifer=Jennifer J" validate="required" mandatory="on" hint="Select one person" }%%ENDFORM%

Multi-select items

%STARTFORM{ name="multiform" action="view" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%annabelmary,peternot important%ENDFORM%

Disabled

%STARTFORM{ name="disabledform" action="view" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%Main.WikiGuestpeter%FORMELEMENT{ name="action" type="submit" buttonlabel="Submit" disabled="on" }%%ENDFORM%

Read-only

%STARTFORM{ name="readonlyform" action="view" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%Main.WikiGuestsome text...%ENDFORM%

Password

%STARTFORM{ name="passwordform" action="viewauth" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="Password" type="password" title="Enter a password:" mandatory="on" }%%ENDFORM%

Date

%STARTFORM{ name="date" action="view" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%02 Oct 2006%ENDFORM%

Getting form feedback

Retrieving values with URLPARAM

%STARTFORM{ name="myform" action="view" anchor="ResultUrlParam" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="MyName" type="text" title="Your name:" mandatory="on" value="Adam" }%barbara%FORMELEMENT{ name="action" type="submit" buttonlabel="Submit" }%%ENDFORM%

Submit form to view values:

• Name =
• Friends =

Formatting forms

Hints and mandatory indicators

%STARTFORM{ name="hintform" action="view" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="Name" type="text" title="Your name:" mandatory="on" hint="Or just anything" }%%FORMELEMENT{ name="Anything" type="text" title="Enter something else:" mandatory="on" }%%ENDFORM%

Format: example of items on one line

For example setting param elementformat=" $t $e $m $h ":

%STARTFORM{ name="onelineform" action="view" elementformat=" $t $e $m $h " validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="Name" type="text" title="Your name:" }%%ENDFORM%

Adding CSS styles

Setting:

formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"

%STARTFORM{ name="styleform" action="view" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%%FORMELEMENT{ name="Name" type="text" title="Your name:" }%%ENDFORM%

Custom CSS classes

%STARTFORM{ name="customcssform" action="view" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="Name" type="text" title="Your name:" cssclass="foswikiBroadcastMessage" }%%FORMELEMENT{ name="action" type="submit" buttonlabel="Cancel" cssclass="foswikiButtonCancel" }%%ENDFORM%

Javascript enhancements

Focus

This example is disabled by default, because new browsers automatically scroll the page to the input field with focus.

Show Focus example

Original source:

%STARTFORM{
   name="focusform"
   action="view"
   formcssclass="foswikiFormSteps"
   elementcssclass="foswikiFormStep"
}%%FORMELEMENT{
   name="Name"
   type="text"
   focus="on"
   title="Your name:"
}%%ENDFORM%

Placeholder text

Click on the field...

%STARTFORM{ name="placeholderform" action="view" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%%FORMELEMENT{ name="Name" type="text" placeholder="Your name..." }%%ENDFORM%

Spellcheck

%STARTFORM{ name="spellckeckform" action="view" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%najnaj%ENDFORM%

onMouseOver, onMouseOut

Mouse over the field...

%STARTFORM{ name="mouseoverform" action="view" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%%FORMELEMENT{ name="Name" type="text" onMouseOver="makeYellow(this)" onMouseOut="makeWhite(this)" }%%ENDFORM%

onSelect, onBlur

Doubleclick on the text to select it...

%STARTFORM{ name="selectform" action="view" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%Doubleclick this text%ENDFORM%

onKeyUp

Change the text...

(in fact, onChange can be used as well, but that tends to react slower)

%STARTFORM{ name="changeform" action="view" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%Change this text%ENDFORM%

onClick

Click a checkbox...

%STARTFORM{ name="clickform" action="view" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%%FORMELEMENT{ name="OnClickCheckboxes" type="checkbox" options="mary, peter, annabel, nicky, jennifer" labels="Mary M, Peter P, Annabel A, Nicky N, Jennifer J" elementformat="$e
" onClick="clickFeedback(this)" }%%ENDFORM%

onSubmit

Give a warning before submitting the form...

%STARTFORM{ name="submitform" action="view" onSubmit="return notify(this)" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%%FORMELEMENT{ name="action" type="submit" buttonlabel="Submit" }%%ENDFORM%

onChange

Submit form automatically after changing the selection.

%STARTFORM{ name="grammar" action="view" validate="off" method="get" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" anchor="OnChange" }%%FORMELEMENT{ name="type" type="dropdown" options=", mary=Mary M, peter=Peter P, annabel=Annabel A, nicky=Nicky N, jennifer=Jennifer J" value="" onChange="this.form.submit()" }%%ENDFORM%

Validation

If the form is filled in correctly you will be redirected to FormPluginExamplesFeedback.

%STARTFORM{ name="validationTestForm" action="view" topic="Sandbox.FormPluginExamplesFeedback" anchor="FormValidation" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="Team" type="checkbox" title="Team members:" options="mary=Mary M, peter=Peter P, annabel=Annabel A, nicky=Nicky N, jennifer=Jennifer J" elementformat="$e
" mandatory="on" validate="required" hint="Select at least one person" }%Send%ENDFORM%

Substitution of field references

Reference field values as variables. In hidden field 'CarbonCopy' we are creating a combined entry of Name and Password fields:

%FORMELEMENT{
name="CarbonCopy"
type="hidden"
default="$Name earns $Salary"
}%

%STARTFORM{ name="substitutionform" action="view" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" anchor="CarbonCopy" topic="Sandbox.FormPluginExamplesFeedback" }%%FORMELEMENT{ name="Name" type="text" title="Your name:" mandatory="on" validate="required" }%%FORMELEMENT{ name="Salary" type="text" title="Your salary:" mandatory="on" validate="number" }%$Name earns $Salary%FORMELEMENT{ name="action" type="submit" buttonlabel="Submit" }%%ENDFORM%

Rest call

To test rest calls with FormPlugin, the rest method test is implemented. Use param show to retrieve a value.

In this example we are testing the value of field substituted, which has a substition of Topic parent is: $topicparent: the value of field topicparent is written to substituted.

%STARTFORM{ name="resttest" action="rest" restaction="FormPlugin/test" method="post" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%FormPluginExamplesTopic parent is: $topicparentsubstituted%FORMELEMENT{ name="action" type="submit" format="$e" buttonlabel="Test REST" }%%ENDFORM%

Real world examples

Create a new AUTOINC page

%STARTFORM{ name="CreatePage" action="save" topic="TestAUTOINC000000" method="post" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%FormPluginExamples%FORMELEMENT{ name="action" type="submit" format="$e" buttonlabel="Create" }%%ENDFORM%

Save topic text to another topic

%STARTFORM{ name="savenew" action="save" topic="Sandbox.FormPluginNewTestTopic" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ type="textarea" name="text" title="Topic text:" value="ABC" }%%FORMELEMENT{ type="hidden" name="topicparent" value="FormPluginExamples" }%%FORMELEMENT{ name="action" type="submit" buttonlabel="Save topic text" }%%ENDFORM%

Save field value to another topic

%STARTFORM{ name="savefield" action="save" topic="Sandbox.TopicTest" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ type="text" name="Title" title="Title:" value="ABC" }%%FORMELEMENT{ name="action" type="submit" buttonlabel="Save field value" }%%ENDFORM%

Upload

%STARTFORM{ name="uploadform" action="upload" topic="Sandbox.FormPluginExamples" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ type="upload" name="filepath" title="Attach new file" size="70" }%%FORMELEMENT{ name="filecomment" type="text" title="Comment" }%%FORMELEMENT{ name="hidefile" type="checkbox" options="on=Do not show attachment in table" }%%FORMELEMENT{ name="createlink" type="checkbox" options="on=Create a link to the attached file" }%%FORMELEMENT{ name="action" type="submit" buttonlabel="Upload file" }%%ENDFORM%

Working with other extensions

Working together with CommentPlugin: filling a table

This form uses System.CommentPlugin to write submitted values to a table. A user-friendly display of table data is not included in the example.

%STARTFORM{ name="new_article_prependtotable" action="save" topic="Sandbox.FormPluginExamples" anchor="NewArticles" validate="on" onsubmit="return (foswiki.Form.makeSafeForTableEntry) ? foswiki.Form.makeSafeForTableEntry(this) : true;" strictverification="off" }% %ENDFORM%

Article data

Title	Source name	Source url	Publishing date	Entry date

%TMPL:DEF{OUTPUT:new_article_prependtotable}%%POS:BEFORE%| %URLPARAM{"title"}% | %URLPARAM{"source"}% | %URLPARAM{"source_url"}% | %URLPARAM{"date"}% | %URLPARAM{"entry_date"}% |
%TMPL:END%

Working together with CommentPlugin to create HolidaylistPlugin entries

We want to create a form to enter holiday data: a 'from' date and a 'until' date. The default date format from HolidaylistPlugin is:

   * from_date - until_date - wikiusername

We want an easy entry form, but the data must not get corrupted. So:

• The 'From' field must be filled in
• The 'Until' field will not be displayed if not filled in, so no dash will be displayed
• Entering data is only possible if logged in, otherwise we would get WikiGuest entries

%TMPL:DEF{PROMPT:holiday_data}%
%STARTFORM{
   name="holiday_data"
   action="save"
   topic="%WEB%.%TOPIC%"
   anchor="NewData"
   formcssclass="foswikiFormSteps"
   elementcssclass="foswikiFormStep"
}%
%FORMELEMENT{
   name="comment_action"
   type="hidden"
   default="save"
}%%FORMELEMENT{
   name="comment_type"
   type="hidden"
   default="holiday_data"
}%%FORMELEMENT{
   name="comment_templatetopic"
   type="hidden"
   default="%WEB%.%TOPIC%"
}%%FORMELEMENT{
   name="From"
   type="date"
   dateformat="%Y/%m/%d"
   size="9"
   title="I am on holidays from:"
   disabled="%IF{"$WIKINAME='WikiGuest'" then="on"}%"
   validate="nonempty"
}%%FORMELEMENT{
   name="Until"
   type="date"
   dateformat="%Y/%m/%d"
   size="9"
   title="Until:"
   disabled="%IF{"$WIKINAME='WikiGuest'" then="on"}%"
}%%FORMELEMENT{
   name="comment_from_date"
   type="hidden"
   default="$From"
   condition="$From=nonempty"
}%%FORMELEMENT{
   name="comment_to_date"
   type="hidden"
   default=" - $Until"
   condition="$Until=nonempty"
}%%FORMELEMENT{
   type="submit"
   name="send"
   buttonlabel="Add my dates"
   disabled="%IF{"$WIKINAME='WikiGuest'" then="on"}%"
}% %IF{"$WIKINAME='WikiGuest'" then="<em>Log in to add your dates</em>"}%
%ENDFORM%
%TMPL:END%
%TMPL:DEF{OUTPUT:holiday_data}%   * %URLPARAM{"comment_from_date"}%%URLPARAM{"comment_to_date"}% - %WIKIUSERNAME%
%POS:AFTER%%TMPL:END%

Try it out:

%STARTFORM{ name="holiday_data" action="save" topic="Sandbox.FormPluginExamples" anchor="NewData" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }% saveholiday_dataSandbox.FormPluginExamples%FORMELEMENT{ name="From" type="date" dateformat="%Y/%m/%d" size="9" title="I am on holidays from:" disabled="on" validate="nonempty" }%%FORMELEMENT{ name="Until" type="date" dateformat="%Y/%m/%d" size="9" title="Until:" disabled="on" }%$From - $Until%FORMELEMENT{ type="submit" name="send" buttonlabel="Add my dates" disabled="on" }% Log in to add your dates %ENDFORM%

SendEmailPlugin form

E-mail form for SendEmailPlugin - form works if the plugin is installed and enabled.

%SENDEMAIL%

%STARTFORM{ name="mailForm" action="https://g-wiki.gsi.de/sendemail/Sandbox/FormPluginExamples" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="To" type="text" title="To:" validate="email" mandatory="on" hint="Enter an e-mail address" }%%FORMELEMENT{ name="Subject" type="text" title="Subject:" hint="(optional)" }%%FORMELEMENT{ name="body" type="textarea" title="Message:" rows="5" cols="80" hint="(optional)" }%Send%ENDFORM%

Accessing other sites: Flickr

This form lets you search for Flickr photos that have been tagged with a name.

Note: for this example to work, add http://www.flickr.com/ to {PermittedRedirectHostUrls} in configure.

%STARTFORM{ name="flickr" action="http://www.flickr.com/photos/tags/$SearchName/$Where" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%Gabrielaclusters/portrait%FORMELEMENT{ name="action" type="submit" buttonlabel="Show me pictures" }%%ENDFORM%