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:
* Favorite team member:

Multi-select items

Nice persons with custom titleformat:
*
Not-so-nice persons with selected defaults:
*
Multiselect is selectmulti:

Disabled

Your name:
Choose a name:

Read-only

Your name:
Enter text:

Password

Enter a password:
*

Date

Publishing date

Getting form feedback

Retrieving values with URLPARAM

Your name:
*
Choose friends:
*

Submit form to view values:
  • Name =
  • Friends =

Formatting forms

Hints and mandatory indicators

Your name:
*
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)

Change output will be written here...

onClick

Click a checkbox...

onSubmit

Give a warning before submitting the form...

onChange

Submit form automatically after changing the selection.

Validation

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

Your name:
*
Team goal:
*
Team members:
*

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:

Save field value to another topic

Title:

Upload

Attach new file
Comment

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
*
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:
*
Subject:
Message:

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:
Topic revision: r1 - 2012-04-18, UnknownUser
This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding CMS Wiki? Send feedback