Buy PHP Form Builder

jQuery plugins

Overview

The addPlugin Function

$form->addPlugin($plugin_name, $selector, [$js_config = 'default', $js_replacements = ''])
    /**
* Adds a javascript plugin to the selected field(s)
* @param string $plugin_name The name of the plugin,
*                            must be the name of the xml file
*                            in plugins-config dir
*                            without extension.
*                            Example: colorpicker
* @param string $selector The jQuery style selector.
*                         Examples: #colorpicker
*                                    .colorpicker
* @param string $js_config (Optional) The xml node where your plugin code is
*                                      in plugins-config/[your-plugin.xml] file
* @param array $js_replacements (Optional) An associative array containing
*                                          the strings to search as keys
*                                          and replacement values as data.
*                                          Strings will be replaced with data
*                                          in <js_code> xml node of your
*                                          plugins-config/[your-plugin.xml] file.
*/

Activating a plugin

Adding plugins with PHP Form Builder is deadly fast and straightforward:

  1. 1 Create your field. ie: $form->addInput('text', 'my-date', '', 'Pickup a date');
  2. 2 Add the plugin. ie: $form->addPlugin('pickadate', '#my-date');
  3. 3 Call $form->printIncludes('css'); in your <head> section
  4. 4 Call $form->printIncludes('js'); then $form->printJsCode(); just before </body>

This will add the pickadate plugin to the input named my-date.
The plugin will use its default configuration stored in phpformbuilder/plugins-config/pickadate.xml

printIncludes('css'), printIncludes('js') and printJsCode() must be called only once,
even if your form uses several plugins.

You can easily:

Plugin files & configuration

Plugins

The plugin files are located in phpformbuilder/phpformbuilder/plugins/

Plugins configuration (XML configuration files)

The plugins XML configuration files are located in phpformbuilder/phpformbuilder/plugins-config/

CSS & JS dependencies

Each plugin has its own dependencies in its folder inside phpformbuilder/phpformbuilder/plugins/

PHP Form Builder generates a single compiled and minified CSS file for each form which includes all the plugins css used by the form.

The plugins JS dependencies are compiled the same way.

These compiled files are located in phpformbuilder/plugins/min/css and phpformbuilder/plugins/min/js folders.

Optimization (CSS & JS dependencies)

Function: 

$form->setMode($mode);

Arguments:

$mode [String]
'development' or 'production'
The default mode is 'production' until you change it with the setMode($mode) function.

The development mode

When your form is in 'development' mode:

  • $form->printIncludes('css'); will add each plugin CSS dependencies to your page
  • $form->printIncludes('js'); will add each plugin Javascript dependencies to your page

The 'development' mode is useful to inspect or debug your code, but you'll have many CSS & Javascript files to load, depending on the number of plugins that your form uses.

The production mode

When your form is in production mode:

When you call $form->printIncludes('css'); or $form->printIncludes('js');, all plugins assets (plugin's CSS and Javascript dependencies) are compressed and minified for fast loading in a single js|css file in phpformbuilder/plugins/min/[css|js]/[framework-][form-name].min.[css|js].

Your form will load a single CSS file and a single Javascript file instead of a file for each plugin, which greatly improves performance.

Your phpformbuilder/plugins/min/[css|js]/ dir has to be writable (chmod 0755+)

Optimization with LoadJs

Function: 

$form->useLoadJs($bundle = '');

Arguments:

$bundle [String]
Optional bundle name to wait for before triggering the domReady events

About LoadJs library

LoadJs is a tiny async loader / dependency manager for modern browsers (789 bytes)

Used with PHP Form Builder it allows to load the plugins CSS & JS dependencies asynchronously without blocking your page rendering.

Wen you enable LoadJs, $form->printJsCode(); will load all the CSS & JS dependencies.

  • Don't call $form->printIncludes('css');: the CSS files will be loaded with LoadJs
  • Don't call $form->printIncludes('js'); except if your form uses Recaptcha or Invisible Recaptcha

Example

<?php
$form = new Form('my-form', 'horizontal');

$form->useLoadJs();

$form->addInput('text', 'my-color', '', 'Pick a color:');
$form->addPlugin('colorpicker', '#my-color');
$form->addBtn('submit', 'submit-btn', 1, 'Submit', 'class=btn btn-success ladda-button, data-style=zoom-in');
$form->render();
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/loadjs/3.5.5/loadjs.min.js"></script>

<!-- The following line will load the plugins CSS & JS dependencies -->

<?php $form->printJsCode(); ?>

Example 2: wait for your bundle before triggering the domReady events

<?php
$form = new Form('my-form', 'horizontal');

$form->useLoadJs('core');

$form->addInput('text', 'my-color', '', 'Pick a color:');
$form->addPlugin('colorpicker', '#my-color');
$form->addBtn('submit', 'submit-btn', 1, 'Submit', 'class=btn btn-success ladda-button, data-style=zoom-in');
$form->render();
?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/loadjs/3.5.5/loadjs.min.js"></script>

<script>
// loading jQuery with loadJs (core bundle)
loadjs(['assets/javascripts/jquery-3.3.1.min.js'], 'core');

// Core's loaded - do any stuff
loadjs.ready('core', function() {
   // ...
});
</script>

<!-- load the form CSS & JS dependencies
Trigger domready when the core bundle and the form JS dependencies are loaded -->
<?php $form->printJsCode('core'); ?>

Customizing plugins

Each plugin has it's own XML configuration file in plugins-config directory.

The XML structure is always the same: 

<root>
    <default>
        <includes>
            <css>
                <file>../../phpformbuilder/plugins/[plugin dir]/[plugin].css</file>
            </css>
            <js>
                <file>../../phpformbuilder/plugins/[plugin dir]/[plugin].js</file>
            </js>
        </includes>
        <js_code>
            <![CDATA[
                $("%selector%").[function]();
            ]]>
        </js_code>
    </default>
</root>
  • The addPlugin function has 4 arguments: $plugin_name, $selector, $js_config and $js_replacements
  • $js_config indicates the XML node you targets. Default value: default.
  • $selector will replace "%selector%" in XML.

To customize your plugin:

To preserve plugins-config folder intact the best way is to duplicate the plugin's xml file into plugins-config-custom folder.
This way you'll be able to update PHP Form Builder's package without overwriting your personal config.

Form will always look for a custom xml file in plugins-config-custom folder, and load the default one in plugins-config if custom doesn't exist.

You can use both default & custom config in the same form. No need to duplicate default xml nodes in your custom xml file.

  1. 1 Copy the <default> node structure and give it a name
    (for example, replace '<default>' with '<custom>')
  2. 2 if the <includes> node has no need to be modified, delete it from your structure:
    default's include node will be used instead.
  3. 3 Enter your js code in <js_code> node
  4. 4 If you need others replacements than %selector% in your js code, use custom markup like %my-value% in XML, than define them in $js_replacements when you call addPlugin..

Customizing plugin example

$js_replacements = array('%my-value%' => 'replacement-text');
$form->addPlugin('captcha', '$captcha', 'custom', $js_replacements);

Adding your own plugins

You can easily add any jQuery plugin to PHP Form Builder. Here's how to process:

  1. 1 Upload your plugin in plugin dir.
  2. 2 Create an XML file with the name of your plugin in plugins-config-custom dir,
    using the tree described in Customizing Plugins section
  3. 3 Call your plugin with addPlugin function

Credits (plugins list)

PHP Form Builder includes the folowing jQuery plugins:

Thanks to all the authors for their great work

jQuery Plugins Usage & Code examples

Autocomplete - https://jqueryui.com/autocomplete/

Function: 

$form->addPlugin('autocomplete', '#selector', 'default', $complete_list);

Arguments:

'autocomplete' [String]
the plugin name
'#selector' [String]
the jQuery selector which defines the fields on which the plugin will be activated
'default' [String]
'default' configuration will use the following $complete_list to autocomplete.
$complete_list [Array]
$complete_list is an associative array with '%availableTags%' as single key, and terms for completion as value (see code below).

Loading all the page plugins ...

Just wait a few seconds ...

Autocomplete with ajax call

Function: 

$form->addPlugin('autocomplete', '#selector', $config, $replacements);

Arguments:

'autocomplete' [String]
the plugin name
'#selector' [String]
the jQuery selector which defines the fields on which the plugin will be activated
$config [String]
'remote' configuration will call a file using ajax to autocomplete.
'remote-tags' configuration will call a file using ajax to autocomplete and will fill the input with sortable tags.
$replacements [Array]
An associative array with:
'%remote%'
[url of your ajax file]
'%minLength%'
minimum number of characters filled to call ajax autocomplete

Options:

Options are available for the 'remote-tags' config only.
Pass options with data attributes. Example:

$form->addInput('text', 'my-search-input', '', 'First name:', 'data-maxTags=3, data-placeholder=Search here ...');

Data-attribute list is available at https://goodies.pixabay.com/jquery/tag-editor/demo.html

Loading all the page plugins ...

Just wait a few seconds ...

Bootstrap Select - http://silviomoreto.github.io/bootstrap-select/

Function: 

$form->addSelect($select_name, $label, 'class=selectpicker show-tick');

To activate the Bootstrap select plugin, add the selectpicker class to the select element.
there is no need to use the "addPlugin" function.

Arguments:

$select_name [String]
The select field name
$label [String]
The select field label
$attr [String]
the select field attributes documentation

Options:

Pass options with data attributes. Example:

$form->addSelect('select-name', 'Label', 'class=selectpicker, data-icon-base=glyphicon');

Data-attribute list is available at https://developer.snapappointments.com/bootstrap-select/options/#bootstrap-version

Loading all the page plugins ...

Just wait a few seconds ...

Captcha - http://keith-wood.name/realPerson.html

Function: 

$form->addPlugin('captcha', '#selector');

Arguments:

'captcha' [String]
the plugin name
'#selector' [String]
the jQuery selector which defines the fields on which the plugin will be activated

Loading all the page plugins ...

Just wait a few seconds ...

Colorpicker - https://github.com/josedvq/colpick-jQuery-Color-Picker

Function: 

$form->addPlugin('colorpicker', '#selector', 'default');

Arguments:

'colorpicker' [String]
the plugin name
'#selector' [String]
the jQuery selector which defines the fields on which the plugin will be activated
'default' [String]
the plugin configuration node in phpformbuilder/plugins-config/colorpicker.xml - see Available configurations below

Available configurations:

'default' | null
default colorpicker
'colored-input'
The color is rendered inside the input field
'dark-sheme'
Custom dark colors

You can add your own configurations in phpformbuilder/plugins-config/colorpicker.xml

Loading all the page plugins ...

Just wait a few seconds ...

Dependent Fields

Function: 

$form->startDependentFields($parent_field, $show_values[, $inverse = false]);
// add the dependent fields here
$form->endDependentFields();

Arguments:

$parent_field [String]
The name of the field which will trigger show/hide on dependent fields
$show_values [String]
The value(s) (single value or comma separated values) that will show the dependent fields if one is selected
$inverse [optional] [Boolean]
if true, dependent fields will be shown if any other value than $show_values is selected.
default: false

The dependent fields block is hidden and will be shown if $parent_field changes to one of $show_values.

Don't forget to call endDependentFields to end your Dependent Fields block.

Each Dependent fields block can include one or several dependent fields blocks.

Dependent fields MUST NOT START with the same fieldname as their parent field.

Loading all the page plugins ...

Just wait a few seconds ...

FileUploader - https://innostudio.de/fileuploader/

Function: 

$form->addFileUpload($type, $name, $value, $label, $attr, $fileUpload_config, $current_file);

Arguments:

$type [String]
The field type
Usually: file
$name [String]
The field name
$value[String]
The field value
$label [String]
The field label
$attr [String]
The field attributesdocumentation
$fileUpload_config[optional] [Array]
the plugin configuration node in phpformbuilder/plugins-config/fileuploader.xml
See Ready-to-use configurations below
$current_file [Array]
File data if the uploader has to be loaded with an existing file.
Useful for update purpose.
Example of use here: templates/bootstrap-4-forms/fileupload-test-form.php

Ready-to-use configurations

File Uploader is supplied with several ready xml configs:

'default'
uploader: phpformbuilder/plugins/fileuploader/default/php/ajax_upload_file.php
'image-upload'
uploader: phpformbuilder/plugins/fileuploader/drag-and-drop/ajax_upload_file.php
'drag-and-drop'
uploader: phpformbuilder/plugins/fileuploader/image-upload/php/ajax_upload_file.php

$fileUpload_config - default configuration

$default_config = array(
    'xml'           => 'default',
    'uploader'      => 'ajax_upload_file.php',
    'upload_dir'    => '../../../../../file-uploads/',
    'limit'         => 1,
    'extensions'    => ['jpg', 'jpeg', 'png', 'gif'],
    'file_max_size' => 5,
    'thumbnails'    => false,
    'editor'        => false,
    'width'         => null,
    'height'        => null,
    'crop'          => false,
    'debug'         => false
);

$fileUpload_config - arguments

'xml' [String]
name of the XML configuration node called in phpformbuilder/plugins-config/fileuploader.xml
'uploader' [String]
name of the PHP uploader file in phpformbuilder/plugins/fileuploader/[xml-node-name]/
'upload_dir' [String]
path from the PHP uploader (ie: phpformbuilder/plugins/fileuploader/default/php/ajax_upload_file.php) to the upload directory
'limit' [Int]
Maximum number of uploaded files
'extensions'[Array]
Array with the allowed extensions
'file_max_size'[Int]
maximal file size in MB
'thumbnails'[Boolean]
For image upload - Create thumbnails (true|false) - thumbnails can be configured in the PHP image uploader in phpformbuilder/plugins/fileuploader/image-upload/php/ajax_upload_file.php
'editor'[Boolean]
For image upload - uploaded images can be clicked & edited by user (true|false)
'width'[Int|null]
For image upload - maximum image width in px. null = no limitation
'height'[Int|null]
For image upload - maximum image height in px. null = no limitation
'crop'[Boolean]
For image upload - crop image to fit the given width & height (true|false)
'debug'[Boolean]
log errors in the browser console (true|false)

You can easily deal with uploaded files, thumbnails and images sizes in plugins/fileuploader/[xml]/php/[uploader].php

Other examples with code are available in Templates

Loading all the page plugins ...

Just wait a few seconds ...

Reference

/**
* Creates an input with fileuploader plugin.
*
* The fileuploader plugin generates complete html, js and css code.
* You'll just have to call printIncludes('css') and printIncludes('js')
* where you wants to put your css/js codes (generaly in <head> and just before </body>).
*
* @param string $type              The type of the input, usualy 'file'
* @param string $name              The upload field name.
*                                  Use an array (ex : name[]) to allow multiple files upload
* @param string $value             (Optional) The input default value
* @param string $label             (Optional) The input label
* @param string $attr              (Optional) Can be any HTML input attribute or js event.
*                                  attributes must be listed separated with commas.
*                                  If you don't specify any ID as attr, the ID will be the name of the input.
*                                  Example : class=my-class,placeholder=My Text,onclick=alert(\'clicked\');.
* @param array  $fileUpload_config An associative array containing :
*                                  'xml'           [string]       => (Optional) The xml node where your plugin code is
*                                                                    in plugins-config/fileuploader.xml
*                                                                    Default: 'default'
*                                  'uploader'      [string]       => (Optional) The PHP uploader file in phpformbuilder/plugins/fileuploader/[xml-node-name]/php/
*                                                                    Default: 'ajax_upload_file.php'
*                                  'upload_dir'    [string]       => (Optional) the directory to upload the files.
*                                                                    Relative to phpformbuilder/plugins/fileuploader/[default]/php/[ajax_upload_file.php]
                                                          Default: '../../../../../file-uploads/' // = [project root]/file-uploads
*                                  'limit'         [null|Number]  => (Optional) The max number of files to upload
*                                                                    Default: 1
*                                  'extensions'    [null|array]   => (Optional) Allowed extensions or file types
*                                                                    example: ['jpg', 'jpeg', 'png', 'audio/mp3', 'text/plain']
*                                                                    Default: ['jpg', 'jpeg', 'png', 'gif']
*                                  'fileMaxSize'   [null|Number]  => (Optional) Each file's maximal size in MB,
*                                                                    Default: 5
*                                  'thumbnails'    [Boolean]      => (Optional) Defines Wether if the uploader creates thumbnails or not.
*                                                                    Thumbnails paths and sizing is done in the plugin php uploader.
*                                                                    Default: false
*                                  'editor'        [Boolean]      => (Optional)  Allows the user to crop/rotate the uploaded image
*                                                                    Default: false
*                                  'width'         [null|Number]  => (Optional) The uploaded image maximum width in px
*                                                                    Default: null
*                                  'height'        [null|Number]  => (Optional) The uploaded image maximum height in px
*                                                                    Default: null
*                                  'crop'          [Boolean]      => (Optional) Defines Wether if the uploader crops the uploaded image or not.
*                                                                    Default: false
*                                  'debug'         [Boolean]      => (Optional) log the result in the browser's console
*                                                                    and shows an error text on the page if the uploader fails to parse the json result.
*                                                                    Default: false
* @return $this
*
*/

To deal with the posted uploaded files:

// at the beginning of your file
use fileuploader\server\FileUploader;
include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . 'phpformbuilder/plugins/fileuploader/server/class.fileuploader.php';

// once the form is validated
if (isset($_POST['user-logo']) && !empty($_POST['user-logo'])) {
    $posted_img = FileUploader::getPostedFiles($_POST['user-logo']);
    $filename   = $posted_img[0]['file'];
    // Then do what you want with the filename
}

Formvalidation - http://formvalidation.io/

See jQuery validation

iCheck - https://github.com/fronteed/icheck

Function: 

$form->addPlugin('icheck', '#selector', 'default', $replacements;

Arguments:

'icheck' [String]
the plugin name
'#selector' [String]
the jQuery selector which defines the fields on which the plugin will be activated
$js_config [String]
the JS configuration - see Available configurations below
$replacements [Array]

An associative array with:

'%theme%':
theme from plugins/icheck/skins/.
Available themes: flat, futurico, line, minimal, polaris, square
'%color%':
color from plugins/icheck/skins/[theme]/.
Available colors: purple, blue, flat, green, grey, orange, pink, purple, red, yellow

Available configurations:

'default'
config. for flat, minimal or square themes
'theme'
config. for futurico or polaris themes
'line'
config. for line theme

Loading all the page plugins ...

Just wait a few seconds ...

Image Picker - https://rvera.github.io/image-picker/

Function: 

$form->addPlugin('image-picker', 'select');

Arguments:

'image-picker' [String]
the plugin name
'#selector' [String]
the jQuery selector which defines the fields on which the plugin will be activated
Special notes:

The Image Picker plugin applies on <select> elements.

Options are available with data-attributes and CSS class on the <Select> field and its <Option> tags.

Available data-attributes & CSS class:

<Option> data-attributes:
data-img-src: [String]
the URL of the source image
data-img-alt: [String]
the alternative text
data-img-label: [String]
image label (the parent select must have the show_label class
<Select> data-attributes:
data-limit: [Number]
limit maximum selection in multiple select
data-img-alt: [String]
the alternative text
<Select> class:
show_label:
enable label for each option (image)

Loading all the page plugins ...

Just wait a few seconds ...

Other examples with option groups & multiple selections are available at https://www.phpformbuilder.pro/templates/bootstrap-4-forms/image-picker-form.php

Intl Tel Input (International Phone Numbers) - https://github.com/jackocnr/intl-tel-input

Function: 

$form->addInput('tel', $name, $value, $label, 'data-intphone=true');

To activate the Intl Tel Input plugin, add the data-intphone=true attribute to the input element.
there is no need to use the "addPlugin" function.

Arguments:

'tel' [String]
the input type
$name [String]
the input name
$value [String]
the default value (can be an empty string)
$label [String]
the input label
$attr [String]
the input field attributes documentation
Special notes:

Options are available with data-attributes on the <input> field.

Available data-attributes:

data-allow-dropdown [Boolean]
Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable. Also we display the selected flag on the right instead because it is just a marker of state.
Default: true
data-exclude-countries [String]
In the dropdown, display all countries except the ones you specify here. You must enter countries codes separated with commas.
data-initial-country [String]
Set the initial country selection by specifying it's country code. You can also set it to "auto", which will lookup the user's country based on their IP address
Example: 'fr'
Default: 'auto'
data-only-countries [String]
In the dropdown, display only the countries you specify. You must enter countries codes separated with commas.
data-preferred-countries [String]
Specify the countries to appear at the top of the list. You must enter countries codes separated with commas.

If you use Intl Tel Input with the Formvalidation plugin,
add data-fv-intphonenumber=true to the input attributes.

Loading all the page plugins ...

Just wait a few seconds ...

Ladda (Buttons spinners) - https://github.com/hakimel/Ladda

Function: 

$form->addBtn('submit', 'submit-btn', 1, 'Send', 'class=btn btn-success ladda-button, data-style=zoom-in');

To activate the Ladda plugin, simply add the ladda-button class to the button element.
there is no need to use the addPlugin function.

Special notes:

Options are available with data-attributes on the <button> tag.

Available data-attributes:

data-style
  • expand-left
  • expand-right
  • expand-up
  • expand-down
  • contract
  • contract-overlay
  • zoom-in
  • zoom-out
  • slide-left
  • slide-right
  • slide-up
  • slide-down
data-spinner-size
pixel dimensions of spinner, defaults to dynamic size based on the button height. Default 40
data-spinner-color
A hex code or any named CSS color.
data-spinner-lines
The number of lines the for the spinner, defaults to 12

Loading all the page plugins ...

Just wait a few seconds ...

LC-Switch (Checkbox/radio switches) - https://lcweb.it/lc-switch-jquery-plugin

Function: 

$form->addCheckbox('my-checkbox-group', 'Checkbox 1', 'value-1', 'class=lcswitch');

To activate the LC-Switch plugin, simply add the lcswitch class to the radio or checkbox element.
there is no need to use the "addPlugin" function.

Special notes:

Options are available with data-attributes on the <radio> or <checkbox> element.

Available data-attributes:

data-ontext
short 'On' text to fit into the switch width
data-offtext
short 'Off' text to fit into the switch width
data-theme
  • black
  • blue
  • blue-gray
  • cyan
  • gray
  • gray-dark
  • green
  • indigo
  • orange
  • pink
  • purple
  • red
  • teal
  • white
  • yellow

Loading all the page plugins ...

Just wait a few seconds ...

Material Design plugin Materialize - https://materializecss.com/

Function: 

$form = new Form('my-form', 'horizontal', 'novalidate=true', 'material');

To switch your form to Material Design theme, instanciate with material as 4th argument.
See live examples with code in Templates

Loading all the page plugins ...

Just wait a few seconds ...

Material Datepicker - https://materializecss.com/pickers.html

Function: 

$form->addPlugin('material-datepicker', '#selector');

Material Datepicker plugin can be used with any framework (Bootstrap 3, Bootstrap 4, Material, Foundation)

If you use the Material Datepicker plugin with Ajax AND without Material framework,
you have to load the 3 following files in your main page:

  • <link rel="stylesheet" href="/phpformbuilder/plugins/material-pickers-base/dist/css/material-pickers-base.min.css">
  • <script src="/phpformbuilder/plugins/material-pickers-base/dist/js/material-pickers-base.min.js"></script>
  • <script src="/phpformbuilder/plugins/material-datepicker/dist/i18n/en_EN.js"></script>
Special notes:

Options are available with data-attributes on the <input> field.

Available data-attributes

data-auto-close Boolean
Automatically close picker when date is selected.
Default: false
data-format String
The date output format for the input field value.
Default: 'mmm dd, yyyy'
data-default-date String
The initial date to view when first opened.
The date must be a string in Javascript Date Object format.
Default: null
data-set-default-date Boolean
Make the defaultDate the initial selected value.
Default: false
data-disable-weekends Boolean
Prevent selection of any date on the weekend.
Default: false
data-first-day Number
First day of week (0: Sunday, 1: Monday etc).
Default: 0
data-min-date String
The earliest date that can be selected.
The date must be a string in Javascript Date Object format.
Default: null
data-max-date String
The latest date that can be selected.
The date must be a string in Javascript Date Object format.
Default: null
data-year-range Number
Number of years either side, or array of upper/lower range.
Default: 10
data-is-rtl Boolean
Changes Datepicker to RTL.
Default: false
data-show-month-after-year Boolean
Show month after year in Datepicker title.
Default: false
data-show-days-in-next-and-previous-months Boolean
Render days of the calendar grid that fall in the next or previous month.
Default: false
data-show-clear-btn Boolean
Show the clear button in the datepicker.
Default: false

Translation (i18n)

  1. Add your language file in phpformbuilder/plugins/material-datepicker/dist/i18n/
  2. Initialize the plugin with your language, for example:
    $form->addPlugin('material-datepicker', '#selector', 'default', array('%language%' => 'fr_FR'));

Loading all the page plugins ...

Just wait a few seconds ...

Material Timepicker - https://materializecss.com/pickers.html

Function: 

$form->addPlugin('material-timepicker', '#selector');

Material Timepicker plugin can be used with any framework (Bootstrap 3, Bootstrap 4, Material, Foundation)

If you use the Material Timepicker plugin with Ajax AND without Material framework,
you have to load the 3 following files in your main page:

  • <link rel="stylesheet" href="/phpformbuilder/plugins/material-pickers-base/dist/css/material-pickers-base.min.css">
  • <script src="/phpformbuilder/plugins/material-pickers-base/dist/js/material-pickers-base.min.js"></script>
  • <script src="/phpformbuilder/plugins/material-timepicker/dist/i18n/en_EN.js"></script>
Special notes:

Options are available with data-attributes on the <input> field.

Available data-attributes

data-show-clear-btn Boolean
Show the clear button in the datepicker.
Default: false
data-default-time String
Default time to set on the timepicker 'now' or '13:14'.
Default: 'now'
data-from-now Number
Millisecond offset from the defaultTime..
Default: 0
data-auto-close Boolean
Automatically close picker when minute is selected.
Default: false
data-twelve-hour Boolean
Use 12 hour AM/PM clock instead of 24 hour clock.
Default: true

Translation (i18n)

  1. Add your language file in phpformbuilder/plugins/material-timepicker/dist/i18n/
  2. Initialize the plugin with your language, for example:
    $form->addPlugin('material-timepicker', '#selector', 'default', array('%language%' => 'fr_FR'));

Loading all the page plugins ...

Just wait a few seconds ...

Function: 

// html modal link
<div class="text-center">
    <a data-remodal-target="modal-target" class="btn btn-primary text-white btn-lg">Sign Up</a>
<?php
$form->modal('#modal-target');
?>
</div>

Nice Check

Function: 

$form->addPlugin('nice-check', 'form', 'default', ['%skin%' => 'red']);

Available skins:

  • black
  • blue-gray
  • blue
  • cyan
  • gray-dark
  • gray
  • green
  • indigo
  • orange
  • pink
  • purple
  • red
  • teal
  • white
  • yellow

Example with skins & code available here: Custom radio checkbox css form

Loading all the page plugins ...

Just wait a few seconds ...

Passfield - http://antelle.github.io/passfield/index.html

Function: 

$form->addPlugin('passfield', '#user-password', 'lower-upper-min6');

Available patterns:

default

password must contain lowercase letters + numbers and be 8 characters long.

pattern validation
$validator
->hasLowercase()
->hasNumber()
->minLength(8)
->validate('user-password');
lower-upper-min-x

password must contain lowercase + uppercase letters and be x characters long.

pattern validation
$validator
->hasLowercase()
->hasUppercase()
->minLength(x)
->validate('user-password');
lower-upper-number-min-x

password must contain lowercase + uppercase letters + numbers and be x characters long.

pattern validation
$validator
->hasLowercase()
->hasUppercase()
->hasNumber()
->minLength(x)
->validate('user-password');
lower-upper-number-symbol-min-x

password must contain lowercase + uppercase letters + numbers + symbols and be x characters long.

pattern validation
$validator
->hasLowercase()
->hasUppercase()
->hasNumber()
->hasSymbol()
->minLength(x)
->validate('user-password');

x is a number between 3 and 8.

You can easily add your own patterns into phpformbuilder/plugins-config/passfield.xml.A pattern generator is available at http://antelle.github.io/passfield/demo.html

Loading all the page plugins ...

Just wait a few seconds ...

Pickadate - http://amsul.ca/pickadate.js/

Date picker

Function: 

$form->addPlugin('pickadate', '#selector', 'default');
Special notes:

Options are available with data-attributes on the <input> field.

The list of the date formats used by the Pickadate plugin is available here: https://amsul.ca/pickadate.js/date/#formatting-rules

Available data-attributes

data-format String
The date output format for the input field value.
Default: 'mmm dd, yyyy'
data-format-submit String
Display a human-friendly format and use an alternate one to submit to the server.
This is done by creating a new hidden input element with the same name attribute as the original with _submit suffix
Default: undefined
data-select-years Boolean
Display select menu to pick the year.
Default: undefined
data-select-months Boolean
Display select menu to pick the month.
Default: undefined
data-first-day Number
First day of week (0: Sunday, 1: Monday etc).
Default: undefined
data-min String
The earliest date that can be selected.
The date must be a string in Javascript Date Object format.
Default: null
data-max String
The latest date that can be selected.
The date must be a string in Javascript Date Object format.
Default: null
data-close-on-select Boolean
When a date is selected, the picker closes. To change this behavior, use the following option.
Default: true
data-close-on-clear Boolean
When the "clear" button is pressed, the picker closes. To change this behavior, use the following option.
Default: true

Translation (i18n)

  1. Add your language file in phpformbuilder/plugins/pickadate/lib/translations/
  2. Initialize the plugin with your language, for example:
    $form->addPlugin('pickadate', '#selector', 'default', array('%language%' => 'fr_FR'));

Loading all the page plugins ...

Just wait a few seconds ...

Time picker

Function: 

$form->addPlugin('pickadate', '#selector', 'pickatime');
Special notes:

Options are available with data-attributes on the <input> field.

Available data-attributes

data-format String
The time output format for the input field value.
Default: 'h:i A'
data-format-submit String
Display a human-friendly format and use an alternate one to submit to the server.
This is done by creating a new hidden input element with the same name attribute as the original with _submit suffix
Default: undefined
data-interval Number
Choose the minutes interval between each time in the list.
Default: 30
data-min String
Set the minimum selectable times on the picker.
Arrays formatted as [HOUR,MINUTE] (see example below)
Default: undefined
data-max String
Set the maximum selectable times on the picker.
Arrays formatted as [HOUR,MINUTE] (see example below)
Default: undefined
data-close-on-select Boolean
When a date is selected, the picker closes. To change this behavior, use the following option.
Default: true
data-close-on-clear Boolean
When the "clear" button is pressed, the picker closes. To change this behavior, use the following option.
Default: true

Translation (i18n)

  1. Add your language file in phpformbuilder/plugins/pickadate/lib/translations/
  2. Initialize the plugin with your language, for example:
    $form->addPlugin('pickadate', '#selector', 'pickatime', array('%language%' => 'fr_FR'));

Loading all the page plugins ...

Just wait a few seconds ...

Popover - https://github.com/sandywalker/webui-popover

Function: 

// html link to the popover
<a href="#" id="popover-link" class="btn btn-primary text-white btn-lg">Sign Up</a>
<?php
$form->popover('#popover-link');
?>
Special notes:

Options are available with data-attributes on the <a> tag (link to the popover).

Available data-attributes

data-closeable Boolean
display close button or not.
Default: true
data-animation String
pop with animation,values: pop,fade
Default: 'pop'
data-placement String
values: auto top right bottom left top-right top-left bottom-right bottom-left auto-top auto-right auto-bottom auto-left horizontal vertical.
Default: 'auto'
data-width String | Number
can be set with number
Default: 'auto'
data-height String | Number
can be set with number
Default: 'auto'
data-backdrop Boolean
if backdrop is set to true, popover will use backdrop on open.
Default: true
data-cache Boolean
if cache is set to false,popover will destroy and recreate.
Default: true

Loading all the page plugins ...

Just wait a few seconds ...

Invisible Recaptcha - https://developers.google.com/recaptcha/docs/invisible

Function: 

$form->addInvisibleRecaptcha('YOUR_RECAPTCHA_KEY_HERE');

// Validation after POST:
$validator->recaptcha('YOUR_RECAPTCHA_SECRET_KEY_HERE', 'Recaptcha Error')->validate('g-recaptcha-response');

If you want several Recaptcha on the same page, you have to use Recaptcha V2

Loading all the page plugins ...

Just wait a few seconds ...

Recaptcha V2 - https://www.google.com/recaptcha/

Function: 

$form->addRecaptchav2('YOUR_RECAPTCHA_KEY_HERE');

// Validation after POST:
$validator->recaptcha('YOUR_RECAPTCHA_SECRET_KEY_HERE', 'Recaptcha Error')->validate('g-recaptcha-response');

Loading all the page plugins ...

Just wait a few seconds ...

Recaptcha V3 - https://www.google.com/recaptcha/

Function: 

$form->addRecaptchav3('YOUR_RECAPTCHA_KEY_HERE');

// Validation after POST:
$validator->recaptcha('YOUR_RECAPTCHA_SECRET_KEY_HERE', 'Recaptcha Error')->validate('g-recaptcha-response');

Arguments:

$sitekey [String]
Your Recaptcha V3 public key
$action [String]
Custom action name - lowercase, uppercase, underscores only.
default value: 'g-recaptcha-response'
$xml_config [String]
the plugin configuration node in phpformbuilder/plugins-config/recaptcha-v3.xml

Live examples available in Templates

Select2 - https://select2.org/

$form->addSelect($select_name, $label, 'class=select2');

To activate the Select2 plugin, add the select2 class to the select element.
there is no need to use the "addPlugin" function.

Arguments:

$select_name [String]
The select field name
$label [String]
The select field label
$attr [String]
the select field attributes documentation

Options:

Pass options with data attributes. Example:

$form->addSelect('select-name', 'Label', 'class=select2, data-width:100%');

Data-attribute list is available at https://select2.org/configuration/options-api

More details about data-attribute usage at https://select2.org/configuration/data-attributes

Instead of adding the select2 class to the select element you can call the addPlugin() function.

This way you can call a custom node from the XML configuration file (phpformbuilder/plugins-config/select2.xml).

This method allows you to store different custom select2 configurations, and for example change the buildTemplate function which builds the options dropdown list.

Loading all the page plugins ...

Just wait a few seconds ...

Quick Tips

Remove search box
Select2 adds a search box to the dropdowns. To remove the search box, add data-minimum-results-for-search=Infinity to the select element attributes.
Placeholders
To add a placeholder, first add an empty option:
$form->addOption('category', '', '');
Then use data-placeholder=Your placeholder text

tinyMce - http://www.tinymce.com/

Function: 

$form->addPlugin('tinymce', '#content', 'default');

Arguments:

'tinymce' [String]
the plugin name
'#selector' [String]
the jQuery selector which defines the fields on which the plugin will be activated
'default' [String]
the plugin configuration node in phpformbuilder/plugins-config/tinymce.xml

Loading all the page plugins ...

Just wait a few seconds ...

Tooltip - http://qtip2.com/

Function: 

$form->addPlugin('tooltip', '#selector', 'default'[, array('%style%' => 'qtip-tipsy')]);

Arguments:

'tooltip' [String]
the plugin name
'#selector' [String]
the jQuery selector which defines the fields on which the plugin will be activated.
Usually [data-tooltip]
'default' [String]
the plugin configuration node in phpformbuilder/plugins-config/tooltip.xml
array('%style%' => 'qtip-tipsy') [Optional] [Array]
default style for all the tooltips (see available styles below)
Special notes:

The Tooltip plugin can be used in many different ways, on any element, label, ...

You'll find many examples code in ../templates/bootstrap-4-forms/tooltip-form.php

Available data attributes

data-tooltip [String or jQuery selector]
if String: The text content of body's tooltip
if jQuery selector: jQuery selector of the hidden div which contains the tooltip html body.
data-style [String]
One of the followings:
  • qtip-plain
  • qtip-light
  • qtip-dark
  • qtip-red
  • qtip-green
  • qtip-blue
  • qtip-shadow *
  • qtip-rounded *
  • qtip-bootstrap
  • qtip-tipsy
  • qtip-youtube
  • qtip-jtools
  • qtip-cluetip
  • qtip-tipped

* can be mixed with others

data-title [String]
The optional tooltip title
data-show-event [String]
Mouse event which triggers the tooltip
ie: click, mouseenter
data-hide-event [String]
Mouse event which hides the tooltip
ie: mouseleave
data-position [String]
top | right | bottom | left
data-adjust-x [Number]
Number to adjust tooltip on x axis
data-adjust-y [Number]
Number to adjust tooltip on y axis
data-max-width [String]
css max-width (px|%)
data-max-height [String]
css max-height (px|%)

Loading all the page plugins ...

Just wait a few seconds ...

Word / Character Count

Function: 

$form->addPlugin('word-character-count', '#selector', 'default', array('%maxAuthorized%' => 100));

Arguments:

'word-character-count' [String]
the plugin name
'#selector' [String]
the jQuery selector which defines the fields on which the plugin will be activated
'default' [String]
the plugin configuration node in phpformbuilder/plugins-config/word-character-count.xml
(see Available configurations below)
array('%maxAuthorized%' => 100) [Array]
The number of maximum authorized characters

Available configurations:

'default'
words + characters count
'word'
word count only
'character'
character count only

Loading all the page plugins ...

Just wait a few seconds ...