Hello @paconarud16
You can add the following code as a MU-plugin.
https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins
Need to change the form ID and field ID in the code, if different.
Also, the form should not be loaded via Ajax.
If you do not want to change the placeholder then it’ll be better to remove this line number_field.attr( 'placeholder', 'E.g. 34 190 894 983 (ABN)' );
After the implementation users can enter 9 digits but the last digit will be masked with an * like this 12345678*
<?php
/**
* Plugin Name: [Forminator Pro] - Mask form input fields with jQuery Mask
* Plugin URI: https://premium.wpmudev.org/
* Description: Add support for jQuery Mask to mask form input fields (as of 1.11.4)
* Author: Alessandro Kaounas & Prashant Singh @ WPMUDEV
* Author URI: https://premium.wpmudev.org/
* Task: 0/11289012348292/1165769246258511
* License: GPLv2 or later
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// No need to do anything if the request is via WP-CLI.
if ( defined( 'WP_CLI' ) && WP_CLI ) {
return;
}
if ( ! class_exists( 'WPMUDEV_Forminator_Mask_Form_Input_Fields' ) ) {
class WPMUDEV_Forminator_Mask_Form_Input_Fields {
private static $_instance = null;
public static function get_instance() {
if( is_null( self::$_instance ) ){
self::$_instance = new WPMUDEV_Forminator_Mask_Form_Input_Fields();
}
return self::$_instance;
}
private function __construct() {
if ( ! class_exists( 'Forminator' ) ) {
return;
}
$this->init();
}
private function init(){
global $post;
if ( is_a( $post, 'WP_Post' ) && ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
return;
}
// Include jQuery Mask Plugin
wp_register_script( 'forminator-jquery-mask-js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'forminator-jquery-mask-js' );
add_action( 'wp_enqueue_scripts', function(){
add_action( 'forminator_before_form_render', function( $id ){
// User defined settings
$form_id = 361; // Form ID needs to be changed
$number_field = 'text-2'; // Field ID needs to be changed
if( $id != $form_id ){
return;
}
// Add JS code to page's footer
add_action( 'wp_footer', function() use ( $form_id, $number_field ){ ?>
<script type="text/javascript">
(function ($, document, window) {
"use strict";
(function () {
let doc = $(document),
form_id = <?php echo $form_id; ?>,
number_field = $('input#forminator-field-<?php echo $number_field; ?>');
// For non AJAX Forms
doc.ready(function() {
field_mask();
});
// For AJAX Forms
doc.on( 'response.success.load.forminator', function() {
doc.on( 'after.load.forminator', function(){
field_mask();
});
});
function field_mask(){
//number_field.val('');
var options = {
translation: {0: {pattern: /[0-9*]/}},
onKeyPress: function(val, evt, currField, options)
{
let newVal = val.replace(/./g, (m, o, str) => (8 !== o ? m : '*'));
currField.val(newVal);
}
};
number_field.mask( '000000000', options );
number_field.attr( 'placeholder', 'E.g. 34 190 894 983 (ABN)' );
}
})();
}(jQuery, document, window));
</script>
<?php }, 999 );
});
});
}
}
if ( ! function_exists( 'wpmudev_forminator_mask_form_input_fields' ) ) {
function wpmudev_forminator_mask_form_input_fields() {
return WPMUDEV_Forminator_Mask_Form_Input_Fields::get_instance();
};
add_action( 'plugins_loaded', 'wpmudev_forminator_mask_form_input_fields', 99 );
}
}
Let us know how that goes!
Thank you,
Dimitris
