use WPForms\Admin\Education\Helpers;
* Output fields to be used on panels (settings etc.).
* @param string $option Field type.
* @param string $panel Panel name.
* @param string $field Field name.
* @param array $form_data Form data.
* @param string $label Label.
* @param array $args Arguments.
* @param bool $do_echo Output the result.
* @noinspection HtmlWrongAttributeValue
* @noinspection HtmlUnknownAttribute
function wpforms_panel_field( $option, $panel, $field, $form_data, $label, $args = [], $do_echo = true ): ?string { // phpcs:ignore Generic.Metrics.CyclomaticComplexity.MaxExceeded, Generic.Metrics.NestingLevel.MaxExceeded
if ( empty( $option ) || empty( $panel ) || empty( $field ) ) {
$panel = esc_attr( $panel );
$field = esc_attr( $field );
$panel_id = sanitize_html_class( $panel );
$parent = ! empty( $args['parent'] ) ? esc_attr( $args['parent'] ) : '';
$subsection = ! empty( $args['subsection'] ) ? esc_attr( $args['subsection'] ) : '';
$index = isset( $args['index'] ) ? esc_attr( $args['index'] ) : '';
$index = is_numeric( $index ) ? absint( $index ) : $index;
$label = ! empty( $label ) ? wp_kses( $label, [ 'span' => [ 'class' => [] ] ] ) : '';
$class = ! empty( $args['class'] ) ? wpforms_sanitize_classes( $args['class'] ) : '';
$input_class = ! empty( $args['input_class'] ) ? wpforms_sanitize_classes( $args['input_class'] ) : '';
$default = $args['default'] ?? '';
$placeholder = ! empty( $args['placeholder'] ) ? esc_attr( $args['placeholder'] ) : '';
$input_id = sprintf( 'wpforms-panel-field-%s-%s', sanitize_html_class( $panel_id ), sanitize_html_class( $field ) );
if ( ! empty( $args['input_id'] ) ) {
$input_id = esc_attr( $args['input_id'] );
// Sanitize the subsection only if it doesn't contain a connection ID tag.
if ( strpos( $subsection, '%connection_id%' ) === false ) {
$subsection = sanitize_html_class( $subsection );
if ( ! empty( $args['smarttags'] ) ) {
$type = ! empty( $args['smarttags']['type'] ) ? esc_attr( $args['smarttags']['type'] ) : 'fields';
$fields = ! empty( $args['smarttags']['fields'] ) ? esc_attr( $args['smarttags']['fields'] ) : '';
$is_repeater_allowed = ! empty( $args['smarttags']['allow-repeated-fields'] ) ? esc_attr( $args['smarttags']['allow-repeated-fields'] ) : '';
$location = ! empty( $args['location'] ) ? esc_attr( $args['location'] ) : '';
'allow-repeated-fields' => $is_repeater_allowed,
// BC for old addons that use the old smart tags system.
$smarttags_toggle = sprintf(
'<a href="#" class="toggle-smart-tag-display toggle-unfoldable-cont" data-location="%5$s" data-type="%1$s" data-fields="%2$s" data-allow-repeated-fields="%3$s">
<i class="fa fa-tags"></i><span>%4$s</span>
esc_attr( $is_repeater_allowed ),
esc_html__( 'Show Smart Tags', 'wpforms-lite' ),
if ( ! empty( $args['pro_badge'] ) ) {
$label .= Helpers::get_badge( 'Pro', 'sm', 'inline', 'silver' );
// Check if we should store values in a parent array.
if ( ! empty( $parent ) ) {
if ( $subsection && ! wpforms_is_empty_string( $index ) ) {
$field_name = sprintf( '%s[%s][%s][%s][%s]', $parent, $panel, $subsection, $index, $field );
$value = $form_data[ $parent ][ $panel ][ $subsection ][ $index ][ $field ] ?? $default;
$input_id = sprintf( 'wpforms-panel-field-%s-%s-%s-%s', sanitize_html_class( $panel_id ), $subsection, sanitize_html_class( $index ), sanitize_html_class( $field ) );
} elseif ( ! empty( $subsection ) ) {
$field_name = sprintf( '%s[%s][%s][%s]', $parent, $panel, $subsection, $field );
$value = $form_data[ $parent ][ $panel ][ $subsection ][ $field ] ?? $default;
$input_id = sprintf( 'wpforms-panel-field-%s-%s-%s', sanitize_html_class( $panel_id ), $subsection, sanitize_html_class( $field ) );
$field_name = sprintf( '%s[%s][%s]', $parent, $panel, $field );
$value = $form_data[ $parent ][ $panel ][ $field ] ?? $default;
$field_name = sprintf( '%s[%s]', $panel, $field );
$value = $form_data[ $panel ][ $field ] ?? $default;
if ( isset( $args['field_name'] ) ) {
$field_name = $args['field_name'];
if ( isset( $args['value'] ) ) {
// Check for data attributes.
if ( ! empty( $args['data'] ) ) {
foreach ( $args['data'] as $key => $val ) {
if ( is_array( $val ) ) {
$val = wp_json_encode( $val );
$data_attr .= ' data-' . $key . '=\'' . $val . '\'';
// Check for readonly inputs.
if ( ! empty( $args['readonly'] ) ) {
$data_attr .= 'readonly';
// Determine what field type to output.
// Handle min and max attributes for number fields.
if ( ! empty( $args['type'] ) && $args['type'] === 'number' ) {
if ( isset( $args['min'] ) && is_int( $args['min'] ) ) {
$data_attr .= sprintf( ' min="%1$d" oninput="validity.valid||(value=\'%1$d\');" ', esc_attr( $args['min'] ) );
if ( isset( $args['max'] ) && is_int( $args['max'] ) ) {
$data_attr .= sprintf( ' max="%1$d" oninput="validity.valid||(value=\'%1$d\');" ', esc_attr( $args['max'] ) );
'<input type="%s" id="%s" name="%s" value="%s" placeholder="%s" class="%s" %s>',
! empty( $args['type'] ) ? esc_attr( $args['type'] ) : 'text',
$output = wpforms_panel_field_image_upload_control(
'<textarea id="%s" name="%s" rows="%d" placeholder="%s" class="%s" %s>%s</textarea>',
! empty( $args['rows'] ) ? (int) $args['rows'] : '3',
$id = str_replace( '-', '_', $input_id );
$args['tinymce']['textarea_name'] = $field_name;
$args['tinymce']['teeny'] = true;
$args['tinymce'] = wp_parse_args(
'media_buttons' => false,
wp_editor( $value, $id, $args['tinymce'] );
$output = ob_get_clean();
'<input type="checkbox" id="%s" name="%s" value="1" class="%s" %s %s>',
checked( '1', $value, false ),
'<label for="%s" class="inline">%s',
if ( ! empty( $args['before_tooltip'] ) ) {
$output .= $args['before_tooltip'];
if ( ! empty( $args['tooltip'] ) ) {
$output .= sprintf( '<i class="fa fa-question-circle-o wpforms-help-tooltip" title="%s"></i>', esc_attr( $args['tooltip'] ) );
$toggle_args['input-class'] = $input_class;
$output = wpforms_panel_field_toggle_control( $toggle_args, $input_id, $field_name, $label, $value, $data_attr );
$options = $args['options'];
foreach ( $options as $key => $item ) {
if ( empty( $item['label'] ) ) {
$item_value = ! empty( $item['value'] ) ? $item['value'] : $key;
$output .= '<span class="row">';
if ( ! empty( $item['pre_label'] ) ) {
$output .= '<label>' . $item['pre_label'];
'<input type="radio" id="%s-%d" name="%s" value="%s" class="%s" %s %s>',
checked( $item_value, $value, false ),
if ( empty( $item['pre_label'] ) ) {
'<label for="%s-%d" class="inline">%s',
$output .= '<span class="wpforms-panel-field-radio-label">' . $item['label'] . '</span>';
if ( ! empty( $item['tooltip'] ) ) {
$output .= sprintf( '<i class="fa fa-question-circle-o wpforms-help-tooltip" title="%s"></i>', esc_attr( $item['tooltip'] ) );
$output .= '</label></span>';
if ( ! empty( $output ) ) {
$output = '<div class="wpforms-panel-field-radio-container">' . $output . '</div>';
if ( empty( $args['options'] ) && empty( $args['field_map'] ) && empty( $args['multiple'] ) ) {
if ( ! empty( $args['field_map'] ) ) {
$available_fields = wpforms_get_form_fields( $form_data, $args['field_map'] );
if ( ! empty( $available_fields ) ) {
foreach ( $available_fields as $id => $available_field ) {
$options[ $id ] = ! empty( $available_field['label'] )
? esc_attr( $available_field['label'] )
: sprintf( /* translators: %d - field ID. */
esc_html__( 'Field #%d', 'wpforms-lite' ),
$input_class .= ' wpforms-field-map-select';
$data_attr .= ' data-field-map-allowed="' . implode( ' ', $args['field_map'] ) . '"';
if ( ! empty( $placeholder ) ) {
$data_attr .= ' data-field-map-placeholder="' . esc_attr( $placeholder ) . '"';
$options = $args['options'];
if ( array_key_exists( 'choicesjs', $args ) && is_array( $args['choicesjs'] ) ) {
$input_class .= ' choicesjs-select';
$data_attr .= ! empty( $args['choicesjs']['use_ajax'] ) ? ' data-choicesjs-use-ajax=1' : '';
$data_attr .= ! empty( $args['choicesjs']['callback_fn'] ) ? ' data-choicesjs-callback-fn="' . esc_attr( $args['choicesjs']['callback_fn'] ) . '"' : '';
if ( ! empty( $args['multiple'] ) ) {
$data_attr .= ' multiple';
'<select id="%s" name="%s" class="%s" %s>',
esc_attr( $input_class ),
if ( ! empty( $placeholder ) ) {
$output .= '<option value="">' . $placeholder . '</option>';
// This argument is used to disable some options, it takes an array of option values.
// For instance, if you want to disable options with value '1' and '2', you should pass array( '1', '2' ).
$disabled_options = ! empty( $args['disabled_options'] ) ? (array) $args['disabled_options'] : [];
foreach ( $options as $key => $item ) {
// If the option is disabled, we add the disabled attribute.
$disabled = in_array( $key, $disabled_options, true ) ? 'disabled' : '';
// Disabled options cannot be selected, so we bail early.
if ( ! empty( $disabled ) ) {
'<option value="%s" %s>%s</option>',
if ( is_array( $value ) ) {
$selected = in_array( $key, $value, true ) ? 'selected' : '';
$selected = selected( $key, $value, false );
'<option value="%s" %s>%s</option>',
$class .= ' wpforms-panel-field-colorpicker';
$input_class .= ' wpforms-color-picker';
$fallback_value = $args['data']['fallback-color'] ?? $value;
'<input type="text" id="%s" name="%s" value="%s" data-fallback-color="%s" class="%s" %s>',
esc_attr( $fallback_value ),
wpforms_sanitize_classes( $input_class ),
// Put the pieces together.
'<div id="%s-wrap" class="wpforms-panel-field %s %s">',
'wpforms-panel-field-' . sanitize_html_class( $option )
$field_open .= ! empty( $args['before'] ) ? $args['before'] : '';
if ( $option !== 'toggle' && $option !== 'checkbox' && ! empty( $label ) ) {
if ( ! empty( $args['tooltip'] ) ) {
$field_label .= sprintf( '<i class="fa fa-question-circle-o wpforms-help-tooltip" title="%s"></i>', esc_attr( $args['tooltip'] ) );
if ( ! empty( $args['after_tooltip'] ) ) {
$field_label .= $args['after_tooltip'];
// BC for old addons that use the old smart tags system.
if ( $smarttags_toggle && empty( $args['tinymce'] ) && strpos( $input_class, 'wpforms-smart-tags-enabled' ) === false ) {
$field_label .= $smarttags_toggle;
$field_label .= '</label>';
if ( ! empty( $args['after_label'] ) ) {
$field_label .= $args['after_label'];
$field_close .= ! empty( $args['after'] ) ? $args['after'] : '';
$field_close .= '</div>';
$output = $field_open . $field_label . $output . $field_close;
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
* It's like a regular checkbox but with a modern visual appearance.
* @param array $args Arguments array.
* @type bool $status If `true`, control will display the current status next to the toggle.
* @type string $status_on Status `On` text. By default, `On`.
* @type string $status_off Status `Off` text. By default, `Off`.
* @type bool $label_hide If `true`, then the label will not display.
* @type string $tooltip Tooltip text.
* @type string $input_class CSS class for the hidden `<input type=checkbox>`.
* @type string $control_class CSS class for the wrapper `<span>`.
* @param string $input_id Input ID.
* @param string $field_name Field name.
* @param string $label Label text. Can contain HTML to display additional badges.
* @param mixed $value Value.
* @param string $data_attr Attributes.
* @noinspection HtmlUnknownAttribute
function wpforms_panel_field_toggle_control( $args, $input_id, $field_name, $label, $value, $data_attr ): string { // phpcs:ignore Generic.Metrics.CyclomaticComplexity.TooHigh
$checked = checked( true, (bool) $value, false );
if ( ! empty( $args['status'] ) ) {
$status_on = ! empty( $args['status-on'] ) ? $args['status-on'] : esc_html__( 'On', 'wpforms-lite' );
$status_off = ! empty( $args['status-off'] ) ? $args['status-off'] : esc_html__( 'Off', 'wpforms-lite' );
class="wpforms-toggle-control-status"
esc_html( $value ? $status_on : $status_off )
$label_html = empty( $args['label-hide'] ) && ! empty( $label ) ?