Mask for zip code

Hi @bazzarello

I just got response from our Second Line Support on this.

Would you, please, add following code to the site as Must-Use plugin?:

<?php 

function wpmudev_masked_input_zip_field() {
    global $post;
    if ( is_a( $post, 'WP_Post' ) && ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
        return;
    }
    ?>
    <script type='text/javascript'>
    jQuery(document).ready(function($) {
        setTimeout(function() {
			$('.forminator-custom-form').trigger('after.load.forminator');
        }, 500);

        $(document).on('after.load.forminator', function(e, form_id) {
            if ( 'forminator-module-3010' == e.target.id ) {
                $.validator.addMethod("zipvalid", function (value, element) {
                    if ( /(\d{5})-(\d{3})/.test(value) ) {
                        return true;
                    } else {
                        return false;
                    }
                    return true;
                },"Please enter valid Zip code.");
                $( "#address-1-zip .forminator-input" ).attr( "zipvalid", "zipvalid" );

                $('#address-1-zip .forminator-input').on('input', function() {
                    var number = $(this).val().replace(/[^\d]/g, '')
                    if ( number.length == 8 ) {
                        number = number.replace(/(\d{5})(\d{3})/, "$1-$2");
                    }
                    $(this).val(number)
                });
            }
        });
    });
    </script>
    <?php
}
add_action( 'wp_footer', 'wpmudev_masked_input_zip_field', 9999 );

To do so:

1. create an empty file with a .php extension (e.g. “forminator-zip-mask.php”) in the “/wp-content/mu-plugins” folder of your site’s WordPress install

2. copy and paste code into it

3. in this line of the code

if ( 'forminator-module-3010' == e.target.id ) {

replace number 3010 with a number that’s an ID of your form (form ID is the number you see in form’s shortcode)

4. save the file and clear all cache on site/server.

It should then work out of the box.

Best regards,
Adam

Hi @bazzarello

Thank you for response!

No, please do not “slice” that code this way. The entire code “as is” (exactly as I shared it) needs to be together in one place so please

1. remove that code from “functions.php”
2. then open your .php file in /wp-content/mu-plugins folder for editing
3. remove the code that you put there
4. and instead copy-paste entire code from my previous post into that file

Once it’s there, just find that line in the code in that file

if ( 'forminator-module-3010' == e.target.id ) {

and replace number 3010 with your form ID.

Then save the file as is. Don’t split it between that file and functions.php, keep the entire code that I shared in that custom php file in the /wp-content/mu-plugins folder.

Kind regards,
Adam

Hi @bazzarello,

Hope this message finds you well.

Did you replace the form ID on this line?

if ( 'forminator-module-3010' == e.target.id ) {

You will find your Form ID when editing the form and on the link:

https://prnt.sc/VBPOxcRc7B-N

You need to replace 3010 with it, let us know.

Best regards,
Laura

Hi @bazzarello

Thanks for response!

Yes, this appears correct.

Can you try one more thing, please? Try removing this part of the code

 if ( is_a( $post, 'WP_Post' ) && ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
        return;
    }

Once done, make sure to fully purge all cache on site/server (if there is any) and see if it works this way.

Kind regards,
Adam

Hi @bazzarello,

I hope you are doing well today!

Please try the following code snippet and let us know if it helps.

<?php 
function wpmudev_masked_input_zip_field() {
    global $post;
    if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'forminator_form' ) ) {
        ?>
        <script type='text/javascript'>
        jQuery(document).ready(function($) {
            setTimeout(function() {
                $('.forminator-custom-form').trigger('after.load.forminator');
            }, 500);
            $(document).on('after.load.forminator', function(e, form_id) {
                if ( 'forminator-module-1828' == e.target.id ) {
               $('#address-1-zip .forminator-input').on('input', function() {
                        // Remove non-digit characters from the input.
                        var number = $(this).val().replace(/[^\d]/g, '');
                        // Automatically insert a dash between the 5th and 6th digits as the user types.
                        if ( number.length >= 5 ) {
                            number = number.substring(0, 5) + "-" + number.substring(5, 8);
                        }
                        $(this).val(number);
                    });
                }
            });
        });
        </script>
        <?php
    }
}
add_action( 'wp_footer', 'wpmudev_masked_input_zip_field', 9999 );

Kind regards,
Zafer

Hi @bazzarello

Thank you for response!

Based on your screenshots, code appears to be added correctly.

I tested the code on my end and it works perfectly fine, assuming that the form ID is correct and the Address field is actually “address-1” (if it’s different, it needs to be adjusted in the code).

I admit I’m not sure why it’s not working for you but if we can’t visit the example page in question with the form on it, it may be difficult to find out.

Therefore, could you check one more thing?

– open browser console (here is how)
– and then reload the page with the form
– see if there are any errors reported in console and if yes – let us know what are they
– then try filling-in the zip field and see if any new errors show up in browser console – let us know about them too

Kind regards,
Adam

Hi @bazzarello

You are welcome and we are happy to hear it is working now, it is interesting as this line

setTimeout(function() {
                $('.forminator-custom-form').trigger('after.load.forminator');
            }, 500);

Should trigger the ajax event anyway, but if the form is working properly without ajax rendering that’s fine as well, if you run into any issues feel free to ping us.

I am marking this as resolved for now.
Best Regards
Patrick Freitas