: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
namespace WPForms\Providers\Provider\Settings;
use WPForms\Providers\Provider\Core;
use WPForms\Providers\Provider\Status;
* Class FormBuilder handles functionality inside the form builder.
abstract class FormBuilder implements FormBuilderInterface {
* Get the Core loader class of a provider.
* Most of Marketing providers will have 'connection' type.
* Payment providers may have (or not) something different.
protected $type = 'connection';
* Form data and settings.
protected $form_data = [];
* Integrations constructor.
* @param Core $core Core provider class.
public function __construct( Core $core ) {
if ( ! empty( $_GET['form_id'] ) ) { // phpcs:ignore
$this->form_data = wpforms()->get( 'form' )->get(
\absint( $_GET['form_id'] ), // phpcs:ignore
* Register all hooks (actions and filters) here.
protected function init_hooks() {
// Register builder HTML template(s).
add_action( 'wpforms_builder_print_footer_scripts', [ $this, 'builder_templates' ], 10 );
add_action( 'wpforms_builder_print_footer_scripts', [ $this, 'builder_custom_templates' ], 11 );
// Process builder AJAX requests.
add_action( "wp_ajax_wpforms_builder_provider_ajax_{$this->core->slug}", [ $this, 'process_ajax' ] );
( ! empty( $_GET['page'] ) && $_GET['page'] === 'wpforms-builder' ) && // phpcs:ignore
! empty( $_GET['form_id'] ) && // phpcs:ignore
add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_assets' ] );
add_filter( 'wpforms_save_form_args', [ $this, 'remove_connection_locks' ], 1, 3 );
* Used to register generic templates for all providers inside form builder.
* @since 1.6.2 Added sub-templates for conditional logic based on provider.
public function builder_templates() {
$cl_builder_block = wpforms_conditional_logic()->builder_block(
'form' => $this->form_data,
'panel' => esc_attr( $this->core->slug ),
'subsection' => '%connection_id%',
'reference' => esc_html__( 'Marketing provider connection', 'wpforms-lite' ),
<!-- Single connection block sub-template: FIELDS -->
<script type="text/html" id="tmpl-wpforms-providers-builder-content-connection-fields">
<div class="wpforms-builder-provider-connection-block wpforms-builder-provider-connection-fields">
<table class="wpforms-builder-provider-connection-fields-table">
<th><?php \esc_html_e( 'Custom Field Name', 'wpforms-lite' ); ?></th>
<th colspan="3"><?php \esc_html_e( 'Form Field Value', 'wpforms-lite' ); ?></th>
<# if ( ! _.isEmpty( data.connection.fields_meta ) ) { #>
<# _.each( data.connection.fields_meta, function( item, meta_id ) { #>
<tr class="wpforms-builder-provider-connection-fields-table-row">
<# if ( ! _.isEmpty( data.provider.fields ) ) { #>
<select class="wpforms-builder-provider-connection-field-name"
name="providers[{{ data.provider.slug }}][{{ data.connection.id }}][fields_meta][{{ meta_id }}][name]">
<option value=""><# if ( ! _.isEmpty( data.provider.placeholder ) ) { #>{{ data.provider.placeholder }}<# } else { #><?php esc_html_e( '--- Select Field ---', 'wpforms-lite' ); ?><# } #></option>
<# _.each( data.provider.fields, function( field_name, field_id ) { #>
<option value="{{ field_id }}"
<# if ( field_id === item.name ) { #>selected="selected"<# } #>
<input type="text" value="{{ item.name }}"
class="wpforms-builder-provider-connection-field-name"
name="providers[{{ data.provider.slug }}][{{ data.connection.id }}][fields_meta][{{ meta_id }}][name]"
placeholder="<?php \esc_attr_e( 'Field Name', 'wpforms-lite' ); ?>"
<select class="wpforms-builder-provider-connection-field-value"
name="providers[{{ data.provider.slug }}][{{ data.connection.id }}][fields_meta][{{ meta_id }}][field_id]">
<option value=""><?php esc_html_e( '--- Select Form Field ---', 'wpforms-lite' ); ?></option>
<# _.each( data.fields, function( field, key ) { #>
<option value="{{ field.id }}"
<# if ( field.id === item.field_id ) { #>selected="selected"<# } #>
<# if ( ! _.isUndefined( field.label ) && field.label.toString().trim() !== '' ) { #>
{{ field.label.toString().trim() }}
{{ wpforms_builder.field + ' #' + key }}
<button class="button-secondary js-wpforms-builder-provider-connection-fields-add"
title="<?php \esc_attr_e( 'Add Another', 'wpforms-lite' ); ?>">
<i class="fa fa-plus-circle"></i>
<button class="button js-wpforms-builder-provider-connection-fields-delete <# if ( meta_id === 0 ) { #>hidden<# } #>"
title="<?php \esc_attr_e( 'Remove', 'wpforms-lite' ); ?>">
<i class="fa fa-minus-circle"></i>
<tr class="wpforms-builder-provider-connection-fields-table-row">
<# if ( ! _.isEmpty( data.provider.fields ) ) { #>
<select class="wpforms-builder-provider-connection-field-name"
name="providers[{{ data.provider.slug }}][{{ data.connection.id }}][fields_meta][0][name]">
<option value=""><# if ( ! _.isEmpty( data.provider.placeholder ) ) { #>{{ data.provider.placeholder }}<# } else { #><?php esc_html_e( '--- Select Field ---', 'wpforms-lite' ); ?><# } #></option>
<# _.each( data.provider.fields, function( field_name, field_id ) { #>
<option value="{{ field_id }}">
<input type="text" value=""
class="wpforms-builder-provider-connection-field-name"
name="providers[{{ data.provider.slug }}][{{ data.connection.id }}][fields_meta][0][name]"
placeholder="<?php \esc_attr_e( 'Field Name', 'wpforms-lite' ); ?>"
<select class="wpforms-builder-provider-connection-field-value"
name="providers[{{ data.provider.slug }}][{{ data.connection.id }}][fields_meta][0][field_id]">
<option value=""><?php esc_html_e( '--- Select Form Field ---', 'wpforms-lite' ); ?></option>
<# _.each( data.fields, function( field, key ) { #>
<option value="{{ field.id }}">
<# if ( ! _.isUndefined( field.label ) && field.label.toString().trim() !== '' ) { #>
{{ field.label.toString().trim() }}
{{ wpforms_builder.field + ' #' + key }}
<button class="button-secondary js-wpforms-builder-provider-connection-fields-add"
title="<?php \esc_attr_e( 'Add Another', 'wpforms-lite' ); ?>">
<i class="fa fa-plus-circle"></i>
<button class="button js-wpforms-builder-provider-connection-fields-delete hidden"
title="<?php \esc_attr_e( 'Delete', 'wpforms-lite' ); ?>">
<i class="fa fa-minus-circle"></i>
</table><!-- /.wpforms-builder-provider-connection-fields-table -->
<?php \esc_html_e( 'Map custom fields (or properties) to form fields values.', 'wpforms-lite' ); ?>
</div><!-- /.wpforms-builder-provider-connection-fields -->
<!-- Single connection block sub-template: CONDITIONAL LOGIC -->
<script type="text/html" id="tmpl-wpforms-<?php echo esc_attr( $this->core->slug ); ?>-builder-content-connection-conditionals">
<?php echo $cl_builder_block; // phpcs:ignore ?>
<!-- DEPRECATED: Should be removed when we will make changes in our addons. -->
<script type="text/html" id="tmpl-wpforms-providers-builder-content-connection-conditionals">
<?php echo $cl_builder_block; // phpcs:ignore ?>
* Enqueue JavaScript and CSS files if needed.
* When extending - include the `parent::enqueue_assets();` not to break things!
public function enqueue_assets() {
$min = \wpforms_get_min_suffix();
'wpforms-admin-builder-templates',
WPFORMS_PLUGIN_URL . "assets/js/admin/builder/templates{$min}.js",
'wpforms-admin-builder-providers',
WPFORMS_PLUGIN_URL . "assets/js/admin/builder/providers{$min}.js",
[ 'wpforms-utils', 'wpforms-builder', 'wpforms-admin-builder-templates' ],
* Process the Builder AJAX requests.
public function process_ajax() {
\check_ajax_referer( 'wpforms-builder', 'nonce' );
// Check for permissions.
if ( ! \wpforms_current_user_can( 'edit_forms' ) ) {
'error' => \esc_html__( 'You do not have permission to perform this action.', 'wpforms-lite' ),
// Process required values.
$error = [ 'error' => esc_html__( 'Something went wrong while performing an AJAX request.', 'wpforms-lite' ) ];
\wp_send_json_error( $error );
$form_id = (int) $_POST['id'];
$task = sanitize_key( $_POST['task'] );
$revisions = wpforms()->get( 'revisions' );
$revision = $revisions ? $revisions->get_revision() : null;
// Setup form data based on the revision_id, that we got from AJAX request.
$this->form_data = wpforms_decode( $revision->post_content );
// Setup form data based on the ID, that we got from AJAX request.
$form_handler = wpforms()->get( 'form' );
$this->form_data = $form_handler ? $form_handler->get( $form_id, [ 'content_only' => true ] ) : [];
// Do not allow to proceed further, as form_id may be incorrect.
if ( empty( $this->form_data ) ) {
\wp_send_json_error( $error );
'wpforms_providers_settings_builder_ajax_' . $task . '_' . $this->core->slug,
\wp_send_json_success( $data );
\wp_send_json_error( $error );
* Display content inside the panel sidebar area.
public function display_sidebar() {
if ( ! empty( $this->form_data['id'] ) && Status::init( $this->core->slug )->is_ready( $this->form_data['id'] ) ) {
$configured = 'configured';
'wpforms-panel-sidebar-section',
'wpforms-panel-sidebar-section-' . $this->core->slug,
<a href="#" class="<?php echo \esc_attr( \implode( ' ', $classes ) ); ?>"
data-section="<?php echo \esc_attr( $this->core->slug ); ?>">
<img src="<?php echo \esc_url( $this->core->icon ); ?>">
<?php echo \esc_html( $this->core->name ); ?>
<i class="fa fa-angle-right wpforms-toggle-arrow"></i>
<?php if ( ! empty( $configured ) ) : ?>
<i class="fa fa-check-circle-o"></i>
* Wrap the builder section content with the required (for tabs switching) markup.
public function display_content() {
<div class="wpforms-panel-content-section wpforms-builder-provider wpforms-panel-content-section-<?php echo \esc_attr( $this->core->slug ); ?>" id="<?php echo \esc_attr( $this->core->slug ); ?>-provider" data-provider="<?php echo \esc_attr( $this->core->slug ); ?>">
<!-- Provider content goes here. -->
$this->display_content_header();
$form_id = ! empty( $this->form_data['id'] ) ? $this->form_data['id'] : '';
self::display_content_default_screen(
Status::init( $this->core->slug )->is_ready( $form_id ),
$this->display_lock_field();
<div class="wpforms-builder-provider-body">
<div class="wpforms-provider-connections-wrap wpforms-clear">
<div class="wpforms-builder-provider-connections"></div>
* Display provider default screen.
* @param bool $is_connected True if connections are configured.
* @param string $slug Provider slug.
* @param string $name Provider name.
* @param string $icon Provider icon.
public static function display_content_default_screen( $is_connected, $slug, $name, $icon ) {
// Hide provider default settings screen when it's already connected.
$class = $is_connected ? ' wpforms-hidden' : '';
<div class="wpforms-builder-provider-connections-default<?php echo esc_attr( $class ); ?>">
<img src="<?php echo esc_url( $icon ); ?>">
<div class="wpforms-builder-provider-settings-default-content">
* Allows developers to change the default content of the provider's settings default screen.
* @param string $content Content of the provider's settings default screen.
echo apply_filters( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
"wpforms_providers_provider_settings_formbuilder_display_content_default_screen_{$slug}",
sprintf( /* translators: %s - provider name. */
'<p>' . esc_html__( 'Get the most out of WPForms — use it with an active %s account.', 'wpforms-lite' ) . '</p>',
* Display the lock field.
protected function display_lock_field() {
if ( ! $this->is_lock_field_required( $this->core->slug ) ) {
<input type="hidden" class="wpforms-builder-provider-connections-save-lock" value="1" name="providers[<?php echo esc_attr( $this->core->slug ); ?>][__lock__]">
* Section content header.
protected function display_content_header() {
$is_configured = Status::init( $this->core->slug )->is_configured();
<div class="wpforms-builder-provider-title wpforms-panel-content-section-title">
<?php echo \esc_html( $this->core->name ); ?>
<span class="wpforms-builder-provider-title-spinner">
<i class="wpforms-loading-spinner wpforms-loading-md wpforms-loading-inline"></i>
<button class="wpforms-builder-provider-title-add js-wpforms-builder-provider-connection-add <?php echo $is_configured ? '' : 'hidden'; ?>"
data-form_id="<?php echo \absint( $_GET['form_id'] ); ?>"
data-provider="<?php echo \esc_attr( $this->core->slug ); ?>">
<?php \esc_html_e( 'Add New Connection', 'wpforms-lite' ); ?>