namespace WPForms\Forms\Fields\Pagebreak;
use WPForms\Forms\Fields\Traits\ProField as ProFieldTrait;
class Field extends WPForms_Field {
* Default indicator color.
private const DEFAULT_INDICATOR_COLOR = [
* Primary class constructor.
// Define field type information.
$this->name = esc_html__( 'Page Break', 'wpforms-lite' );
$this->keywords = esc_html__( 'progress bar, multi step, multi part', 'wpforms-lite' );
$this->type = 'pagebreak';
$this->icon = 'fa-files-o';
$this->allow_read_only = false;
protected function hooks() {
add_filter( 'wpforms_field_preview_class', [ $this, 'preview_field_class' ], 10, 2 );
add_filter( 'wpforms_field_preview_display_duplicate_button', [ $this, 'field_display_duplicate_button' ], 10, 2 );
add_filter( 'wpforms_field_new_display_duplicate_button', [ $this, 'field_display_duplicate_button' ], 10, 2 );
* Field options panel inside the builder.
* @param array $field Field data.
public function field_options( $field ) {
$position = ! empty( $field['position'] ) ? esc_attr( $field['position'] ) : '';
$position_class = ! empty( $field['position'] ) ? 'wpforms-pagebreak-' . $position : '';
$this->field_options_basic( $field, $position, $position_class );
$this->field_options_advanced( $field, $position, $position_class );
* Advanced field options panel inside the builder.
* @param array $field Field data.
* @param string $position Position.
* @param string $position_class Position CSS class.
private function field_options_basic( array $field, string $position, string $position_class ): void {
// Hidden field indicating the position.
'class' => $position_class,
'after_title' => $this->get_field_options_notice(),
$this->field_options_basic_top( $field, $position );
// Page Title, don't display for bottom page breaks.
if ( $position !== 'bottom' ) {
$lbl = $this->field_element(
'value' => esc_html__( 'Page Title', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Enter text for the page title.', 'wpforms-lite' ),
$fld = $this->field_element(
'value' => ! empty( $field['title'] ) ? esc_attr( $field['title'] ) : '',
$indicator = ! empty( $field['indicator'] ) ? esc_attr( $field['indicator'] ) : 'progress';
'content' => $lbl . $fld,
'class' => $indicator === 'none' ? 'wpforms-hidden' : '',
if ( empty( $position ) ) {
$lbl = $this->field_element(
'value' => esc_html__( 'Next Label', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Enter text for Next page navigation button.', 'wpforms-lite' ),
$fld = $this->field_element(
'value' => ! empty( $field['next'] ) ? esc_attr( $field['next'] ) : esc_html__( 'Next', 'wpforms-lite' ),
'content' => $lbl . $fld,
// Options are not available to top page breaks.
if ( $position !== 'top' ) {
// Previous button toggle.
$fld = $this->field_element(
// Backward compatibility for forms that were created before the toggle was added.
'value' => ! empty( $field['prev_toggle'] ) || ! empty( $field['prev'] ),
'desc' => esc_html__( 'Display Previous', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Toggle displaying the Previous page navigation button.', 'wpforms-lite' ),
// Previous button label.
$lbl = $this->field_element(
'value' => esc_html__( 'Previous Label', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Enter text for Previous page navigation button.', 'wpforms-lite' ),
$fld = $this->field_element(
'value' => ! empty( $field['prev'] ) ? esc_attr( $field['prev'] ) : '',
'content' => $lbl . $fld,
'class' => empty( $field['prev_toggle'] ) ? 'wpforms-hidden' : '',
* Generate the field UI for progress text configuration within a form.
* @param array $field The field data used to generate the progress text UI elements.
private function field_progress_text( array $field ): void {
$lbl = $this->field_element(
'slug' => 'progress_text',
'value' => esc_html__( 'Progress Text', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Enter text for the progress indicator.', 'wpforms-lite' ),
$fld = $this->field_element(
'slug' => 'progress_text',
'value' => ! empty( $field['progress_text'] ) ? esc_html( $field['progress_text'] ) : 'Step {current_page} of {last_page}',
'after' => esc_html__( 'Enter text to show the user\'s progress. You can use {current_page} and {last_page} to indicate the current and last steps.', 'wpforms-lite' ),
$indicator = ! empty( $field['indicator'] ) ? esc_attr( $field['indicator'] ) : 'progress';
'slug' => 'progress_text',
'content' => $lbl . $fld,
'class' => $indicator !== 'progress' ? 'wpforms-hidden' : '', // Hide if the indicator is not set to progress.
* Field options panel inside the builder.
* @param array $field Field data.
* @param string $position Position.
private function field_options_basic_top( array $field, string $position ): void {
// Options specific to the top pagebreak.
if ( $position !== 'top' ) {
'progress' => esc_html__( 'Progress Bar', 'wpforms-lite' ),
'circles' => esc_html__( 'Circles', 'wpforms-lite' ),
'connector' => esc_html__( 'Connector', 'wpforms-lite' ),
'none' => esc_html__( 'None', 'wpforms-lite' ),
* Filter the available Pagebreak Indicator themes.
* @param array $themes Available themes.
$themes = apply_filters( 'wpforms_pagebreak_indicator_themes', $themes ); // phpcs:ignore WPForms.PHP.ValidateHooks.InvalidHookName
$lbl = $this->field_element(
'value' => esc_html__( 'Progress Indicator', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Select theme for Page Indicator which is displayed at the top of the form.', 'wpforms-lite' ),
$indicator = ! empty( $field['indicator'] ) ? esc_attr( $field['indicator'] ) : 'progress';
$fld = $this->field_element(
'class' => 'wpforms-pagebreak-progress-indicator',
'content' => $lbl . $fld,
// Indicator color picker.
$lbl = $this->field_element(
'slug' => 'indicator_color',
'value' => esc_html__( 'Page Indicator Color', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Select the primary color for the Page Indicator theme.', 'wpforms-lite' ),
$indicator_color = isset( $field['indicator_color'] ) ? wpforms_sanitize_hex_color( $field['indicator_color'] ) : self::get_default_indicator_color();
$fld = $this->field_element(
'slug' => 'indicator_color',
'value' => $indicator_color,
'fallback-color' => $indicator_color,
$indicator_color_classes = [ 'color-picker-row' ];
if ( $indicator === 'none' ) {
$indicator_color_classes[] = 'wpforms-hidden';
'slug' => 'indicator_color',
'content' => $lbl . $fld,
'class' => $indicator_color_classes,
$this->field_progress_text( $field );
* Advanced field options panel inside the builder.
* @param array $field Field data.
* @param string $position Position.
* @param string $position_class Position CSS class.
private function field_options_advanced( array $field, string $position, string $position_class ): void {
if ( $position === 'bottom' ) {
* Advanced field options.
'class' => $position_class,
// Navigation alignment, only available to the top.
if ( $position === 'top' ) {
$lbl = $this->field_element(
'value' => esc_html__( 'Page Navigation Alignment', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Select the alignment for the Next/Previous page navigation buttons', 'wpforms-lite' ),
$fld = $this->field_element(
'value' => ! empty( $field['nav_align'] ) ? esc_attr( $field['nav_align'] ) : '',
'left' => esc_html__( 'Left', 'wpforms-lite' ),
'right' => esc_html__( 'Right', 'wpforms-lite' ),
'' => esc_html__( 'Center', 'wpforms-lite' ),
'split' => esc_html__( 'Split', 'wpforms-lite' ),
'content' => $lbl . $fld,
// Scroll animation toggle.
$fld = $this->field_element(
'slug' => 'scroll_disabled',
'value' => ! empty( $field['scroll_disabled'] ),
'desc' => esc_html__( 'Disable Scroll Animation', 'wpforms-lite' ),
'tooltip' => esc_html__( 'By default, a user\'s view is pulled to the top of each form page. Set to ON to disable this animation.', 'wpforms-lite' ),
'slug' => 'scroll_disabled',