• Resolved Michael

    (@bazzarello)


    Hello everything is fine? First of all, congratulations on the plugin!

    Is there a way in the plugin itself to create a mask for the ZIP code field?
    For example, I would like the website visitor to fill in the ZIP code field with 8 characters (numbers only) and the message would reach me in the following format: 00000-000

    I researched some solutions on the internet but they are old, using snippet code. Is the current solution still this way? If so, what would be the best code to insert in this case?

    Thanks!

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi,

    I hope you’re well today!

    There’s currently no setting in Forminator for this and you’d still need some additional custom code for it.

    I’m not quite sure which code did you find but I’ve already asked our developers for advice on it.

    I’d appreciate some patience. Either me or one of my colleagues – we will update you here soon with more information on this.

    Best regards,
    Adam

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    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

    Thread Starter Michael

    (@bazzarello)

    Thank you for the quick response!

    I added the larger code in “functions.php”

    I created the php file formator-zip-mask.php in the /wp-content/mu-plugins folder and added the line.

    After I created the php file and added the line, an error appeared at the top of the site with the line that was added.

    What is the correct form of the code within this php file?

    when trying to enter just
    if ( 'forminator-module-1828' == e.target.id ) {
    the error appeared at the top of the website

    when trying to enter
    <?php if ( 'forminator-module-1828' == e.target.id ) { ?>
    the website went offline

    Sorry for my ignorance, I’m new to custom codes.

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    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

    Thread Starter Michael

    (@bazzarello)

    Hi, thanks for getting back to us.

    I added the “forminator-zip-mask.php” file to the wp-content/mu-plugins folder with the code and only changed the form number.

    When editing the form, the “Address” field was added and only the “Zip” item was enabled.

    But when testing on the frontend the mask didn’t work. And the message received on email was also not formatted.

    Do I need to do anything else when editing the form for it to work?

    Thanks.

    Plugin Support Laura – WPMU DEV Support

    (@wpmudevsupport3)

    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

    Thread Starter Michael

    (@bazzarello)

    Hello Laura,

    Yes that’s right. In my case, the code looked like this below. Is correct?

    <?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-1828' == 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 );
    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    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

    Thread Starter Michael

    (@bazzarello)

    Hello Kind,

    Thanks for the feedback!

    Removing the code didn’t work either.

    Just to reinforce the case, the objective is that when the visitor enters the ZIP code field, the formatting automatically adds a dash (-) between the first 5 digits and last 3 digits. In other words, if the person types “12345678”, the formatting would already appear as “12345-678”.

    Plugin Support Zafer – WPMU DEV Support

    (@wpmudevsupport15)

    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

    Thread Starter Michael

    (@bazzarello)

    Hello Zafer,

    Thank you for your feedback and I hope you are well!

    I added the new code, but it didn’t work. I am uploading (below) screenshots of the dashboard and form. Did I forget to do something?

    Thanks

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    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

    Thread Starter Michael

    (@bazzarello)

    Hello everything is fine?

    I discovered the problem. The “Load form using AJAX” option was enabled and this prevented the code from working. After disabling this option it worked correctly.

    Thank you for your support!!!

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    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

Viewing 14 replies - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.