Ability to mask Elementor Pro Form fields w/ custom pattern

form-mask.php

<?php
/***
 * Add to custom plugins or functions.php (i.e. use include)
 * Allows for custom patterns like: https://www.html5pattern.com/
 * See Git issue: https://github.com/elementor/elementor/issues/8587
 */

namespace ElementorPro\Modules\Forms\Classes;

use Elementor\Repeater;
use ElementorPro\Base\Base_Widget;
use ElementorPro\Modules\Forms\Module;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

class Elementor_Forms_Patterns_Validation {

	public $allowed_fields = [
		'text',
		'number',
		'date',
		'email',
		'url',
		'password',
	];

	public function __construct() {
		// Add pattern attribute to form field render
		add_filter( 'elementor_pro/forms/render/item', [ $this, 'maybe_add_pattern' ], 10, 3 );

		add_action( 'elementor/element/form/section_form_fields/before_section_end', [ $this, 'add_pattern_field_control' ], 100, 2 );
	}

	/**
	 * add_pattern_field_control
	 * @param $element
	 * @param $args
	 */
	public function add_pattern_field_control( $element, $args ) {
		$elementor = \Elementor\Plugin::instance();
		$control_data = $elementor->controls_manager->get_control_from_stack( $element->get_name(), 'form_fields' );

		if ( is_wp_error( $control_data ) ) {
			return;
		}
		// create a new pattern control as a repeater field
		$tmp = new Repeater();
		$tmp->add_control(
			'field_patten',
			[
				'label' => 'Pattern',
				'inner_tab' => 'form_fields_advanced_tab',
				'tab' => 'content',
				'tabs_wrapper' => 'form_fields_tabs',
				'type' => 'text',
				'conditions' => [
					'terms' => [
						[
							'name' => 'field_type',
							'operator' => 'in',
							'value' => $this->allowed_fields,
						],
					],
				],
			]
		);

		$pattern_field = $tmp->get_controls();
		$pattern_field = $pattern_field['field_patten'];

		// insert new pattern field in advanced tab before field ID control
		$new_order = [];
		foreach ( $control_data['fields'] as $field_key => $field ) {
			if ( 'custom_id' === $field['name'] ) {
				$new_order['field_patten'] = $pattern_field;
			}
			$new_order[ $field_key ] = $field;
		}
		$control_data['fields'] = $new_order;

		$element->update_control( 'form_fields', $control_data );
	}

	public function maybe_add_pattern( $field, $field_index, $form_widget ) {
		if ( ! empty( $field['field_patten'] ) && in_array( $field['field_type'], $this->allowed_fields ) ) {

			$form_widget->add_render_attribute( 'input' . $field_index,
				[
					// Add pattern attribute
					'pattern' => $field['field_patten'],
					// Add pattern to validation message
					'oninvalid' => 'this.setCustomValidity( "Please match the requested format \"' . $field['field_patten'] . '\" ")',
					// Clear validation message when needed
					'oninput' => 'this.setCustomValidity("")',
				]
			);
		}
		return $field;
	}
}
new Elementor_Forms_Patterns_Validation();