Title: Mask for zip code
Last modified: April 27, 2024

---

# Mask for zip code

 *  Resolved [Michael](https://wordpress.org/support/users/bazzarello/)
 * (@bazzarello)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/mask-for-zip-code/)
 * 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 [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/)
 * (@wpmudev-support8)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17720171)
 * 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 [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/)
 * (@wpmudev-support8)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17720779)
 * Hi [@bazzarello](https://wordpress.org/support/users/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](https://wordpress.org/support/users/bazzarello/)
 * (@bazzarello)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17722351)
 * 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 [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/)
 * (@wpmudev-support8)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17723696)
 * Hi [@bazzarello](https://wordpress.org/support/users/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](https://wordpress.org/support/users/bazzarello/)
 * (@bazzarello)
 * [2 years ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17733058)
 * 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 [Williams – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport3/)
 * (@wpmudevsupport3)
 * [2 years ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17734078)
 * Hi [@bazzarello](https://wordpress.org/support/users/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](https://prnt.sc/VBPOxcRc7B-N)
 * You need to replace 3010 with it, let us know.
 * Best regards,
    Laura
 *  Thread Starter [Michael](https://wordpress.org/support/users/bazzarello/)
 * (@bazzarello)
 * [2 years ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17734529)
 * Hello Laura,
 * Yes that’s right. In my case, the code looked like this below. Is correct?
 *     ```wp-block-code
       <?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 [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/)
 * (@wpmudev-support8)
 * [2 years ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17734941)
 * Hi [@bazzarello](https://wordpress.org/support/users/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](https://wordpress.org/support/users/bazzarello/)
 * (@bazzarello)
 * [2 years ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17737065)
 * 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 [Jair – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport15/)
 * (@wpmudevsupport15)
 * [2 years ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17740993)
 * Hi [@bazzarello](https://wordpress.org/support/users/bazzarello/),
 * I hope you are doing well today!
 * Please try the following code snippet and let us know if it helps.
 *     ```wp-block-code
       <?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](https://wordpress.org/support/users/bazzarello/)
 * (@bazzarello)
 * [2 years ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17752559)
 * 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
    - [https://ibb.co/xMPv7zr](https://ibb.co/xMPv7zr)
    - [https://ibb.co/znjQpMp](https://ibb.co/znjQpMp)
    - [https://ibb.co/41pnBq1](https://ibb.co/41pnBq1)
    - [https://ibb.co/TtnDjTP](https://ibb.co/TtnDjTP)
    - [https://ibb.co/TgJ5tZJ](https://ibb.co/TgJ5tZJ)
    - [https://ibb.co/CvxDtHx](https://ibb.co/CvxDtHx)
 *  Plugin Support [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/)
 * (@wpmudev-support8)
 * [2 years ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17753485)
 * Hi [@bazzarello](https://wordpress.org/support/users/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](https://balsamiq.com/support/faqs/browserconsole/))
   –
   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](https://wordpress.org/support/users/bazzarello/)
 * (@bazzarello)
 * [2 years ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17765269)
 * 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](https://wordpress.org/support/users/wpmudevsupport12/)
 * (@wpmudevsupport12)
 * [2 years ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17766952)
 * Hi [@bazzarello](https://wordpress.org/support/users/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)

The topic ‘Mask for zip code’ is closed to new replies.

 * ![](https://ps.w.org/forminator/assets/icon-256x256.gif?rev=3443182)
 * [Forminator Forms – Contact Form, Payment Form & Custom Form Builder](https://wordpress.org/plugins/forminator/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/forminator/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/forminator/)
 * [Active Topics](https://wordpress.org/support/plugin/forminator/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/forminator/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/forminator/reviews/)

 * 14 replies
 * 5 participants
 * Last reply from: [Patrick – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport12/)
 * Last activity: [2 years ago](https://wordpress.org/support/topic/mask-for-zip-code/#post-17766952)
 * Status: resolved