Form Plugin Examples

See TWiki.FormPlugin

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

Form elements

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

Password

Enter a password:
*

Date

Publishing date

Getting form feedback

Retrieving values with URLPARAM

Your name:
*

Choose option:

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%

Default text before click

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

Estimated team earnings:
* You may use a decimal number

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

Save topic text to another topic

Topic text:
twikiInputField

Upload

Attach new file

Comment

Do not show attachment in table

Create a link to the attached file

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}%
<div class="foswikiFormSteps">
<div class="foswikiFormStep">
%STARTFORM{
name="holiday_data"
action="save"
topic="%WEB%.%TOPIC%"
anchor="NewData"
}%
<input type="hidden" name="comment_action" value="save" />
<input type="hidden" name="comment_type" value="holiday_data" />
<input type="hidden" name="comment_templatetopic" value="%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{
name="action"
type="submit"
buttonlabel="Add my dates"
disabled="%IF{"$WIKINAME='WikiGuest'" then="on"}%"
}% %IF{"$WIKINAME='WikiGuest'" then="<em>Log in to add your dates</em>"}%
%ENDFORM%
</div>
</div>
%TMPL:END%
%TMPL:DEF{OUTPUT:holiday_data}%   * %URLPARAM{"comment_from_date"}%%URLPARAM{"comment_to_date"}% - %WIKIUSERNAME%
%POS:AFTER%%TMPL:END%

Try it out:

• 2010/05/19 - AdminUser

Working together with CommentPlugin: filling a table

This form uses TWiki.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

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

SendEmailPlugin form

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

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 Sander, Johan or Annemieke

In the Netherlands

Shows pictures from the Netherlands only if these are geo-tagged