namespace WPForms\Forms\Fields\Phone;
use WPForms\Forms\Fields\Traits\ProField as ProFieldTrait;
class Field extends WPForms_Field {
* International Telephone Input library CSS.
public const INTL_VERSION = '25.11.3';
* Primary class constructor.
// Define field type information.
$this->name = esc_html__( 'Phone', 'wpforms-lite' );
$this->keywords = esc_html__( 'telephone, mobile, cell', 'wpforms-lite' );
$this->icon = 'fa-phone';
$this->default_settings = [
protected function hooks() {
* Field options panel inside the builder.
* @param array $field Field data.
public function field_options( $field ) {
'after_title' => $this->get_field_options_notice(),
$this->field_option( 'label', $field );
$lbl = $this->field_element(
'value' => esc_html__( 'Format', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Select format for the phone form field', 'wpforms-lite' ),
$fld = $this->field_element(
'value' => ! empty( $field['format'] ) ? esc_attr( $field['format'] ) : 'smart',
'smart' => esc_html__( 'Smart', 'wpforms-lite' ),
'us' => esc_html__( 'US', 'wpforms-lite' ),
'international' => esc_html__( 'International', 'wpforms-lite' ),
'content' => $lbl . $fld,
$this->field_element( 'row', $field, $args );
$this->field_option( 'description', $field );
$this->field_option( 'required', $field );
$this->field_option( 'basic-options', $field, $args );
* Advanced field options.
$this->field_option( 'advanced-options', $field, $args );
$this->field_option( 'size', $field );
$this->field_option( 'placeholder', $field );
$this->field_option( 'default_value', $field );
$this->field_option( 'css', $field );
$this->field_option( 'label_hide', $field );
$this->field_option( 'advanced-options', $field, $args );
* Field preview inside the builder.
* @param array $field Field data.
public function field_preview( $field ) {
$placeholder = ! empty( $field['placeholder'] ) ? $field['placeholder'] : '';
$default_value = ! empty( $field['default_value'] ) ? $field['default_value'] : '';
$format = ! empty( $field['format'] ) ? $field['format'] : 'smart';
$size = ! empty( $field['size'] ) ? $field['size'] : 'medium';
$this->field_preview_option(
'label_badge' => $this->get_field_preview_badge(),
// Primary input inside container for Smart format preview.
'<div class="wpforms-field-phone-input-container" data-format="%1$s">
<input type="text" placeholder="%2$s" value="%3$s" class="primary-input wpforms-field-%4$s" readonly>
<div class="wpforms-field-phone-country-container">
<div class="wpforms-field-phone-flag"></div>
<div class="wpforms-field-phone-arrow"></div>
esc_attr( $placeholder ),
esc_attr( $default_value ),
$this->field_preview_option( 'description', $field );
* @param string $option Option name.
* @param array $field Field data.
* @param array $args Additional arguments.
* @param bool $do_echo Echo or return.
public function field_preview_option( $option, $field, $args = [], $do_echo = true ) { // phpcs:ignore Universal.NamingConventions.NoReservedKeywordParameterNames.echoFound
// Skip preview option for the editor.
if ( wpforms_is_editor_page() ) {
parent::field_preview_option( $option, $field, $args, $do_echo );
* Field display on the form front-end.
* @param array $field Field data and settings.
* @param array $deprecated Deprecated field attributes. Use field properties.
* @param array $form_data Form data and settings.
public function field_display( $field, $deprecated, $form_data ) {