: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
/* global List, wpforms_builder, wpf, WPFormsBuilder, WPFormsFormTemplates */
* Form Builder Setup Panel module.
var WPForms = window.WPForms || {};
WPForms.Admin = WPForms.Admin || {};
WPForms.Admin.Builder = WPForms.Admin.Builder || {};
WPForms.Admin.Builder.Setup = WPForms.Admin.Builder.Setup || ( function( document, window, $ ) {
const activeTemplateName = $( '.wpforms-template.selected .wpforms-template-name' ).text().trim();
* Public functions and properties.
$( window ).on( 'load', function() {
// In the case of jQuery 3.+, we need to wait for a ready event first.
if ( typeof $.ready.then === 'function' ) {
$.ready.then( app.load );
app.setPanelsToggleState();
app.setTriggerBlankLink();
app.setSelectedTemplate();
app.setSelectedCategories();
el.$builder.trigger( 'wpformsBuilderSetupReady' );
app.applyTemplateOnRequest();
* Setup. Prepare some variables.
$builder: $( '#wpforms-builder' ),
$form: $( '#wpforms-builder-form' ),
$formName: $( '#wpforms-setup-name' ),
$panel: $( '#wpforms-panel-setup' ),
$categories: $( '#wpforms-panel-setup .wpforms-setup-templates-categories' ),
$subcategories: $( '#wpforms-panel-setup .wpforms-setup-templates-subcategories' ),
vars.spinner = '<i class="wpforms-loading-spinner wpforms-loading-white wpforms-loading-inline"></i>';
vars.formID = el.$form.data( 'id' );
el.$builder.on( 'wpformsBuilderPanelLoaded', app.panelLoaded );
// Focus on the form title field when displaying setup panel.
.on( 'wpformsPanelSwitched', app.setupTitleFocus );
// Sync Setup title and settings title.
.on( 'input', '#wpforms-panel-field-settings-form_title', app.syncTitle )
.on( 'input', '#wpforms-setup-name', app.syncTitle );
.on( 'keyup', '#wpforms-setup-template-search', _.debounce( WPFormsFormTemplates.searchTemplate, 200 ) )
.on( 'click', '.wpforms-setup-templates-categories li div', WPFormsFormTemplates.selectCategory )
.on( 'click', '.wpforms-setup-templates-categories li .chevron', WPFormsFormTemplates.toggleSubcategoriesList )
.on( 'click', '.wpforms-setup-templates-subcategories li', WPFormsFormTemplates.selectSubCategory )
.on( 'click', '.wpforms-template-select', app.selectTemplate )
.on( 'click', '.wpforms-trigger-blank', app.selectBlankTemplate );
el.$builder.on( 'wpformsBuilderReady wpformsBuilderPanelLoaded', app.filterTemplatesBySelectedCategory );
* @param {Object} e Event object.
* @param {string} panel Panel name.
panelLoaded( e, panel ) {
if ( panel !== 'setup' ) {
WPFormsFormTemplates.setup();
app.setSelectedTemplate();
app.setSelectedCategories();
* Set panels toggle buttons state.
setPanelsToggleState: function() {
.find( '#wpforms-panels-toggle button:not(.active)' )
.toggleClass( 'wpforms-disabled', vars.formID === '' );
* Set attributes of "blank template" link.
setTriggerBlankLink: function() {
.find( '.wpforms-trigger-blank' )
'data-template-name-raw': 'Blank Form',
'data-template': 'blank',
* Force focus on the form title field when switched to the Setup panel.
* @param {Object} e Event object.
* @param {string} view Current view.
setupTitleFocus( e, view ) {
view = view || wpf.getQueryString( 'view' );
if ( view !== 'setup' ) {
// Clone form title to the Setup page.
$( '#wpforms-setup-name' ).val( $( '#wpforms-panel-field-settings-form_title' ).val() );
el.$formName.trigger( 'focus' );
* Mark the current form template as selected.
if ( ! el.$panel.length || ! wpforms_builder.form_meta?.template ) {
const $template = el.$builder
.find( `.wpforms-template-select[data-template="${ wpforms_builder.form_meta.template }"]` )
.closest( '.wpforms-template' );
if ( ! $template.length ) {
// Remove existing badge.
$template.find( '.wpforms-badge' ).remove();
// Remove edit and delete action buttons from current user template.
if ( $template.hasClass( 'wpforms-user-template' ) ) {
$template.find( '.wpforms-template-edit, .wpforms-template-remove' ).remove();
* Set category and/or subcategory active if its template was selected.
setSelectedCategories() {
if ( ! el.$panel.length || ! wpforms_builder.form_meta?.category ) {
const $category = el.$categories.find( `li[data-category="${ wpforms_builder.form_meta.category }"]` );
if ( ! $category.length ) {
el.$categories.find( 'li' ).removeClass( 'active opened' );
$category.addClass( 'active opened' );
const $subcategory = el.$subcategories.find( `li[data-subcategory="${ wpforms_builder.form_meta.subcategory }"]` );
if ( ! $subcategory.length ) {
el.$subcategories.find( 'li' ).removeClass( 'active' );
$subcategory.addClass( 'active' );
* Filter templates by selected category and subcategory.
filterTemplatesBySelectedCategory() {
// If subcategory is available, trigger its click it will update and category also.
if ( el.$subcategories.find( 'li.active' ).length ) {
el.$subcategories.find( ' > li.active' ).trigger( 'click' );
// In other case, check by the category.
if ( el.$categories.find( 'li.active' ).length && ! el.$subcategories.find( 'li.active' ).length ) {
el.$categories.find( ' > li.active div' ).trigger( 'click' );
* Keep Setup title and settings title instances the same.
* @param {object} e Event object.
syncTitle: function( e ) {
if ( e.target.id === 'wpforms-setup-name' ) {
$( '#wpforms-panel-field-settings-form_title' ).val( e.target.value );
$( '#wpforms-setup-name' ).val( e.target.value );
* @since 1.7.7 Deprecated.
* @deprecated Use `WPFormsFormTemplates.searchTemplate` instead.
* @param {object} e Event object.
searchTemplate: function( e ) {
console.warn( 'WARNING! Function "WPForms.Admin.Builder.Setup.searchTemplate( e )" has been deprecated, please use the new "WPFormsFormTemplates.searchTemplate( e )" function instead!' );
WPFormsFormTemplates.searchTemplate( e );
* @since 1.7.7 Deprecated.
* @deprecated Use `WPFormsFormTemplates.selectCategory` instead.
* @param {object} e Event object.
selectCategory: function( e ) {
console.warn( 'WARNING! Function "WPForms.Admin.Builder.Setup.selectCategory( e )" has been deprecated, please use the new "WPFormsFormTemplates.selectCategory( e )" function instead!' );
WPFormsFormTemplates.selectCategory( e );
* @param {Object} event Event object.
selectTemplate( event ) {
const $button = $( this );
// Don't do anything for templates that trigger education modal OR addons-modal.
if ( $button.hasClass( 'education-modal' ) ) {
const template = $button.data( 'template' );
// User templates are applied differently for new forms.
if ( ! vars.formID && template.match( /wpforms-user-template-(\d+)/ ) && $button.data( 'create-url' ) ) {
window.location.href = $button.data( 'create-url' );
el.$panel.find( '.wpforms-template' ).removeClass( 'active' );
$button.closest( '.wpforms-template' ).addClass( 'active' );
$button.data( 'labelOriginal', $button.html() );
// Display loading indicator.
$button.html( vars.spinner + wpforms_builder.loading );
const formName = app.getFormName( $button );
app.applyTemplate( formName, template, $button );
* @param {jQuery} $button Pressed template button.
* @returns {string} A new form name.
getFormName: function( $button ) {
const templateName = $button.data( 'template-name-raw' );
const formName = el.$formName.val();
return activeTemplateName === formName ? templateName : formName;
* The final part of the select template routine.
* @param {string} formName Name of the form.
* @param {string} template Template slug.
* @param {jQuery} $button Use template button object.
applyTemplate: function( formName, template, $button ) {
el.$builder.trigger( 'wpformsTemplateSelect', template );
app.selectTemplateExistingForm( formName, template, $button );
WPFormsFormTemplates.selectTemplateProcess( formName, template, $button, app.selectTemplateProcessAjax );
* @param {object} e Event object.
selectBlankTemplate: function( e ) {
var $button = $( e.target ),
formName = el.$formName.val() || wpforms_builder.blank_form,
app.applyTemplate( formName, template, $button );
* Select template. Existing form.
* @param {string} formName Name of the form.
* @param {string} template Template slug.
* @param {jQuery} $button Use template button object.
selectTemplateExistingForm: function( formName, template, $button ) {
title: wpforms_builder.heads_up,
content: wpforms_builder.template_confirm,
icon: 'fa fa-exclamation-circle',
text: wpforms_builder.ok,
WPFormsFormTemplates.selectTemplateProcess( formName, template, $button, app.selectTemplateProcessAjax );
text: wpforms_builder.cancel,
WPFormsFormTemplates.selectTemplateCancel();
* @since 1.8.2 Deprecated.