Smooth migration in 3 steps:
- Make a list of all required fields
- create Form Template
- Call Form Template
Optional steps
- Pre-Fill / Editing
- Advanced field types
1. Make a list of all required fields
First, you need to know what (form)fields you need in your FlexForm form. The easiest way to do this is by going to the source code of the Page Forms form. You can do this by navigating to /Form:NAME_OF_FORM. For example, if my form is named 'Person', I want to navigate to:
wikibase-solutions.com/Form:Person
On that page you see all the formfields including their names and types. The fields are recognised by {{{field|name|type}}}, e.g. {{{field|First name|input type=text}}}. Make a list of these field names and types, or keep this page open in a tab. Note: it is important to use the same names in your FlexForm form to make sure existing information is stored and picked up correctly.
2. Create Form Template
Now, we are going to create the FlexForm form on a template page*. Create a new template for the form, e.g. Template:PersonForm. On this page you create your form. It is recommended to open the FlexForm Documentation in another tab for detailed information on field types. Form actions will vary depending on the use of the form. An example of a simple form Template is shown below:
<form>
<_create mwwrite="P-" mwtemplate="Person" mwoption="next_available" mwfollow />
<input type="text" name="Name"/>
<input type="date" name="Date of Birth"/>
<input type="hidden" name="Role" value="Customer" />
<input type="submit" value="Save" />
</form>
Notice that, except for the <_create> element, everything is standard HTML5.
This form creates a page for a new person. This page will have a template with parameters Name, Date of Birth and Role. While Name and Date of Birth are filled in by the user, Role has type='hidden' so that the value is saved, but not filled in (or seen) by the user. In addition, we use the create attributes to pick the pagename to be the next available number. Various options and attributes for the create are found here. To see how your PageForm form creates a page, you need to find the info field which is probably located at the start or end of the PageForm form. It will look something like this:
page name=B-<unique number ;start=1>
Note that FlexForm forms don't have any styling by default. This means that a simple form will not look very nice by default, but adding some css styling classes to the form gives you all the freedom in styling the form to any and all your needs.
*While it is possible to create the FlexForm form directly on the page, adopting the practice of making a template facilitates its use across multiple pages, making it a recommended best practice.
3. Call Form Template
Lastly, we need to call the template on a page we want the form to be displayed. We do this in no other way than a normal template. Just add {{TEMPLATENAME}}, in my case {{PersonForm}}. Check if the FlexForm form works like expected and you're finished!
4. Pre-Fill and Editing (optional)
If you want to create a FlexForm form to edit a page, this step is for you. Let's say we want to edit a person we added with the form created in step 2. This can be easily done by modifying a few things in the form.
Modify the template call with parameters. We need to supply the form with information to pre-fill and information of which person to edit.
{{PersonForm
|Page={{FULLPAGENAME}}
|Name={{{Name|}}}
|Date of Birth={{{Date of Birth|}}}
|Role={{{Role|}}}
}}<form>
<_create mwwrite="{{{Page|}}}" mwtemplate="Person" mwfollow />
<input type="text" name="Name" value="{{{Name|}}}"/>
<input type="date" name="Date of Birth" value="{{{Date of Birth|}}}"/>
<input type="hidden" name="Role" value="{{{Role|Customer}}}" />
<input type="submit" value="Save" />
</form>
In the example above, we changed the create as well to edit the page of the person we are editing, but this removes the functionality of creating a new person. We can change this by using an if-statement as in the example below.
<form>
{{#if:{{{Page|}}}
|<_create mwwrite="{{{Page|}}}" mwtemplate="Person" mwfollow />
|<_create mwwrite="P-" mwtemplate="Person" mwoption="next_available" mwfollow />
}}
<input type="text" name="Name" value="{{{Name|}}}"/>
<input type="date" name="Date of Birth" value="{{{Date of Birth|}}}"/>
<input type="hidden" name="Role" value="{{{Role|Customer}}}" />
<input type="submit" value="Save" />
</form>
Notice that, we have used a default value for Role if it is empty. Therefore, new persons will have the role Customer.
Done! You can now add the template call with parameters to a person's page and then you are able to edit the person's information as well.
Using <_create> or <_edit>
Sometimes you do not need to change all values. You can use <_edit> to edit only parameters necessary. You can have multiple <_edit> tags in a form, all doing different tasks. However, if you have more than 5 edits to one single page in the wiki, consider create to speed-up the process. Documentation on create or edit tags can be found here.
5. Advanced Field Types (optional)
Some input types are pretty straightforward, e.g. Text, Textarea, Number, Date etc. Visit the FlexForm Documentation page for all information on other field types and how to use them. Explore the endless possibilities of FlexForm!
| 
