Editing CIForms examples

 
==Basic, one column==   
  
This is the smplest form (type "inputs" by default, one column)

The square brackets represent an input, the square brackets contain the input type, the asterisk indicates a mandatory field

<pre>
{{#CI form: title = Contact form
| type = inputs
| first and last name [] *
| email [email] *
| your message [textarea]  *
}}
</pre>

which produces the following


{{#CI form: title = Contact form
| type = inputs
| submission groups = sysop
| first and last name [] *
| email [email]  *
| your message [textarea]  *
}}



==Placeholders==

Form with placeholders. The square brackets contain the placeholder and optionally the input type after the equal symbol:

<pre>
{{#CI form: title = Contact form
| [first and last name] *
| [email=email] *
| [phone=tel]
| [your message=textarea]  *
}}
</pre>


which produces the following:
 

{{#CI form: title = Contact form
| [first and last name] *
| [email=email] *
| [phone=tel]
| [your message=textarea]  *
}}



==Two columns==

Inputs responsive (two columns), the square brackets contain the input type, the form rows can contain html (the label of the email input is bold)


<pre>
{{#CI form: title = Contact form
| type = inputs responsive
| submit = abc@test.com
| first name [] *
| last name [] *
| <b>email</b> [email] *
| phone [tel]
| your message [textarea]  *
}}
</pre>


{{#CI form: title = Contact form
| type = inputs responsive
| first name [] *
| last name [] *
| <b>email</b> [email] *
| phone [tel]
| your message [textarea]  *
}}
 


== Multiple choice ==

Multiple choice with arbitrary text inputs between answers (on the last line in the example)

<pre>
{{#CI form: title = Why are you applying to this job ?
| type = multiple choice 
| I send bulk applications, even if I will be selected I'm not sure to confirm
| I ran out of money, I have to find whatever job quickly
| I want to learn something new 
| The job fits my background and I'm very skilled, I look forward to join your team!
| Let me explain [] 
}}
</pre>


{{#CI form: title = Why are you applying to this job ?
| type = multiple choice
| I send bulk applications, even if I will be selected I'm not sure to confirm
| I ran out of money, I have to find whatever job quickly
| I want to learn something new 
| The job fits my background and I'm very skilled, I look forward to join your team!
| Let me explain [] 
}}




== Select ==

Select with placeholder and hardcoded options. An option contain a comma? Just escape it!

<pre>
{{#CI form: title = Select your preferred IT course
| type = inputs
| [Please chose one=select=PHP and Mysql, Node.js\, Vue.js\, React, Mediawiki and Gerrit ] *
}}
</pre>


{{#CI form: title = Select your preferred IT course
| type = inputs
| [Please chose one=select=PHP and Mysql, Node.js\, Vue.js\, React, Mediawiki and Gerrit ] *
}}




==Select with combobox==

Select populated by wikitext (if the select contains more than 20 options CIForms will automatically display it as a [https://select2.org/ select2] combobox)

<pre>
{{#CI form: title = Country and city
| type = inputs
| country [select={{#replace:{{Template:Countries}}|*|,}}] *
| city [] *
}}
</pre>


{{#CI form: title = Country and city
| type = inputs
| country [select={{#replace:{{Template:Countries}}|*|,}}] *
| city [] *
}}




==Nested sections==

Form with nested sections. The multiple choice accepts up to 3 answers ("max answers=3") The textarea has a maxlength attribute ("[textarea=1000]")

<pre>
{{#CI form: title = Job application
| submission groups = sysop
|
{{#CI form section: type = inputs 
| name [] *
| email [] *
}}
|
{{#CI form section: type = inputs
| title = What about your motivation ?
| type = multiple choice
| I send bulk application, even if I will be selected I'm not sure to confirm
| I ran out of money, I have to find whatever job quickly
| I want to learn something new 
| The job fits my background and I'm very skilled, I look forward to join your team!
| Let me explain [] 
}}

{{#CI form section: type = multiple choice
| title = If you will be selected (on the basis of the answer above), how will you undertake your work ? (up to 3 answers allowed)
| type = multiple choice
| max answers=3
| I will work scrupulously
| I will work meticulously
| I will pretend to work
| I will delegate all my work to my sister
| I will work seriously 
}}

{{#CI form section: type = inputs
|title = Please describe yourself
| [required=textarea=1000] *
}}

}}
</pre>


{{#CI form: title = Job application
| submission groups = sysop
|
{{#CI form section: type = inputs 
| name [] *
| email [] *
}}
|
{{#CI form section: type = inputs
| title = What about your motivation ?
| type = multiple choice
| I send bulk application, even if I will be selected I'm not sure to confirm
| I ran out of money, I have to find whatever job quickly
| I want to learn something new 
| The job fits my background and I'm very skilled, I look forward to join your team!
| Let me explain []   
}}

{{#CI form section: type = multiple choice
| title = If you will be selected (on the basis of the answer above), how will you undertake your work ? (up to 3 answers allowed)
| type = multiple choice
| max answers=3
| I will work scrupulously
| I will work meticulously
| I will pretend to work
| I will delegate all my work to my sister
| I will work seriously 
}}

{{#CI form section: type = inputs
|title = Please describe yourself
| [required=textarea=1000] *
}}


}}

== Steps & surveys ==    
 
Inspired by https://demo.limesurvey.org/index.php?r=survey/index&sid=14272

(css used [[Template:CIForms_examples/styles.css]] using the paramter <code>css-class</code>)
<templatestyles src="CIForms_examples/styles.css" />

{{#CI form: title = Survey example 
| email-to = abc@mail.com
| paging = 4
| css-class = form-limesurvey
|

{{#CI form section: type = inputs responsive
| first and last name [] *
| email [email]
| phone [tel]
}}

{{#CI form section: type = multiple choice  | list-type = none | max answers = 1
| title = 2. How much do you like CIForms ?
| 1
| 2
| 3
| 4
| 5
| No answer
}}


{{#CI form section: type = input | title = 3. What is your favorite pastime?
|[Please chose one=select=Reading,Programming,Navigating the web,All of the above,Other,No answer] *
| (if you selected "other") [text]
}}


{{#CI form section: type = multiple choice  | list-type = none | max answers = 1
| title = 4. What is your favorite color ?
| Red
| Orange
| Yellow
| Green
| Blue
| Indigo
| Violet
| Plaid
| Other []
| No answer
}}

{{#CI form section: type = multiple choice
| title = 5. Who is your favorite relative ?
| Father
| Mother
| Sister
| Brother
| Uncle
| Aunt
| Grandfather
| Grandmother
| No answer
}}

{{#CI form section: type = inputs | title = Why ?
| [textarea]
}}

{{#CI form section: type = inputs
| title = 6. How much do you like these foods ?
| Broccoli [Chose one=select=Hate,Dislike,Ambivalent,Like,Love,No answer]
| Ice Cream [Chose one=select=Hate,Dislike,Ambivalent,Like,Love,No answer]
| Chocolate [Chose one=select=Hate,Dislike,Ambivalent,Like,Love,No answer]
| Steak [Chose one=select=Hate,Dislike,Ambivalent,Like,Love,No answer]
| Escargot [Chose one=select=Hate,Dislike,Ambivalent,Like,Love,No answer]
}}

{{#CI form section: type = inputs
| title = 7. How much pain to you currently feel in the following locations?  1 = none, 10 = extreme
| Head [Chose one=select=1,2,3,5,6,7,8,9,10,No answer] * Torso [Chose one=select=1,2,3,5,6,7,8,9,10,No answer]
| Back [Chose one=select=1,2,3,5,6,7,8,9,10,No answer] Seat [Chose one=select=1,2,3,5,6,7,8,9,10,No answer]
| Hands [Chose one=select=1,2,3,5,6,7,8,9,10,No answer] Feet [Chose one=select=1,2,3,5,6,7,8,9,10,No answer]
}}


{{#CI form section: type = inputs
| title = 8. How much do you like the following?  (1 = not at all, 5 = extremely)
| Ballet [Chose one=select=1,2,3,5,No answer] Jazz [Chose one=select=1,2,3,5,No answer]
| Ballroom [Chose one=select=1,2,3,5,No answer] Tap [Chose one=select=1,2,3,5,No answer]
| Contemporary [Chose one=select=1,2,3,5,No answer] Hip Hop [Chose one=select=1,2,3,5,No answer]
}}

{{#CI form section: type = inputs
| title = 9. How should the following change?
| Funding for education [Chose one=select=Increase, Same, Decrease,No answer] Funding for security (e.g. police, jails, military)  [Chose one=select=Increase, Same, Decrease,No answer]
| Availability of high quality health care  [Chose one=select=Increase, Same, Decrease,No answer] 
| Compensation for teachers  [Chose one=select=Increase, Same, Decrease,No answer] Compensation for executives  [Chose one=select=Increase, Same, Decrease,No answer]
| Taxes on the rich  [Chose one=select=Increase, Same, Decrease,No answer] Taxes on you  [Chose one=select=Increase, Same, Decrease,No answer]
}}

{{#CI form section: type = inputs responsive
| title = 10. How long should it take to fix the following?
| All bugs in LimeSurvey 1.91+ [Chose one=select=1,2,3,4,5,6,7,8,9,10] [Chose one=select=days,weeks,years]
| All items on your To Do list [Chose one=select=1,2,3,4,5,6,7,8,9,10] [Chose one=select=days,weeks,years]
| All items on your 'honey-do' list [Chose one=select=1,2,3,4,5,6,7,8,9,10] [Chose one=select=days,weeks,years]
| The economy [Chose one=select=1,2,3,4,5,6,7,8,9,10] [Chose one=select=days,weeks,years]
}}


{{#CI form section: type = cloze test | list-type = none | title = 11. Who are your favorite characters in the following? |
<html><table id="table_test">
<tr><th></th><th>Favorite</th><th>Second most</th><th>Third most</th></tr>
<tr><td>Harry Potter</td><td>[]</td><td>[]</td><td>[]</td></tr>
<tr><td>Star Trek</td><td>[]</td><td>[]</td><td>[]</td></tr>
<tr><td>Star Wars</td><td>[]</td><td>[]</td><td>[]</td></tr>
</table></html>
}}

{{#CI form section: type = inputs responsive
| title = 12. Which of the following conditions have you had?
| cancer [Chose one=select=Yes,Uncertain,No,No answer]
| heart attack [Chose one=select=Yes,Uncertain,No,No answer]
| diabetes [Chose one=select=Yes,Uncertain,No,No answer]
| obesity [Chose one=select=Yes,Uncertain,No,No answer]
| depression [Chose one=select=Yes,Uncertain,No,No answer]
}}

{{#CI form section: type = inputs responsive
| title = 13. How tall are the following?
| Short [Chose one=select=House,Ferris Wheel (not including the London Eye),U.S. Capitol building,Washington Monument,Empire State Building]
| Medium [Chose one=select=House,Ferris Wheel (not including the London Eye),U.S. Capitol building,Washington Monument,Empire State Building]
| Tall [Chose one=select=House,Ferris Wheel (not including the London Eye),U.S. Capitol building,Washington Monument,Empire State Building]
| No answer [Chose one=select=House,Ferris Wheel (not including the London Eye),U.S. Capitol building,Washington Monument,Empire State Building]
}}

{{#CI form section: type = inputs responsive
| title = 14. For each of these issues, how severe and bothersome are they?
| Financial woes [Chose one=select=Mild Severity,Moderate Severity,Extreme Severity,Mild Bothersomeness,Moderate Bothersomeness,Extreme Bothersomeness,No answer]
| Health concerns [Chose one=select=Mild Severity,Moderate Severity,Extreme Severity,Mild Bothersomeness,Moderate Bothersomeness,Extreme Bothersomeness,No answer]
| Ability to get your doctors to listen [Chose one=select=Mild Severity,Moderate Severity,Extreme Severity,Mild Bothersomeness,Moderate Bothersomeness,Extreme Bothersomeness,No answer]
}}

{{#CI form section: type = inputs
| title = 15. When was your most recent birthday?
| [date]
}}

{{#CI form section: type = inputs
| title = 16. Please upload a picture (<b>not supported</b>)
}}

{{#CI form section: type = multiple choice
| title = 17. What gender are you?
| female {{#fas:venus}} 
| male {{#fas:mars}} 
| no answer {{#fas:genderless}}
}}


{{#CI form section: type = inputs responsive
| title = 18. Pick a new language
| [Choose your language=select={{#replace:{{Template:Languages}}|*|,}}]
}}

{{#CI form section: type = inputs responsive
| title = 19. How old are the following people (or how old were they when they died)?
| Yourself [number]
| Your mother [number]
| Your father [number]
}}

{{#CI form section: type = inputs responsive
| title = 20. How old are you?
| [number]
}}

{{#CI form section: type = cloze test | css-class= ciform-favorite-activities
| title = 21. Please rate your  favorite activities:
| [] Sleeping
| [] Programming
| [] Watching television
| [] Time with family
}}

{{#CI form section: type = inputs
| title = 22. This is just a text display.  Is the rendered value saved anywhere?  Is there a database field for it (e.g. to emulate the Equation question type)?
}}

{{#CI form section: type = multiple choice
| title = 23. Do you love CIForms ?
| yes {{#fas:check}} 
| no {{#fas:ban}} 
| no answer {{#far:circle}}
}}

{{#CI form section: type = inputs
| title = 24. Please paste your resume
| [textarea]
}}

{{#CI form section: type = inputs
| title = 25. (let's skip this)
}}

{{#CI form section: type = cloze test  | list-type = none
| title = 26. What are the names of your best friends?
| Favorite Friend []
| Favorite Family Member []
| Favorite Co-Worker []
}}

{{#CI form section: type = inputs
| title = 27. What is your favorite food ?
| []
}}

{{#CI form section: type = multiple choice
| title = 28. Where would you like to vacation this year?
| Hawaii
| Bahamas
| Europe
| New Zealand
}}

{{#CI form section: type = multiple choice | max answers = 3
| title = 29. Which of the following  do you like?   Please comment why or why not for each.
| Junk Food []
| Reality TV []
| Excercise []
}}


}}

==Cloze test==

Cloze tests are mainly used to administer quizzes and tests.

Square brackets represent an input, a square bracket with text inside represents a suggestion. The asterisk represents an example sentence. Each row can contain an arbitrary number of inputs.

<pre>
{{#CI form: type = cloze test 
| title = Put the verbs between parentheses in the proper tense
| * I (to be) [have been] proud to win the match
| I (to do) [] a wonderful work
| I (to drink) [] too much at the last party
| I (to eat) [] 3 pizzas and 4 portions of french fries, and now I don't perform really well in intimate situations
| (to make) We are such stuff as dreams are [] on; and our little life ...
}}
</pre>

{{#CI form: type = cloze test 
| title = Put the verbs between parentheses in the proper tense
| * I (to be) [have been] proud to win the match
| I (to do) [] a wonderful work
| I (to drink) [] too much at the last party
| I (to eat) [] 3 pizzas and 4 portions of french fries, and now I don't perform really well in intimate situations
| (to make) We are such stuff as dreams are [] on; and our little life ...
}}

==Cloze test with suggestions==

The list of suggestions is automatically shuffled and the suggestion is automatically canceled from the list. (line-through)

<pre>
{{#CI form: type = cloze test 
| title = Put the right word in each sentence
| suggestions = pencils, cats, dogs, car, house, pizzas
| * There are three [pencils] on my table
| My [] is pretty fast
| My [] barks a lot but welcomes thieves equipped with sausages
| I love [] because they say "meeeooow"
| I'm able to eat 4 [] at any time
| My [] has 3 swimming pools and a bowling lane, are you envious ?
}}
</pre>

{{#CI form: type = cloze test 
| title = Put the right word in each sentence
| suggestions = pencils, cats, dogs, car, house, pizzas
| * There are three [pencils] on my table
| My [] is pretty fast
| My [] barks a lot but welcomes thieves equipped with sausages
| I love [] because they say "meeeooow"
| I'm able to eat 4 [] at any time
| My [] has 3 swimming pools and a bowling lane, are you envious ?
}}



==Cloze test with transformed suggestions==

In some cases the answer has to be "transformed" with regard of the list of suggestions. In this case the relationship is expressed with the equal symbol within square brackets.

<pre>
{{#CI form: type = cloze test 
| title = Chose the right verb for each sentence and put it in the proper tense
| suggestions = to be, to win, to do, to drink, to make
| list-type = letters
| * I [to be=have been] proud to win the match
| I [] a wonderful work
| I [] too much at the last party
| I [] 3 pizzas and 4 portions of french fries, and now I don't perform really well in intimate situations
| We are such stuff as dreams are [] on; and our little life ...
}}
</pre>

{{#CI form: type = cloze test 
| title = Chose the right verb for each sentence and put it in the proper tense
| suggestions = to be, to win, to do, to drink, to make
| list-type = letters
| * I [to be=have been] proud to win the match
| I [] a wonderful work
| I [] too much at the last party
| I [] 3 pizzas and 4 portions of french fries, and now I don't perform really well in intimate situations
| We are such stuff as dreams are [] on; and our little life ...
}}

==Cloze tests with html ==

The following is a quiz adapted from [https://en.wikiversity.org/wiki/Help:Quiz-Simple this page]

<pre>
{{#CI form: title = Complete the text from the Wikipedia article on [https://en.wikipedia.org/wiki/Aristotle Aristotle]
| type = cloze test
| list-type = none
| suggestions =  Athens, Nicomachus, eighteen, 347, Stageira, Phaestis, Plato
| <b>Early Years</b> <br> Aristotle was born in [Stageira] in Chalcidice. His parents were []  and [], who became physician to King Amyntas of Macedon. <br> Aristotle was educated as a member of the aristocracy. At about the age of [], he went to [] to continue his education at []'s Academy for nearly twenty years, not leaving until after 
Plato's death in [] BC. 
}}
</pre>


{{#CI form: title = Complete the text from the Wikipedia article on [https://en.wikipedia.org/wiki/Aristotle Aristotle]
| type = cloze test | list-type = none
| suggestions =  Athens, Nicomachus, eighteen, 347, Stageira, Phaestis, Plato
| <b>Early Years</b> <br> Aristotle was born in [Stageira] in Chalcidice. His parents were []  and [], who became physician to King Amyntas of Macedon. <br> Aristotle was educated as a member of the aristocracy. At about the age of [], he went to [] to continue his education at []'s Academy for nearly twenty years, not leaving until after 
Plato's death in [] BC. 
}}