: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
if ( $this.hasClass( 'layout-selector-showing' ) ) {
// Selector is showing, so hide it
$layoutSelectorDisplay.stop().slideUp( 400 );
$this.find( 'span' ).text( wpforms_builder.layout_selector_show );
$layoutSelectorDisplay.stop().slideDown();
$this.find( 'span' ).text( wpforms_builder.layout_selector_hide );
$this.toggleClass( 'layout-selector-showing' );
* Init legacy field layout selector.
* @param {number} fieldId Field id.
fieldLayoutSelectorInit( fieldId ) { // eslint-disable-line max-lines-per-function
const $layoutSelector = $( `#wpforms-field-option-row-${ fieldId }-css > .layout-selector-display` );
// Bail if already initialized.
if ( $layoutSelector.length ) {
data: 'wpforms-one-half wpforms-first',
data: 'wpforms-one-half',
data: 'wpforms-one-third wpforms-first',
data: 'wpforms-one-third',
data: 'wpforms-one-third',
data: 'wpforms-one-fourth wpforms-first',
data: 'wpforms-one-fourth',
data: 'wpforms-one-fourth',
data: 'wpforms-one-fourth',
data: 'wpforms-one-third wpforms-first',
data: 'wpforms-two-thirds',
data: 'wpforms-two-thirds wpforms-first',
data: 'wpforms-one-third',
data: 'wpforms-one-fourth wpforms-first',
data: 'wpforms-one-fourth',
data: 'wpforms-two-fourths',
data: 'wpforms-two-fourths wpforms-first',
data: 'wpforms-one-fourth',
data: 'wpforms-one-fourth',
data: 'wpforms-one-fourth wpforms-first',
data: 'wpforms-two-fourths',
data: 'wpforms-one-fourth',
// Create selector options.
layoutOptions = `<div class="layout-selector-display unfoldable-cont">
<p class="heading">${ wpforms_builder.layout_selector_layout }</p>
for ( const key in layouts ) {
layoutOptions += '<div class="layout-selector-display-layout">';
for ( const i in layout ) {
layoutOptions += `<span class="${ layout[ i ].class }" data-classes="${ layout[ i ].data }"></span>`;
layoutOptions += '</div>';
layoutOptions += '</div></div>';
$( `#wpforms-field-option-row-${ fieldId }-css > label` ).after( layoutOptions );
* Legacy field layout selector, selecting a layout.
* @param {Element} el Layout selector toggle link.
fieldLayoutSelectorLayout( el ) {
$this.parent().find( '.layout-selector-display-layout' ).not( $this ).remove();
$this.parent().find( '.heading' ).text( wpforms_builder.layout_selector_column );
$this.toggleClass( 'layout-selector-display-layout layout-selector-display-columns' );
* Field layout selector, insert into class field.
* @param {Element} el Element.
fieldLayoutSelectorInsert( el ) {
$selector = $this.closest( '.layout-selector-display' ),
$parent = $selector.parent(),
$id = $parent.data( 'field-id' ),
$label = $parent.find( 'label' ),
$input = $parent.find( 'input[type=text]' );
let classes = $this.data( 'classes' );
$input.insertAtCaret( classes );
// Remove the list, all done!
$selector.slideUp( 400, function() {
app.fieldLayoutSelectorInit( $id );
$label.find( '.toggle-layout-selector-display' ).removeClass( 'layout-selector-showing' );
$label.find( '.toggle-layout-selector-display span' ).text( wpforms_builder.layout_selector_show );
* Toggle Order Summary Confirmation settings option.
* @param {Event} event Event.
* @param {string} id Field ID.
* @param {string} type Field type.
toggleOrderSummaryConfirmation( event, id, type ) {
if ( type !== 'payment-total' ) {
$( '.wpforms-confirmation' ).each( function() {
$( this ).find( '.wpforms-panel-field-confirmations-message_order_summary' ).closest( '.wpforms-panel-field' ).toggle( $( '#wpforms-panel-fields .wpforms-field-payment-total' ).length !== 0 );
//--------------------------------------------------------------------//
//--------------------------------------------------------------------//
* Element bindings for Settings panel.
bindUIActionsSettings() { // eslint-disable-line max-lines-per-function
// Clicking form title/desc opens Settings panel.
$builder.on( 'click', '#wpforms-panel-fields .wpforms-title-desc, #wpforms-panel-fields .wpforms-field-submit-button, .wpforms-center-form-name', function( e ) {
app.panelSwitch( 'settings' );
if ( $( this ).hasClass( 'wpforms-center-form-name' ) || $( this ).hasClass( 'wpforms-title-desc' ) ) {
$( '#wpforms-panel-field-settings-form_title' ).trigger( 'focus' );
// Clicking form previous page break button.
$builder.on( 'click', '.wpforms-field-pagebreak-last button', function( e ) {
app.panelSwitch( 'settings' );
$( '#wpforms-panel-field-settings-pagebreak_prev' ).trigger( 'focus' );
// Trigger Custom Captcha adding when clicking on its block in the Also Available section.
$builder.on( 'click', '.wpforms-panel-content-also-available-item-add-captcha', function( e ) {
const customCaptcha = $builder.find( '#wpforms-add-fields-captcha' );
// Show educational modal if Custom Captcha is not installed or activated.
if ( customCaptcha.data( 'action' ) ) {
customCaptcha.trigger( 'click' );
app.fieldAdd( 'captcha', {} ).done( function( res ) {
app.panelSwitch( 'fields' );
$( `#wpforms-field-${ res.data.field.id }` ).trigger( 'click' );
// Clicking form last page break button.
$builder.on( 'input', '#wpforms-panel-field-settings-pagebreak_prev', function() {
$( '.wpforms-field-pagebreak-last button' ).text( $( this ).val() );
// Real-time updates for editing the form title.
$builder.on( 'input', '#wpforms-panel-field-settings-form_title, #wpforms-setup-name', function() {
const title = $( this ).val().toString().trim();
$( '.wpforms-preview .wpforms-form-name' ).text( title );
$( '.wpforms-center-form-name.wpforms-form-name' ).text( title );
// Real-time updates for editing the form description.
$builder.on( 'input', '#wpforms-panel-field-settings-form_desc', function() {
$( '.wpforms-form-desc' ).text( $( this ).val() );
// Real-time updates for editing the form submit button.
$builder.on( 'input', '#wpforms-panel-field-settings-submit_text', function() {
$( '.wpforms-field-submit input[type=submit]' ).val( $( this ).val() );
// Toggle form reCAPTCHA setting.
$builder.on( 'change', '#wpforms-panel-field-settings-recaptcha', function() {
// Toggle form confirmation setting fields.
$builder.on( 'change', '.wpforms-panel-field-confirmations-type', function() {
app.confirmationFieldsToggle( $( this ) );
$builder.on( 'change', '.wpforms-panel-field-confirmations-message_entry_preview', app.confirmationEntryPreviewToggle );
// Toggle form notification setting fields.
$builder.on( 'change', '#wpforms-panel-field-settings-notification_enable', function() {
app.notificationToggle();
// Add new settings block.
$builder.on( 'click', '.wpforms-builder-settings-block-add', function( e ) {
if ( ! wpforms_builder.pro ) {
app.settingsBlockAdd( $( this ) );
// Edit settings block name.
$builder.on( 'click', '.wpforms-builder-settings-block-edit', function( e ) {
if ( $el.parents( '.wpforms-builder-settings-block-header' ).find( '.wpforms-builder-settings-block-name' ).hasClass( 'editing' ) ) {
app.settingsBlockNameEditingHide( $el );
app.settingsBlockNameEditingShow( $el );
// Update settings block name and close editing interface.
$builder.on( 'blur', '.wpforms-builder-settings-block-name-edit input', function( e ) {
// Do not fire if for onBlur user clicked on the edit button - it has its own event processing.
if ( ! $( e.relatedTarget ).hasClass( 'wpforms-builder-settings-block-edit' ) ) {
app.settingsBlockNameEditingHide( $( this ) );
// Close settings block editing interface with pressed Enter.
$builder.on( 'keypress', '.wpforms-builder-settings-block-name-edit input', function( e ) {
// On Enter - hide editing interface.
if ( e.keyCode === 13 ) {
app.settingsBlockNameEditingHide( $( this ) );
// We need this preventDefault() to stop jumping to form name editing input.
$builder.on( 'click', '.wpforms-builder-settings-block-clone', function( e ) {
app.settingsBlockPanelClone( $( this ) );
// Toggle settings block - slide up or down.
$builder.on( 'click', '.wpforms-builder-settings-block-toggle', function( e ) {
app.settingsBlockPanelToggle( $( this ) );
// Remove settings block.
$builder.on( 'click', '.wpforms-builder-settings-block-delete', function( e ) {
app.settingsBlockDelete( $( this ) );
* Toggle displaying the CAPTCHA.
const $preview = $builder.find( '.wpforms-field-recaptcha' ),
$setting = $( '#wpforms-panel-field-settings-recaptcha' );
let provider = $setting.data( 'provider' );
provider = provider || 'recaptcha';
if ( ! $preview.length ) {
if ( $setting.is( ':checked' ) ) {
.toggleClass( 'is-recaptcha', 'recaptcha' === provider );
* Set up the Confirmation blocks.
// Toggle the setting fields in each confirmation block.
$( '.wpforms-panel-field-confirmations-type' ).each( function() {
app.confirmationFieldsToggle( $( this ) );
// Init TinyMCE in each confirmation block.
$( '.wpforms-panel-field-confirmations-message' ).each( function() {
if ( typeof tinymce !== 'undefined' && typeof wp.editor !== 'undefined' ) {
wp.editor.initialize( $( this ).attr( 'id' ), s.tinymceDefaults );
// Validate Confirmation Redirect URL.
$builder.on( 'focusout', '.wpforms-panel-field-confirmations-redirect', function( event ) { // eslint-disable-line no-unused-vars
const $field = $( this );
const url = $field.val().trim();
// The value is either a valid URL or empty, we're done.
if ( wpf.isURL( url ) || url === '' ) {
// Show the error modal and focus the field.
app.confirmationRedirectValidationError( function() {
$field.trigger( 'focus' );
// Make sure Confirmation Redirect URL is not empty, verify before leaving the panel or saving.
$builder.on( 'wpformsBeforeSave wpformsPanelSectionSwitch wpformsPanelSwitch', function( event ) {
const $confirmations = $( '.wpforms-confirmation' );
$confirmations.each( function( _index, confirmation ) {
const $confirmation = $( confirmation );
const $urlField = $confirmation.find( '.wpforms-panel-field-confirmations-redirect' );
// We're starting on a panel other than Settings > Confirmations, bail.
if ( $urlField.is( ':hidden' ) ) {
const $typeField = $confirmation.find( '.wpforms-panel-field-confirmations-type' );
// The Confirmation type is not redirect, bail.
// If the URL value is non-empty, `focusout` validation takes over.
if ( $typeField.val() !== 'redirect' || $urlField.val().trim().length > 0 ) {
app.confirmationRedirectValidationError( function() {
$urlField.trigger( 'focus' );
event.stopImmediatePropagation();
* Display confirmation popup for empty or invalid Confirmation Redirect URL.
* @param {Function} onDestroyCallback Callback to execute when popup is closed and removed from DOM.
confirmationRedirectValidationError( onDestroyCallback ) {
title: wpforms_builder.heads_up,
content: wpforms_builder.redirect_url_field_error,
icon: 'fa fa-exclamation-circle',
text: wpforms_builder.ok,
onDestroy: onDestroyCallback,
* Toggle the different form Confirmation setting fields.