jQuery plugins

Function:

$form->setMode($mode);

Arguments:

$mode [String]

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

Function:

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

Arguments:

$bundle [String]

Optional bundle name to wait for before triggering the domReady events

Function:

$form->addInput('number', $input_name, '', $label, 'class=input-spinner, min=0, max=20, data-buttons-clazz=btn-outline-light');

To activate the Bootstrap Input Spinner plugin, add the input-spinner class to the input element.
there is no need to call the "addPlugin" function.

Arguments:

$type [String]

The input type
number

$input_name [String]

The input field name

$label [String]

The input field label

$attr [String]

the input field attributes documentation

Available data-attributes:

data-decrement-button [String]

The "-" button text.
Default: <strong>&minus;</strong>

data-increment-button [String]

The "+" button text.
Default: <strong>&plus;</strong>

data-group-clazz [String]

CSS class of the resulting input-group
Default: ''

data-buttons-clazz [String]

CSS class of the resulting '+' & '-' buttons.
Default: 'btn-outline-secondary'

data-buttons-width [String]

CSS width of the resulting '+' & '-' buttons.
Default: '2.5rem'

data-text-align [String]

CSS alignment of the entered number.
Default: 'center'

data-auto-delay [Number]

ms threshold before auto value change.
Default: 500

data-auto-interval [Number]

Speed of auto value change.
Default: 50'

data-buttons-only [Boolean]

Set this `true` to disable the possibility to enter or paste the number via keyboard.
Default: false

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 call 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

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

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

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.

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/image-upload/php/ajax_upload_file.php

'drag-and-drop'

uploader: phpformbuilder/plugins/fileuploader/drag-and-drop/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

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

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

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)

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 call 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

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.

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 call the addPlugin function.

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

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 call the "addPlugin" function.

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

Function:

$form->addInput('text', 'daterange', '', '', 'class=litepick, data-single-mode=false');

To activate the Litepicker plugin, simply add the litepick class to the input element.
there is no need to call the "addPlugin" function.

$form->addInput('text', 'daterange', '', '', 'class=litepick, data-single-mode=false, data-format=YYYY-MM-DD');

Options:

The options list is available here on the plugin website at https://wakirin.github.io/Litepicker/

Access to the Javascript object and its events

PHP Form Builder creates a global litePickers object, then each instance is registered with its input fieldname.
This allows to access to each instance individually and use the litepicker Events or functions.
For instance:

let inputId = 'my-input';
litePickers[inputId].setOptions({'onSelect': function() {
    console.log(this.options);
    console.log(this.getDate());
    console.log($('#' + inputId).val());
}});

Function:

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

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

Function:

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

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

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'));

Function:

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

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

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'));

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>

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

Function:

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

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 https://antelle.net/passfield/demo.html

Function:

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

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'));

Function:

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

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'));

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');
?>

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

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

Function:

$form->addRecaptchav2('YOUR_RECAPTCHA_KEY_HERE');

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

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

$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 call 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

Function:

$form->addInput('hidden', $input_name, $value, $label, 'class=signature-pad, data-background-color=#336699, data-pen-color=#fff, data-width=100%, data-clear-button=true, data-clear-button-class=btn btn-sm btn-warning, data-clear-button-text=clear, data-fv-not-empty___message=You must sign to accept the license agreement, required');

To activate the Signature pad plugin, add the signature-pad class to the input element.
there is no need to call the "addPlugin" function.

Arguments:

$input_name [String]

the input field name

$value [String]

the input field value

$label [String]

the input field label

$data_uri = $_POST['fieldname'];
$encoded_image = explode(',', $data_uri)[1];
$decoded_image = base64_decode($encoded_image);
file_put_contents('signature.png', $decoded_image);

Options:

Pass options with data attributes. Example:

$form->addInput('hidden', 'user-signature', '', 'Sign to confirm your agreement', 'class=signature-pad, data-background-color=#336699, data-pen-color=#fff, data-width=100%, data-clear-button=true, data-clear-button-class=btn btn-sm btn-warning, data-clear-button-text=clear, required');

Available options:

data-width [Number] | [percent]

the input field width. Accepts only number (in pixels) or percent value.

data-background-color [String]

the background color in valid CSS format

data-pen-color [String]

the pen color in valid CSS format

data-clear-button [Boolean]

show a button to clear the signature

data-clear-button-class [String]

the CSS classes for the clear button

data-clear-button-text [String]

the text of the clear button

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

Customization &Translation (i18n)

To customize the TinyMCE editor settings:

1. Duplicate phpformbuilder/plugins-config/tinymce.xml to phpformbuilder/plugins-config-custom/tinymce.xml
2. Make your changes in the duplicated file (in the plugins-config-custom folder).

If you change the language:

Download the language file on tiny.cloud website and put it in phpformbuilder/plugins/tinymce/langs/

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)

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|%)

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