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"
}%%FORMELEMENT{
   name="Name"
   type="text"
   focus="on"
   title="Your name:"
}%%ENDFORM%

Placeholder text

Click on the field...

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

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

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

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