: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
.text( wpforms_builder.file_upload.preview_title_plural );
.text( wpforms_builder.file_upload.preview_hint.replace( '{maxFileNumber}', maxFileNumber ) )
.removeClass( 'wpforms-hide' );
.text( wpforms_builder.file_upload.preview_title_single );
.text( wpforms_builder.file_upload.preview_hint.replace( '{maxFileNumber}', 1 ) )
.addClass( 'wpforms-hide' );
$( classicPreview, $preview ).addClass( 'wpforms-hide' );
$( modernPreview, $preview ).removeClass( 'wpforms-hide' );
$maxFileNumberRow.removeClass( 'wpforms-hidden' );
* Update limit controls by changing checkbox.
* @param {number} id Field id.
* @param {boolean} checked Whether an option is checked or not.
updateTextFieldsLimitControls( id, checked ) {
$( '#wpforms-field-option-row-' + id + '-limit_controls' ).addClass( 'wpforms-hide' );
$( '#wpforms-field-option-row-' + id + '-limit_controls' ).removeClass( 'wpforms-hide' );
* Update disabling today's date controls by changing checkbox.
* @param {number} id Field id.
* @param {boolean} checked Whether an option is checked or not.
updateDisableTodaysDateControls( id, checked ) {
$( `#wpforms-field-option-row-${ id }-date_disable_todays_date` )
.toggleClass( 'wpforms-hide', ! checked );
* Update Password Strength controls by changing checkbox.
* @param {number} id Field id.
* @param {boolean} checked Whether an option is checked or not.
updatePasswordStrengthControls( id, checked ) {
const $strengthControls = $( '#wpforms-field-option-row-' + id + '-password-strength-level' );
$strengthControls.removeClass( 'wpforms-hidden' );
$strengthControls.addClass( 'wpforms-hidden' );
* Update Rich Text media controls by changing checkbox.
updateRichTextMediaFieldsLimitControls() {
fieldId = $this.closest( '.wpforms-field-option-row-media_enabled' ).data( 'field-id' ),
$mediaControls = $( '#wpforms-field-option-row-' + fieldId + '-media_controls' ),
$toolbar = $( '#wpforms-field-' + fieldId + ' .wpforms-richtext-wrap .mce-toolbar-grp' );
if ( ! $this.is( ':checked' ) ) {
$toolbar.removeClass( 'wpforms-field-richtext-media-enabled' );
$toolbar.addClass( 'wpforms-field-richtext-media-enabled' );
* Update Rich Text style preview by changing select.
updateRichTextStylePreview() {
fieldId = $this.closest( '.wpforms-field-option-row-style' ).data( 'field-id' ),
$toolbar = $( '#wpforms-field-' + fieldId + ' .wpforms-richtext-wrap .mce-toolbar-grp' );
$toolbar.toggleClass( 'wpforms-field-richtext-toolbar-basic', $this.val() !== 'full' );
app.bindUIActionsPanels();
app.bindUIActionsFields();
app.bindUIActionsSettings();
app.bindUIActionsRevisions();
app.bindUIActionsSaveExit();
app.bindUIActionsGeneral();
//--------------------------------------------------------------------//
//--------------------------------------------------------------------//
* Element bindings for general panel tasks.
$builder.on( 'click', '#wpforms-panels-toggle button, .wpforms-panel-switch', function( e ) {
app.panelSwitch( $( this ).data( 'panel' ) );
// Panel sections switching.
$builder.on( 'click', '.wpforms-panel .wpforms-panel-sidebar-section', function( e ) {
app.panelSectionSwitch( this, e );
$builder.on( 'click', '.wpforms-panels .wpforms-panel-sidebar-content .wpforms-panel-sidebar-toggle', function() {
$( this ).parent().toggleClass( 'wpforms-panel-sidebar-closed' );
* @since 1.5.9 Added `wpformsPanelSwitched` trigger.
* @param {string} panel Panel slug.
* @return {void|boolean} Void or false.
const $panel = $( '#wpforms-panel-' + panel );
if ( ! $panel.hasClass( 'active' ) ) {
const event = WPFormsUtils.triggerEvent( $builder, 'wpformsPanelSwitch', [ panel ] );
// Allow callbacks on `wpformsPanelSwitch` to cancel panel switching by triggering `event.preventDefault()`.
if ( event.isDefaultPrevented() || ! wpforms_panel_switch ) {
$( '#wpforms-panels-toggle' ).find( 'button' ).removeClass( 'active' );
$( '.wpforms-panel' ).removeClass( 'active' );
$( '.wpforms-panel-' + panel + '-button' ).addClass( 'active' );
$panel.addClass( 'active' );
history.replaceState( {}, null, wpf.updateQueryString( 'view', panel ) );
$builder.trigger( 'wpformsPanelSwitched', [ panel ] );
* @param {Element} el Element.
* @param {Event} e Event.
* @return {boolean|void} False when not switched.
panelSectionSwitch( el, e ) { // eslint-disable-line complexity
if ( $this.hasClass( 'upgrade-modal' ) || $this.hasClass( 'education-modal' ) ) {
const $panel = $this.parent().parent(),
section = $this.data( 'section' ),
$sectionButton = $panel.find( '.wpforms-panel-sidebar-section-' + section );
if ( ! $sectionButton.hasClass( 'active' ) ) {
const event = WPFormsUtils.triggerEvent( $builder, 'wpformsPanelSectionSwitch', section );
// Allow callbacks on `wpformsPanelSectionSwitch` to cancel panel section switching by triggering `event.preventDefault()`.
if ( event.isDefaultPrevented() || ! wpforms_panel_switch ) {
const $sectionButtons = $panel.find( '.wpforms-panel-sidebar-section' );
$sectionButtons.removeClass( 'active' );
$sectionButton.addClass( 'active' );
$panel.find( '.wpforms-panel-content-section' ).hide();
$panel.find( '.wpforms-panel-content-section-' + section ).show();
//--------------------------------------------------------------------//
//--------------------------------------------------------------------//
* Element bindings for a Setup panel.
* @since 1.6.8 Deprecated.
* @deprecated Use `WPForms.Admin.Builder.Setup.events()` instead.
// eslint-disable-next-line no-console
console.warn( 'WARNING! Function "WPFormsBuilder.bindUIActionsSetup()" has been deprecated, please use the new "WPForms.Admin.Builder.Setup.events()" function instead!' );
WPForms.Admin.Builder.Setup.events();
* @since 1.6.8 Deprecated.
* @deprecated Use `WPForms.Admin.Builder.Setup.selectTemplate()` instead.
* @param {Object} el DOM element object.
* @param {Object} e Event object.
templateSelect( el, e ) {
// eslint-disable-next-line no-console
console.warn( 'WARNING! Function "WPFormsBuilder.templateSelect()" has been deprecated, please use the new "WPForms.Admin.Builder.Setup.selectTemplate()" function instead!' );
WPForms.Admin.Builder.Setup.selectTemplate( e );
//--------------------------------------------------------------------//
//--------------------------------------------------------------------//
* Element bindings for Fields panel.
bindUIActionsFields() { // eslint-disable-line max-lines-per-function
// Field sidebar tab toggle
$builder.on( 'click', '.wpforms-tab a', function( e ) {
app.fieldTabToggle( $( this ).parent().attr( 'id' ) );
// Field sidebar group toggle
$builder.on( 'click', '.wpforms-add-fields-heading', function( e ) {
app.fieldGroupToggle( $( this ), 'click' );
// Form field preview clicking.
$builder.on( 'click', '.wpforms-field', function( event ) {
if ( app.isFieldPreviewActionsDisabled( this ) ) {
// Allow clicking on the "dismiss" button inside the field.
if ( event.target.classList.contains( 'wpforms-dismiss-button' ) ) {
// Dismiss the main context menu when it is open.
if ( WPForms.Admin.Builder.ContextMenu ) {
WPForms.Admin.Builder.ContextMenu.hideMainContextMenu( event );
app.fieldTabToggle( $( this ).data( 'field-id' ) );
// Prevent interactions with inputs on the preview panel.
$builder.on( 'mousedown click', '.wpforms-field input, .wpforms-field select, .wpforms-field textarea', function( e ) {
$builder.on( 'click', '.wpforms-field-delete', function( e ) {
if ( app.isFormPreviewActionsDisabled( this ) ) {
if ( WPForms.Admin.Builder.ContextMenu ) {
WPForms.Admin.Builder.ContextMenu.hideMenu();
app.fieldDelete( $( this ).parent().data( 'field-id' ) );
$builder.on( 'click', '.wpforms-field-duplicate', function( e ) {
if ( app.isFormPreviewActionsDisabled( this ) ) {
if ( WPForms.Admin.Builder.ContextMenu ) {
WPForms.Admin.Builder.ContextMenu.hideMenu();
app.fieldDuplicate( $( this ).parent().data( 'field-id' ) );
$builder.on( 'click', '.wpforms-add-fields-button', function( e ) {
const $field = $( this );
if ( $field.hasClass( 'ui-draggable-disabled' ) ) {
const type = $field.data( 'field-type' ),
event = WPFormsUtils.triggerEvent( $builder, 'wpformsBeforeFieldAddOnClick', [ type, $field ] );
// Allow callbacks on `wpformsBeforeFieldAddOnClick` to cancel adding field
// by triggering `event.preventDefault()`.
if ( event.isDefaultPrevented() ) {
app.fieldAdd( type, { $sortable: 'default' } );
// New field choices should be sortable
$builder.on( 'wpformsFieldAdd', function( event, id, type ) {
if ( $.inArray( type, fieldTypes ) !== -1 ) {
app.fieldChoiceSortable( type, `#wpforms-field-option-row-${ id }-choices ul` );
// Field option tab toggle.
$builder.on( 'wpformsFieldOptionTabToggle', function( e, fieldId ) {
app.fieldLayoutSelectorInit( fieldId );
// Field choice "Add new".
$builder.on( 'click', '.wpforms-field-option-row-choices .add', function( e ) {
app.fieldChoiceAdd( e, $( this ) );
$builder.on( 'click', '.wpforms-field-option-row-choices .remove', function( e ) {
app.fieldChoiceDelete( e, $( this ) );
// Field choices' defaults, before change.
$builder.on( 'mousedown', '.wpforms-field-option-row-choices input[type=radio]', function( e ) { // eslint-disable-line no-unused-vars
if ( $this.is( ':checked' ) ) {
$this.attr( 'data-checked', '1' );
$this.attr( 'data-checked', '0' );
// Field choices' defaults.
$builder.on( 'click', '.wpforms-field-option-row-choices input[type=radio]', function( e ) { // eslint-disable-line no-unused-vars
list = $this.parent().parent();
$this.parent().parent().find( 'input[type=radio]' ).not( this ).prop( 'checked', false );
if ( $this.attr( 'data-checked' ) === '1' ) {
$this.prop( 'checked', false );
$this.attr( 'data-checked', '0' );
app.fieldChoiceUpdate( list.data( 'field-type' ), list.data( 'field-id' ), list.find( 'li' ).length );
// Field choices update preview area.
$builder.on( 'change', '.wpforms-field-option-row-choices input[type=checkbox]', function( e ) { // eslint-disable-line no-unused-vars
const list = $( this ).parent().parent();
app.fieldChoiceUpdate( list.data( 'field-type' ), list.data( 'field-id' ), list.find( 'li' ).length );
// Field choices display value toggle.
$builder.on( 'change', '.wpforms-field-option-row-show_values input', function( e ) { // eslint-disable-line no-unused-vars
$( this ).closest( '.wpforms-field-option' ).find( '.wpforms-field-option-row-choices ul' ).toggleClass( 'show-values' );
// Field choices image toggle.
$builder.on( 'change', '.wpforms-field-option-row-choices_images input', function() {
$optionRow = $this.closest( '.wpforms-field-option-row' ),
fieldID = $optionRow.data( 'field-id' ),
$fieldOptions = $( '#wpforms-field-option-' + fieldID ),
checked = $this.is( ':checked' ),
type = $fieldOptions.find( '.wpforms-field-option-hidden-type' ).val(),
$iconToggle = $optionRow.siblings( '.wpforms-field-option-row-choices_icons' ).find( 'input' );
// Toggle icon choices off.
if ( checked && $iconToggle.is( ':checked' ) ) {
$iconToggle.prop( 'checked', false ).trigger( 'change' );
$optionRow.find( '.wpforms-alert' ).toggleClass( 'wpforms-hidden' );
$fieldOptions.find( '.wpforms-field-option-row-choices ul' ).toggleClass( 'show-images' );
$fieldOptions.find( '.wpforms-field-option-row-choices_images_style' ).toggleClass( 'wpforms-hidden' );
$fieldOptions.find( '.wpforms-field-option-row-dynamic_choices' ).toggleClass( 'wpforms-hidden', checked );
$( '#wpforms-field-option-' + fieldID + '-input_columns' ).val( 'inline' ).trigger( 'change' );
$( '#wpforms-field-option-' + fieldID + '-input_columns' ).val( '' ).trigger( 'change' );
app.fieldChoiceUpdate( type, fieldID );
// Field choices image upload add/remove image.
$builder.on( 'wpformsImageUploadAdd wpformsImageUploadRemove', function( event, $this, $container ) {
const $list = $container.closest( '.choices-list' ),
fieldID = $list.data( 'field-id' ),
type = $list.data( 'field-type' );
app.fieldChoiceUpdate( type, fieldID );
// Field choices image style toggle.
$builder.on( 'change', '.wpforms-field-option-row-choices_images_style select', function() {
const fieldID = $( this ).parent().data( 'field-id' ),
type = $( '#wpforms-field-option-' + fieldID ).find( '.wpforms-field-option-hidden-type' ).val();
app.fieldChoiceUpdate( type, fieldID );
// Updates field choices text in almost real time.
$builder.on( 'keyup', '.wpforms-field-option-row-choices input.label, .wpforms-field-option-row-choices input.value', function( e ) { // eslint-disable-line no-unused-vars
const $list = $( this ).parent().parent();
app.fieldChoiceUpdate( $list.data( 'field-type' ), $list.data( 'field-id' ) );
// Sanitize field choices text on focus out.
$builder.on( 'focusout', '.wpforms-field-option-row-choices input.label, .wpforms-field-option-row-choices input.value', function( e ) { // eslint-disable-line no-unused-vars
input.val( wpf.sanitizeHTML( input.val(), wpforms_builder.allowed_label_html_tags ) );
// Field Choices Bulk Add
$builder.on( 'click', '.toggle-bulk-add-display', function( e ) {