: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
$field.trigger( 'input' );
elements.$focusOutTarget = null;
* Determine if the field is disabled for selection/duplication/deletion.
* @param {any} el DOM element or jQuery object of some container on the field preview.
* @return {boolean} True if actions are disabled.
isFieldPreviewActionsDisabled( el ) {
return app.isFormPreviewActionsDisabled( el ) ||
$( el ).closest( '.wpforms-field' ).hasClass( 'ui-sortable-disabled' );
* Determine if form wrapper has sorting locked.
* @param {any} el DOM element or jQuery object of some container on the field preview.
* @return {boolean} True when form preview wrapper sorting is disabled.
isFormPreviewActionsDisabled( el ) {
return $( el ).closest( '.wpforms-field-wrap' ).hasClass( 'ui-sortable-disabled' );
* Toggle field group visibility in the field sidebar.
* @param {any} el DOM element or jQuery object.
* @param {string} action Action.
fieldGroupToggle( el, action ) {
let $buttons = $this.next( '.wpforms-add-fields-buttons' );
const $group = $buttons.parent();
let $icon = $this.find( 'i' ),
groupName = $this.data( 'group' ),
cookieName = 'wpforms_field_group_' + groupName;
if ( action === 'click' ) {
if ( $group.hasClass( 'wpforms-closed' ) ) {
wpCookies.remove( cookieName );
wpCookies.set( cookieName, 'true', 2592000 ); // 1 month
$icon.toggleClass( 'wpforms-angle-right' );
$buttons.stop().slideToggle( '', function() {
$group.toggleClass( 'wpforms-closed' );
if ( action === 'load' ) {
$buttons = $this.find( '.wpforms-add-fields-buttons' );
$icon = $this.find( '.wpforms-add-fields-heading i' );
groupName = $this.find( '.wpforms-add-fields-heading' ).data( 'group' );
cookieName = 'wpforms_field_group_' + groupName;
if ( wpCookies.get( cookieName ) === 'true' ) {
$icon.toggleClass( 'wpforms-angle-right' );
$this.toggleClass( 'wpforms-closed' );
* @param {jQuery} $el Element.
* @param {string} value Value.
updateDescription( $el, value ) {
if ( $el.hasClass( 'nl2br' ) ) {
value = value.replace( /\n/g, '<br>' );
* Set the default state for the entry preview notice field.
defaultStateEntryPreviewNotice() {
$( '.wpforms-field-option-row-preview-notice-enable input' ).each( function() {
$( this ).trigger( 'change' );
* Update a preview notice for the field preview.
let value = wpf.sanitizeHTML( $this.val() ).trim();
const id = $this.parent().data( 'field-id' ),
$field = $( '#wpforms-field-' + id ).find( '.wpforms-entry-preview-notice' );
value = value ? value : wpforms_builder.entry_preview_default_notice;
app.updateDescription( $field, value );
* Show/hide entry preview notice for the field preview.
toggleEntryPreviewNotice() {
id = $this.closest( '.wpforms-field-option' ).data( 'field-id' ),
$field = $( '#wpforms-field-' + id ),
$noticeField = $( '#wpforms-field-option-' + id + ' .wpforms-field-option-row-preview-notice' ),
$notice = $field.find( '.wpforms-entry-preview-notice' ),
$defaultNotice = $field.find( '.wpforms-alert-info' );
if ( $this.is( ':checked' ) ) {
* @param {number} id Field ID.
* @since 1.6.9 Add the entry preview logic.
const $field = $( '#wpforms-field-' + id ),
type = $field.data( 'field-type' );
if ( type === 'pagebreak' && $field.hasClass( 'wpforms-field-entry-preview-not-deleted' ) ) {
app.youCantRemovePageBreakFieldPopup();
if ( $field.hasClass( 'no-delete' ) ) {
app.youCantRemoveFieldPopup();
app.confirmFieldDeletion( id, type );
* Show the error message in the popup that you cannot remove the page break field.
youCantRemovePageBreakFieldPopup() {
title: wpforms_builder.heads_up,
content: wpforms_builder.entry_preview_require_page_break,
icon: 'fa fa-exclamation-circle',
text: wpforms_builder.ok,
* Show the error message in the popup that you cannot reorder the field.
* @since 1.7.7 Deprecated.
* @deprecated Use `WPForms.Admin.Builder.DragFields.youCantReorderFieldPopup()` instead.
youCantReorderFieldPopup() {
// eslint-disable-next-line no-console
console.warn( 'WARNING! Function "WPFormsBuilder.youCantReorderFieldPopup()" has been deprecated, please use the new "WPForms.Admin.Builder.DragFields.youCantReorderFieldPopup()" function instead!' );
WPForms.Admin.Builder.DragFields.youCantReorderFieldPopup();
* Show the error message in the popup that you cannot remove the field.
youCantRemoveFieldPopup() {
title: wpforms_builder.field_locked,
content: wpforms_builder.field_locked_no_delete_msg,
icon: 'fa fa-info-circle',
text: wpforms_builder.close,
* Error alert displayed for invalid From Email Notification field.
* @param {string} $msg Message.
validationErrorNotificationPopup( $msg ) {
title: wpforms_builder.heads_up,
icon: 'fa fa-exclamation-circle',
text: wpforms_builder.close,
* Show the confirmation popup before the field deletion.
* @param {number} id Field ID.
* @param {string} type Field type.
confirmFieldDeletion( id, type ) {
message: wpforms_builder.delete_confirm,
const event = WPFormsUtils.triggerEvent( $builder, 'wpformsBeforeFieldDeleteAlert', [ fieldData, type ] );
// Allow callbacks on `wpformsBeforeFieldDeleteAlert` to prevent field deletion by triggering `event.preventDefault()`.
if ( event.isDefaultPrevented() ) {
content: fieldData.message,
icon: 'fa fa-exclamation-circle',
text: wpforms_builder.ok,
app.fieldDeleteById( id );
text: wpforms_builder.cancel,
* Remove the field by ID.
* @param {number} id Field ID.
* @param {string} type Field type (deprecated)
* @param {number} duration Duration of animation.
fieldDeleteById( id, type = '', duration = 400 ) {
$( `#wpforms-field-${ id }` ).fadeOut( duration, function() {
const $field = $( this );
const $layoutParents = $field.parents( '.wpforms-field-layout-columns' );
type = $field.data( 'field-type' );
$builder.trigger( 'wpformsBeforeFieldDelete', [ id, type ] );
$( '#wpforms-field-option-' + id ).remove();
$( '.wpforms-field, .wpforms-title-desc' ).removeClass( 'active' );
app.fieldTabToggle( 'add-fields' );
const $fieldsOptions = $( '.wpforms-field-option' ),
$submitButton = $builder.find( '.wpforms-field-submit' );
if ( $fieldsOptions.length < 1 ) {
elements.$sortableFieldsWrap.append( elements.$noFieldsPreview.clone() );
elements.$fieldOptions.append( elements.$noFieldsOptions.clone() );
// Only Layout fields remains.
if ( ! $fieldsOptions.filter( ':not(.wpforms-field-option-layout)' ).length ) {
$builder.trigger( 'wpformsFieldDelete', [ id, type, $layoutParents ] );
* Load entry preview fields.
loadEntryPreviewFields() {
const $fields = $( '#wpforms-panel-fields .wpforms-field-wrap .wpforms-field-entry-preview' );
if ( ! $fields.length ) {
$fields.each( function() {
app.lockEntryPreviewFieldsPosition( $( this ).data( 'field-id' ) );
* Delete the entry preview field from the form preview.
* @param {Event} event Event.
* @param {number} id Field ID.
* @param {string} type Field type.
fieldEntryPreviewDelete( event, id, type ) {
if ( 'entry-preview' !== type ) {
const $field = $( '#wpforms-field-' + id ),
$previousPageBreakField = $field.prevAll( '.wpforms-field-pagebreak' ).first(),
$nextPageBreakField = $field.nextAll( '.wpforms-field-pagebreak' ).first(),
nextPageBreakId = $nextPageBreakField.data( 'field-id' ),
$nextPageBreakOptions = $( '#wpforms-field-option-' + nextPageBreakId );
$previousPageBreakField.removeClass( 'wpforms-field-not-draggable wpforms-field-entry-preview-not-deleted' );
$nextPageBreakOptions.find( '.wpforms-entry-preview-block' ).removeClass( 'wpforms-entry-preview-block' );
$builder.trigger( 'wpformsFieldDragToggle', [ $previousPageBreakField.data( 'field-id' ), $previousPageBreakField.data( 'field-type' ) ] );
* Maybe lock the entry preview and fields nearby after move event.
* @param {Event} e Event.
* @param {Object} ui UI sortable object.
maybeLockEntryPreviewGroupOnMove( e, ui ) {
if ( ! ui.item.hasClass( 'wpforms-field-pagebreak' ) ) {
app.maybeLockEntryPreviewGroupOnAdd( e, ui.item.data( 'field-id' ), 'pagebreak' );
* Maybe lock the entry preview and fields nearby after adding event.
* @param {Event} e Event.
* @param {number} fieldId Field id.
* @param {string} type Field type.
maybeLockEntryPreviewGroupOnAdd( e, fieldId, type ) {
if ( type !== 'pagebreak' ) {
const $currentField = $( '#wpforms-field-' + fieldId ),
$prevField = $currentField.prevAll( '.wpforms-field-entry-preview,.wpforms-field-pagebreak' ).first(),
$nextField = $currentField.nextAll( '.wpforms-field-entry-preview,.wpforms-field-pagebreak' ).first();
if ( ! $prevField.hasClass( 'wpforms-field-entry-preview' ) && ! $nextField.hasClass( 'wpforms-field-entry-preview' ) ) {
const $currentFieldPrevToggle = $( '#wpforms-field-option-' + fieldId + ' .wpforms-field-option-row-prev_toggle' ),
$currentFieldPrevToggleField = $currentFieldPrevToggle.find( 'input' ),
$nextFieldPrevToggle = $( '#wpforms-field-option-' + $nextField.data( 'field-id' ) + ' .wpforms-field-option-row-prev_toggle' );
if ( $prevField.hasClass( 'wpforms-field-entry-preview' ) ) {
$currentFieldPrevToggleField.attr( 'checked', 'checked' ).trigger( 'change' );
$currentFieldPrevToggle.addClass( 'wpforms-entry-preview-block' );
$nextFieldPrevToggle.removeClass( 'wpforms-entry-preview-block' );
const prevFieldId = $prevField.data( 'field-id' ),
$prevFieldPrevToggle = $( '#wpforms-field-option-' + prevFieldId + ' .wpforms-field-option-row-prev_toggle' ),
$prevFieldPrevToggleField = $prevFieldPrevToggle.find( 'input' );
$currentField.addClass( 'wpforms-field-not-draggable wpforms-field-entry-preview-not-deleted' );
$builder.trigger( 'wpformsFieldDragToggle', [ fieldId, type ] );
$prevField.removeClass( 'wpforms-field-not-draggable wpforms-field-entry-preview-not-deleted' );
$builder.trigger( 'wpformsFieldDragToggle', [ prevFieldId, $prevField.data( 'field-type' ) ] );
if ( $prevField.prevAll( '.wpforms-field-entry-preview,.wpforms-field-pagebreak' ).first().hasClass( 'wpforms-field-entry-preview' ) ) {
$prevFieldPrevToggleField.attr( 'checked', 'checked' ).trigger( 'change' );
$prevFieldPrevToggle.addClass( 'wpforms-entry-preview-block' );
* Show the error popup that the entry preview field blocks the field.
* @param {Event} e Event.
entryPreviewBlockField( e ) {
title: wpforms_builder.heads_up,
content: wpforms_builder.entry_preview_require_previous_button,
icon: 'fa fa-exclamation-circle',
text: wpforms_builder.ok,
* Is it an entry preview field that should be checked before adding?
* @param {string} type Field type.
* @param {Object} options Field options.
* @return {boolean} True when we should check it.
isUncheckedEntryPreviewField( type, options ) {
// eslint-disable-next-line no-mixed-operators
return type === 'entry-preview' && ( ! options || options && ! options.passed );
* Add an entry preview field to the form preview.
* @param {string} type Field type.
* @param {Object} options Field options.
addEntryPreviewField( type, options ) { // eslint-disable-line complexity
const addButton = $( '#wpforms-add-fields-entry-preview' );