Form Plugin Examples

See System.FormPlugin

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

Form elements

Format

* Your name: Enter your wiki name

* Favorite team member: Select one person

Mary M Peter P Annabel A Nicky N Jennifer J

Multi-select items

Nice persons with custom titleformat:

Mary M Peter P Annabel A Nicky N Jennifer J

* Select one person

Not-so-nice persons with selected defaults:

Mary M Peter P Annabel A Nicky N Jennifer J

* Select at least one person

Multiselect is selectmulti:
Work Freetime Not important

Disabled

Your name:

Choose a name:

Mary M Peter P Annabel A Nicky N Jennifer J

Read-only

Your name:

Enter text:
some text...

Password

Enter a password:
*

Date

Publishing date

Getting form feedback

Retrieving values with URLPARAM

Your name:
*

Choose friends:

alex barbara cynthia

*

Submit form to view values:

• Name =
• Friends =

Formatting forms

Hints and mandatory indicators

Your name:
* Or just anything

Enter something else:
*

Format: example of items on one line

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

Your name:

Adding CSS styles

Setting:

formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"

Your name:

Custom CSS classes

Your name:

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

Spellcheck

onMouseOver, onMouseOut

Mouse over the field...

onSelect, onBlur

Doubleclick on the text to select it...

onKeyUp

Change the text...

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

onClick

Click a checkbox...

Mary M Peter P Annabel A Nicky N Jennifer J

onSubmit

Give a warning before submitting the form...

onChange

Submit form automatically after changing the selection.

Mary M Peter P Annabel A Nicky N Jennifer J

Validation

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

Your name:
* You cannot post anonymously

Team goal:
*

Team members:

Mary M Peter P Annabel A Nicky N Jennifer J

* Select at least one person

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

Your name:
*

Your salary:
*

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.

Real world examples

Create a new AUTOINC page

Save topic text to another topic

Topic text:
ABC

Save field value to another topic

Title:

Upload

Attach new file

Comment

Do not show attachment in table

Create a link to the attached file

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.

Enter a new article

Attach a file first, then enter the data below.

Title
* Link will have this label

Source name

Source url

Publishing date

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:

I am on holidays from:

Until:

Log in to add your dates

SendEmailPlugin form

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

%SENDEMAIL%

To:
* Enter an e-mail address

Subject:
(optional)

Message:
(optional)

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.

Search name on Flickr:
Enter a first name, such as Gabriela, Anna or Susanne

Show portraits