Extension:FlexForm

This extension is maintained by a member of the MediaWiki Stakeholders' Group .

MediaWiki extensions manual

FlexForm Release status: stable
Implementation	Parser extension
Description	HTML5 FORM rendering engine
Author(s)	Sen-Saitalk (Wikibase Solutions) and others
Latest version	2.2.14 (05-04-2024)
Compatibility policy	For every MediaWiki release that is a Long Term Support release there is a corresponding branch in the extension.
MediaWiki	1.35.+;1.39+
Database changes	Yes
Composer	open-csp/flex-form
License	GNU General Public License 2.0 or later
Download	GitHub: project page git repository URL [help ] commit history Note: No localisation updates are provided by translatewiki.net . Readme ChangeLog
Parameters $wgFlexFormConfig
Tags form, input, _email, _create, _edit, select, option, fieldset, legend, label, button, textarea, _instance, _createuser, _token
Hooks used ParserFirstCallInit AfterFinalPageOutput AdminLinks getUserPermissionsErrors SkinTemplateNavigation
Hooks provided FFAfterFormHandling

FlexForm empowers MediaWiki with advanced HTML5 Form rendering for efficient data management.

Some features:

• Powerful Versatility: FlexForm transcends traditional form creation by offering the capability to create, edit, send emails, upload files, and perform a combination of these actions within a single form to one or more pages. This versatility streamlines complex data management workflows.
• Multiple Instances: allows for the dynamic creation and organization of multiple instances of data within a single form. This feature is particularly valuable for scenarios where users need to add or remove data sets on the fly, optimizing data collection efficiency.
• Show on Select: create intelligent forms that respond dynamically to user input. Through this feature, form elements can be conditionally shown or hidden based on user selections, checkbox states, or radio button choices, enhancing user interactivity and customization.
• Convert Word to Wiki: FlexForm seamlessly integrates with Pandoc to enable the conversion of uploaded DOCX files into MediaWiki pages. This capability streamlines the integration of Word documents (including images from the Word Docucent) into your wiki, extending its document management capabilities—a critical aspect of data management.
• Calculations Fields: empower developers to incorporate real-time calculations within forms using number input fields. Complex data manipulation becomes achievable with this dynamic feature—vital for precision data handling.
• Template Evaluating Fields: Enhance form flexibility with the ability to populate field values dynamically based on executed templates. This feature enables intricate data presentation and processing within forms—a key element in managing data effectively.
• Autosave: Choose between interval-based, change-based, or combined autosaving modes to minimize data loss risks. Managing data input is streamlined with safeguards in place.
• JSON Content Support: FlexForm simplifies the management of structured data by enabling the creation and editing of JSON content directly within forms. Structured data management is crucial for accurate data representation and retrieval.
• Multi-Content Revisions Slots: FlexForm provides robust support for multi-content revisions slot—a fundamental requirement for comprehensive data management.
• Seamless Integration: integrates with the Chameleon skin, Bootstrap, or custom JavaScript/CSS, enabling the rendering of forms in pop-ups, tabs, or collapsible elements. This integration enhances the user experience by combining information display and editing seamlessly—crucial for efficient data handling.
• And many more features. Take a look a the full FlexForm documentation on the Open CSP website

Managing Data Input Through Forms: A Critical Component

Efficient data management hinges on robust data input mechanisms, and forms are at the forefront of this. FlexForm recognizes the pivotal role forms play in maintaining data integrity, ensuring accurate data representation, and enhancing user interactions within your MediaWiki.

Version 1 was a complete rewrite and stripped down version from the previous extension called WSForm.

The full Documentation can be found here : https://www.open-csp.org/DevOps:Doc/FlexForm

Installation

The recommended way to download this extension is by using Composer

Add the following to the MediaWiki composer.local.json file and run php composer.phar update open-csp/flex-form from the MediaWiki installation directory.

{
	"require": {
		"open-csp/flex-form": "^2.0"
	}
}

To update the extension, just run php composer.phar update open-csp/flex-form again.

If you want to install a branch, like the latest version for the MediaWiki 1.39 supported version of FlexForm, you add the following to composer :

{
	"require": {
		"open-csp/flex-form": "dev-REL1_39"
	}
}

• Download from GitHub and place the file(s) in a directory called FlexForm in your extensions/ folder.
• Only when installing from Git, run Composer to install PHP dependencies, by issuing composer install --no-dev in the extension directory. (See task T173141 for potential complications.)
• Add the following code at the bottom of your LocalSettings.php file:

  wfLoadExtension( 'FlexForm' );
  

• Run the update script which will automatically create the necessary database tables that this extension needs.
•  Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Configuration parameters

Detailed information can be found here : https://www.open-csp.org/DevOps:Doc/FlexForm

// Will render form that makes no sense when inspected in the browser.
$wgFlexFormConfig['secure'] = true;

// A salt key for encryption. Used together with "secure" option. Must be set when using multiple instances of a wiki.
$wgFlexFormConfig['sec_key'] = "";

// Interval time in ms, defaults to 3 minutes (180000 ms). Form is submitted on each interval regardless of changes.
$wgFlexFormConfig['auto_save_interval'] = 30000;

// Time in ms, defaults to 3 seconds (3000 ms). Form is submitted after the specified time, timer starts when there is a change in the form. Timer resets if there is another change before the time has passed.
$wgFlexFormConfig['auto_save_after_change'] = 3000;

// Text on the autosave button to toggle on.
$wgFlexFormConfig['auto_save_btn_on'] = 'Autosave on';

// Text on the autosave button to toggle off.
$wgFlexFormConfig['auto_save_btn_off'] = 'Autosave off';

// Currently the only form.
$wgFlexFormConfig['FlexFormDefaultTheme'] = "plain";

// reCaptcha site key.
$wgFlexFormConfig['rc_site_key'] = "";

// reCaptcha secret key.
$wgFlexFormConfig['rc_secret_key'] = "";

// Where to store images temporarily that need to be format converted.
$wgFlexFormConfig['file_temp_path'] = "";

// Defaults to false. Set to yes if FlexForm is allowed to create new users.
$wgFlexFormConfig['can_create_user'] = "";

// Defaults to false. Will filter all parser arguments to plain text, except value parameters. Will also disallow onClick and onFocus parameter. This feature will most likely be removed in future updates.
$wgFlexFormConfig['filter_input_tags'] = false;

// Defaults to what is described by the loadscript form argument. When you change it do a different folder, then loadScript argument will be looking in this folder for its JavaScript file to load with the Form.
$wgFlexFormConfig['loadScriptPath'] = "";

// Defaults to sysop. Only a user in the allowedGroups is able to edit pages with a FlexForm in the source.
$wgFlexFormConfig['allowedGroups'] = ["sysop","moderator"];

// Defaults to true. When a user in the allowedGroups creates a form it will become valid and will be rendered. Someone not in the allowedGroups can create a form and save it, but it will never be rendered until a user from the allowedGroups will edit and re-save the page. Only then will a form become valid. The message "FORM CANNOT BE RENDERED, NOT VALIDATED" will be shown instead of the form when it is invalid or depending on the next setting an image stating it cannot be rendered.
$wgFlexFormConfig['renderonlyapprovedforms'] = true;

// When a form is invalid, an invalid image will be rendered instead of the form. Set to true to render i18n invalid message.
$wgFlexFormConfig['renderi18nErrorInsteadofImageForApprovedForms'] = false;

// Defaults to false. This differs from FlexForm before 2.0. FlexForm will now honor the UserCan functions in MediaWiki. If a form edits or creates a page a user has no rights to, the form will fail.
$wgFlexFormConfig['userscaneditallpages'] = false;

// Defaults to true. If a user is not in the allowedGroups then hide edit and editsource menu items for any page containing a FlexForm form.
$wgFlexFormConfig['hideEdit'] = true;

// Defaults to false. Will turn titles given to wscreate into url friendly slugs. Creating only latin character and converting spaces and special characters.
$wgFlexFormConfig['create-seo-titles'] = true;

// If you have a custom/different version of Pandoc than the one set by your hosting provider, you can add its local path here and FlexForm will use it, instead of the one set by environment variables
$wgFlexFormConfig['pandoc-install-path'] = $IP . '/bin/pandoc';

// FlexForm will by default always do an extra null edit on a save or an edit. This is mainly due to SMW. Not always this is necessary, so with this option you can turn it off. ( resulting in less handling time )
$wgFlexFormConfig['forceNullEdit'] = true; // Default to true for backwards compatibility

// When sending email, should we use separate smtp?
$wgFlexFormConfig['use_smtp'] = false;

$wgFlexFormConfig['smtp_host'] = "";

$wgFlexFormConfig['smtp_authentication'] = true;

$wgFlexFormConfig['smtp_username'] = "";

$wgFlexFormConfig['smtp_password'] = "";

$wgFlexFormConfig['smtp_secure'] = "TLS";

$wgFlexFormConfig['smtp_port'] = "587";

Using the parser functions

When you are familiar with creating HTML5 forms you will have no problem using FlexForm. The documentation however is pretty extensive so we have it on a separate Wiki instalment. Documentation can be found here : https://www.open-csp.org/DevOps:Doc/FlexForm

Migrate from version 1.x to 2.0

• Please notice the changes in the config settings.
• Do not forget to run update.php.
• Also, by default, the setting renderonlyapprovedforms will be true. Meaning that once you install FlexForm v2.0 all your existing FlexForm forms in your wiki will be shown as unvalidated. Visit Validated Forms to read how to solve this easily.

Discord

Ask any question at the FlexForm Discord server : https://discord.gg/ehFrPmT

See also

• PageForms - lets users define forms for creating and editing pages
• VisualData - lets users define forms for editing page data (stored within slots, using JSON and JSON Schema); also allows for querying and displaying this data
• Forms - allows the formatting of a wiki page or a dialog window as a form for creating and editing pages, and sending emails