Hi @hbna,
Trust you are doing good and thank you for reaching out to us.
Please try the following code snippet, I hope that helps.
add_action( 'wp_footer', function(){
global $post;
if ( is_a( $post, 'WP_Post' ) && !has_shortcode( $post->post_content, 'forminator_form' ) ) {
return;
}
?>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var hidden = '';
$("#forminator-module-361 #forminator-field-text-2").keyup(function (e) {
var field_value = $(this).val();
field_value = field_value.replace(/ /g, '');
var field_length = field_value.length;
var m = 0;
var arr = field_value.split('');
var field_newval = "";
if (arr.length > 0) {
for (var m = 0; m < arr.length; m++) {
if (m >= 0 && m <= 4) {
field_newval = field_newval + arr[m].replace(/[0-9]/g, "*");
} else {
field_newval = field_newval + arr[m];
}
}
}
hidden = hidden+e.key;
$("#forminator-module-361 #hidden-1").val(hidden);
$("#forminator-module-361 #forminator-field-text-2").val(field_newval);
});
});
</script>
<?php
});
Please note, you need to update Form ID and Feild ID according to your code at #forminator-module-361 #forminator-field-text-2 on the above code.
If we mask the value on input fields, it will save as masked in the database. So, as a solution, the above snippet populates the unmasked value on a hidden field. Please update #forminator-module-361 #hidden-1 from the code with a hidden field from your form.
You can add the code using a mu-plugin, please find more details here: https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins
Please test the code on your dev/staging environment and feel free to get back to us if you need any clarification.
Kind Regards,
Nebu John
Thread Starter
hbna
(@hbna)
Where do I find the form ID and the Field ID?
Thread Starter
hbna
(@hbna)
and where do I use this? Did you forget the <?php at the beginning?
Hi @hbna
Where do I find the form ID and the Field ID?
The form ID is a number that you can see e.g. in URL when editing the form or, even simpler, in form shortcode.
The field ID is the little text in curly brackets under the filed name – you would see that when editing the form.
Let’s say the form ID is 54321 (taken from form shortcode) and the field ID is “{text-5}“. You would need to adjust these in shared code
#forminator-module-361 #forminator-field-text-2
accordingly to
#forminator-module-54321 #forminator-field-text-5
and where do I use this? Did you forget the <?php at the beginning?
You can use the code in your theme’s functions.php file but I’d only recommend this is you are using your own custom theme or a child theme. In this case you can add it at the end of the file and the PHP opening tag is not missing – use the code “as is”.
Or you can add it as MU plugin as follows:
– create an empty file with a .php extension (e.g. “forminator-input-ss-masking.php”)
– put the PHP opening tag in the very first line
<?php
– put the shared code below it (with necessary adjustments described earlier)
– save the file and upload it to the “/wp-content/mu-plugins” folder of your site’s WordPress installation.
Kind regards,
Adam
Thread Starter
hbna
(@hbna)
My form id is 19443 and my field id is text-15. So I changed the code below and put it in the mu-plugins folder and it does not work.
<?php
add_action( 'wp_footer', function(){
global $post;
if ( is_a( $post, 'WP_Post' ) && !has_shortcode( $post->post_content, 'forminator_form' ) ) {
return;
}
?>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var hidden = '';
$("#forminator-module-19443 #forminator-field-text-15").keyup(function (e) {
var field_value = $(this).val();
field_value = field_value.replace(/ /g, '');
var field_length = field_value.length;
var m = 0;
var arr = field_value.split('');
var field_newval = "";
if (arr.length > 0) {
for (var m = 0; m < arr.length; m++) {
if (m >= 0 && m <= 4) {
field_newval = field_newval + arr[m].replace(/[0-9]/g, "*");
} else {
field_newval = field_newval + arr[m];
}
}
}
hidden = hidden+e.key;
$("#forminator-module-19443 #hidden-1").val(hidden);
$("#forminator-module-19443 #forminator-field-text-15").val(field_newval);
});
});
</script>
<?php
});
Hi @hbna,
I could notice issues with the given code. Could you please replace the given code with the following snippet shared and check whether that helps?
https://gist.github.com/wpmudev-sls/08029c5db322cc717766abaf3b8fb480
Once the code is added as a mu-plugins, you’ll have to add “password-field” as a class name to the “Input” field where you want to mask.
Screenshot:
Screenshot at 17:31:48.png
I gave a quick test and it does work when tested. Please check and see whether the above helps. Looking forward to your respnose.
Kind Regards,
Nithin
Thread Starter
hbna
(@hbna)
Ok it is now masking the field like *****. Now my question is if that new code writes the field to a hidden field so the value goes into the database?
Thread Starter
hbna
(@hbna)
In addition, I have set the field to have 9 characters and when I refresh the page, the field defaults to 9 * like *********. Shouldn’t the field be empty by default?
Hi @hbna
Now my question is if that new code writes the field to a hidden field so the value goes into the database?
This new code only changes the type of the field from “text” to “password”. It’s related to HTML specification and code doesn’t affect form in any other way. It doesn’t use hidden field to store that data, it only masks it “visually” on front-end.
The value will be saved in DB in open text in the very same field its put into. So if your SSN field is the text-15 field and you submit the form, then check submission (on Forminator -> Submissions page) and SSN will be saved in that text-15 field.
In addition, I have set the field to have 9 characters and when I refresh the page, the field defaults to 9 * like *********. Shouldn’t the field be empty by default?
It should be empty.
Did you actually replace the previous code with the new one or did you only add the new one (and kept the previous one)?
Is there any cache on site or server?
Is the same happening if you load the page with the form in browser’s “incognito” tab?
Kind regards,
Adam
Thread Starter
hbna
(@hbna)
looks good on the live site. Also – Is there a script I can add to this that will only accept numeric values and if the user tries to enter a letter an alert will appear. In addition, when this group is duplicated, I’d like that same alert to appear with the new SSN field. My page I’m referring to is: https://www.heritagebankna.com/new-cd-account-information-personal/ and its on step 3. I have a javascript on the page right now with an alert but it only works on the first SSN field
Hi @hbna,
I hope you are doing well today!
I checked the mentioned page on step 3 and could see that it is working well with the first and other SSN fields added.
https://prnt.sc/gO9rFGePFgAM
https://prnt.sc/RSbFTpk_lwQR
Kind regards,
Zafer
Hello @hbna ,
We haven’t heard from you for over 2 weeks now, so it seems that you don’t have more questions for us.
Feel free to re-open this ticket if needed.
Kind regards
Kasia
