You are here: g-wiki>Sandbox Web>FormPluginExamples (2011-04-30, AdminUser)Edit Attach

Form Plugin Examples

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

Form elements

Format

%STARTFORM{ name="formatform" action="view" elementformat="

$m $t $h
$e

" 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

%STARTFORM{ name="focusform" action="view" }%%FORMELEMENT{ name="Name" type="text" focus="on" title="Enter your name:" }%%ENDFORM% Hide 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)

Change output will be written here...

%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" }%

Enter a new article

Attach a file first, then enter the data below.

%FORMELEMENT{ type="text" name="title" title="Title" hint="Link will have this label" validate="nonempty" mandatory="on" }% %FORMELEMENT{ type="text" name="source" title="Source name" }% %FORMELEMENT{ type="text" name="source_url" title="Source url" }% 2024-11-21 2024-11-21

%FORMELEMENT{ name="action" type="submit" buttonlabel="Save" }%

%ENDFORM%

Article data

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

Topic revision: r1 - 2011-04-30, AdminUser

Sandbox

Sandbox Web
Sandbox Web Home
Changes
Index
Search

Webs
- Main
- SWiki
- Sandbox

Create personal sidebar

Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding g-wiki Send feedback | Imprint | Privacy Policy (in German)